There were a few answers from the panel, but the common theme was that it was the community that really spoke to them.  True enough; I’ve always found the community to be fantastic, so it was awesome to see and interact in meat space for once.

Here are some personal takeaways from today’s WordCamp, that I hope to expand on later:

1. Learned about Post Formats with get_post_format(), and heard some interesting things you can do with get_template_part().
2. Realized I should be marking up content in better ways, such as with <article> and <figure> tags.
3. Was kind of blown away when Ian Stewart said that the_content() is King.  If you stuff a lot of data into custom meta boxes and custom fields and your user then switches to another theme that doesn’t support those features, the content will appear “gone” to them.
4. Before implementing a custom post type, first think about using a post format.
5. Learned that I should read the WordPress Philosophy page, and understand the heuristics that Daryl Koopersmith spoke about in his talk: Decisions, Not Options.
6. Picked up a thing or two about securing widgets: iframes, Needham–Schroeder protocol, and xPostMessage for secure frame communication.
7. Received some advice about releasing themes into the wild, and that the WordPress Theme Review page and Coding Standards page are good references.
8. Realized that I should be more involved in the WordPress forum, and should make it a goal to contribute to WordPress
9. Found a few new blogs I should be following: wpcandy.com and ma.tt
10. Learned that I should be attending the weekly IRC Dev meetups, should be paying attention to the WordPress Dev blog: wpdevel.wordpress.com and should be following WordPress bugs at core.trac.wordpress.org
11. Remembered that I should learn more about media queries and responsive web design.
12. Confirmed that Chris Coyier of CSS-tricks is amazing, hilarious, now lives in the bay area, and that I want to be his friend.

The way I ended up thinking about this was:

1. The website visitor comes to our site, has no domain cookies, and should see the message once, but not again for another 7 days.  Our code at this point should:
1. Show the message once
2. Set a cookie that will be responsible for showing the message once each week by expiring every 7 days. (7-day cookie)
3. Set a cookie that will be responsible for not showing the message after seeing it 8 times. (CookieCounter)
2. Once the visitor returns to out site after 7 days, the first cookie we set should expire, and based on that we’ll:
1. Show the message again
2. Set the 7-day cookie again
3. Update a value in the CookieCounter
3. Once the visitor has seen the message 8 times, we won’t show it anymore, and we’ll determine this by looking at the CookieCounter value, which should have been updated each time the visitor saw that message.

Using this logic, I went about coding this by first creating the 7-day Cookie, which is a self-invoking function:

    (function setMyCookie(){
        var cookie = "my7DayCookie";
        var my7DayValue = 1;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 7);
        var tmp=cookie + "=" + my7DayCookie+ "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp;
    })();

Now we want to create a very similar function to create the second CookieCounter cookie:

    (function setMyCounterCookie(){
        var cookie = "counterCookie";
        myCounterCookieValue = 1;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 99999);
        var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp2;
    })();

The last function we need to create is one that will find the value of a cookie:

function getCookie(cookieValue) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i=0; i<ARRcookies.length; i++) {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x === cookieValue) {
            return unescape(y);
        }    
    }
}

And then we assign that value to a variable by running the function and giving it the cookie we’re trying to read as a parameter:

var myCounterCookieValue = getCookie("counterCookie");

Now that we’ve got our two functions that will create and read our cookies for us, we need to start building out our logic and creating these cookies when appropriate.  I started this by thinking about the first state that a user would be in:  they have no cookies set and have not been to the site.  I started by writing some code that went something like this:

Pseudo code: if the user has no cookies, show the message...

I found however that the code for determining if there was NOT a cookie started to get messy and I began running into errors.  Instead, I flipped it upside down and started writing something like this instead:

Pseudo code: if the user has both cookies, do nothing, else do something...

Here’s the basic structure of what I ended up with:

if (document.cookie.indexOf("my7DayCookie") >= 0 && document.cookie.indexOf("counterCookie") >= 0){
    // Look for our cookies and if found do nothing
} else if (document.cookie.indexOf("60DayCookie") >= 0 && myCounterCookieValue < 8){
    // if the Cookie Counter is there and it's value is less than 8, fire the message
} else if (my60DayValue >= 8 ) {
    // if the Cookie Counter value is greater than 8, do nothing
} else {
    // if none of the above resolve to TRUE, then we know it's a first time visitor, so fire the message, and set both cookies.
}

So, now we have a logic structure and we have our functions for creating cookies, but one final thing we need to think about is how to update the counterCookie.  It starts with a value of 1, but needs to update each time the my7DayCookie is reset.  We do this by inserting a modified version of our counterCookie creator function in the first “else if” block where we know the counterCookie exists, but the my7DayCookie does not, meaning that the user has seen the message once and the my7DayCookie has expired:

    (function setMyCounterCookie(){
        var cookie = "counterCookie";
        myCounterCookieValue++;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 99999);
        var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp2;
    })();

In the above code, notice the only difference:

myCounterCookieValue++;

When this function runs, it will take the existing value the counterCookie holds and add 1 to it.  When we put it all together, it would look something like this:

function getCookie(cookieValue) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i=0; i<ARRcookies.length; i++) {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x === cookieValue) {
            return unescape(y);
        }    
    }
}

var myCounterCookieValue = getCookie("counterCookie");

if (document.cookie.indexOf("counterCookie") >= 0 && document.cookie.indexOf("my7DayCookie") >= 0){

    // BOTH COOKIES PRESENT, SO DO NOTHING

} else if (document.cookie.indexOf("counterCookie") >= 0 && myCounterCookieValue < 8 ){

    // SHOW MESSAGE BY INCLUDING MESSAGE CODE HERE

    // RESET THE my7DayCookie
    (function setMy7DayCookie(){
        var cookie = "my7DayCookie";
        var my7DayCookieValue = 1;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 7);
        var tmp=cookie + "=" + my7DayCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp;
    })();

    // UPDATE counterCookie, INCREASE ITS VALUE BY 1
    (function setMyCounterCookie(){
        var cookie = "counterCookie";
        myCounterCookieValue++;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 99999);
        var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp2;
        return myCounterCookieValue;
    })();

    //console.log("counterCookie Value = " + myCounterCookieValue);

} else if (myCounterCookieValue >= 8 ) {

    //DO NOTHING, THE USER HAS SEEN THE MESSAGE 8 TIMES

} else {

    // SHOW THE MESSAGE AND SET BOTH COOKIES FOR THE FIRST TIME

    (function setMyCookie(){
        var cookie = "my7DayCookie";
        var my7DayCookieValue = 1;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 7);
        var tmp=cookie + "=" + my7DayCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp;
    })();

    (function setMyCounterCookie(){
        var cookie = "counterCookie";
        myCounterCookieValue = 1;
        var showAgain = new Date();
        showAgain.setDate(showAgain.getDate() + 99999);
        var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
        document.cookie=tmp2;
        return myCounterCookieValue;
    })();
}

I hope this was helpful!

On my machine, git is installed in /usr/local/git/

In terminal, I found that running: echo $PATH returned:

/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/X11/bin

This didn’t look right.  After some reading, it realized I needed to make some changes to my profile to update the PATH for git.  To do this, I made sure I was in my root directory:

cd ~/

Then I created my profile since it didn’t seem to be there:

touch .bash_profile

Then I opened it using text edit:

open -e .bash_profile

In the file I added the following line:

export PATH=/usr/local/git/bin

I then restarted Terminal and once I found my development directory and ran a git status, all was well.

When you change a page slug, it obviously affects your URL.  Your old page used to be here:

http://www.yourdomain.com/foo

…and your new page is here:

http://www.yourdomain.com/bar

However, if you were to actually type your old address into your browser, you’re going to get a 404 Page Not Found Error. This matters because there are probably all sorts of references out there (in google’s search results, in your own website, on other websites, etc.) to http://www.yourdomain.com/foo, and you don’t want anyone who clicks on one of those links to get an error message.  You want them to go to your new URL: http://www.yourdomain.com/bar.

To do this, you’ll need access to the root folder of your WordPress install.  Make sure that whatever application you’re using can view hidden files, and look for the “.htaccess” file. Hopefully WordPress will have already automatically created one for you, but if not go ahead and create one.  Here’s an example of what the WordPress .htaccess file might look like:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Leave this bit of code there, and let’s go ahead do a Permanent 301 Redirect from your old page to your new page.  To do this, in our example, simply add the following line of code:

Redirect 301 /foo http://www.yourdomain.com/bar/

Now, if you save the file and then try to go to the “/foo” page, your browser should redirect your automatically to the “/bar” page.  When search engines crawl your site, they’ll update their records with this information as well.

Cheers!

After looking around the WordPress community for a bit I found numerous plugins that seemed like they would do the trick, but I really hate throwing plugins at a problem unless there’s a very compelling reason to do so.  After awhile though, I found a post on elliotjaystocks.com that immediately made sense, and the solution is dead simple.

Simply put: you just need your single.php file to make a few decisions for you.  A simple if statement will help determine which category the post is in, and once you know that you can build the single.php template by including other (custom) templates.

The first thing you want to do is copy the code in your single.php file and save it as two new files that we’ll call using single.php.  I named mine “default-single.php” and “product-single.php”.

Now, in our original single.php file, delete all of the code and replace it with something like below:

<?php
/*
Template: single.php
*/
get_header();
?>

<?php
   if ( in_category( array( '6', '11' ) )) {
      include(TEMPLATEPATH.'/default-single.php');
   }
   else {
      include(TEMPLATEPATH.'/product-single.php');
   }
?>

The first php block simply names the template and of course the get_header(); function grabs the header.php file.

The next php block starts an if statement, and in this example we’re looking for posts that are in a certain array of category IDs: 6 and 11.  If there are any posts in those categories, we’re going include the code from the default-single.php file.  Otherwise, the else statement will include the code from the product-single.php file.

In this manner you can customize your two new single.php templates any way you like, and utilize them by simply categorizing your posts appropriately.

I hope this comes in handy! Enjoy!

A few things happened that changed my take on the necessities of version control.

1. At work we upgraded our CMS, which didn’t preserve our versions when it launched, and it was hard to track exactly what changed when we’d make backups.
2. Freelance clients started asking for updates and changes to their sites, and I didn’t want a bunch of backup files cluttering my directories.  I also want to be able to start tracking what changes were made, rather than tracking simply that changes had been made.

So in the office we starting using CVS, and at home I decided to try Git.  Because Git seems to have a steeper leaning curve for those not used to working with a command line, I want to document what I’ve learned with it.  So if you’re in need of a VCS and you’re interested in Git, perhaps this will help.  At the very least, it’ll serve as a reminder to me!  Note: you may want to familiarize yourself with some of the basics of working with the command line or terminal before proceeding.

Getting Started

I used this great post over at Net.Tutsplus.com as a guide, and it helped me tremendously.  After installing and configuring git, here’s how you set up one of your existing directories as a Git repository.

In my case, I have a version of WordPress installed locally that I use for development.  I want to have each theme have it’s own repository.

The first thing you need to do is navigate to the directory that you want to set up as a repository.  For me, that would be the theme’s directory in my local instal.

cd /wordpress/wp-content/themes/myTheme

Now that we’re in the directory that we want to track versions in, we need to initialize Git by typing:

git init

Once completed, you should see the following:

Initialized empty Git repository in /wordpress/wp-content/themes/myTheme/.git/

Okay, so now that we have the repository created, we need to actually commit some code to it. Do that by typing the following:

git add .

This will add all the files in your directory to the Git staging area. The “.” in the command means “get everything,” but you can specify what you want to add to the staging area by typing out the name of the file you’re interested in like so:

git add header.php

Now that we have all of our files in the staging area, we want to commit them to the repository. Remember that in this example we already have an entire code base that we want to add to the repository and that we want to modify later. Since this is our initial commit, we’ll want to indicate that in our comments. To commit with a comment on all files, type the following:

git commit -m "initial commit"

You should then see something like:

[master (root-commit) 466ce7c] initial commit 56 files changed, 5602 insertions(+), 0 deletions(-)

Which is followed by a list of all the files that were committed. At any time if you wonder what the status is of files in your repository, you can ask for the status:

git status

# On branch master
nothing to commit (working directory clean)

Now that you have a committed repository, you can begin working on your code. Once you modify a file and save it, run the status command once again and you should see something like this:

# On branch master
# Changed but not updated:
# (use "git add  ..." to update what will be committed)
# (use "git checkout -- ..." to discard changes in working directory)
#
# modified: top.php
#

This means that Git is aware that you’ve changed something in your file. At whatever point you’re happy with the changes you’ve made to your code, you’ll need to add it to the staging area, and then commit it as illustrated above. There’s a simple way to do both of those things at once with this command:

git commit -am 'your message here'

The “-am” means that you’re both adding it and want to type out a message. This way you don’t have to run two separate commands to commit a change.
Well, we’ve now used most of the git commands that I’m so far familiar with. Obviously there are many more things you can do with Git, but at this point we’ve got our directory, we’ve added and then committed code, and we’re on our way to tracking our code versions!

As I become more familiar with Git, I’m sure I’ll write some more about it. Hope you enjoy Git!

Typically I’d create a custom page template for the client, and then use the query posts function to find only posts categorized as “ACME.”  However, since their clientele are growing, I didn’t want to have to create a new page template each time they acquired new business. Besides, that’s just too many page templates!  I searched around for what other wordpress developers might have done and surprisingly I didn’t find much.

So, here’s what I did:

I made a new page template and at the top I created a variable called $clientCategory and set its value to the “client” custom field value for the page in question. In our example, the client would create a page and using a custom field on the page, they’d type in “ACME.”

<?php $clientCategory = get_post_meta($post->ID, 'client', true); ?>

So at this point in our example, the $clientCategory variable value is  ”ACME.”

Next, I use the global $query_string variable in order to find posts that aren’t just the contents of the page in WordPress.  And then I use the query_posts function to find all posts that have a category name equal to the value set in the page’s “client” custom field.  To do this, I concatenate the $clientCategory variable that we set above to the end of the category_name argument as so:

<?php
   global $query_string;
   query_posts('category_name=' . $clientCategory);
?>

So now if the client wants to create posts for ACME and have them show up on ACME’s page, all they have to do is categorize each post as ACME.  Now of course, this means that the Category Name and the “Client” custom field value on the Page have to be exactly the same in order for this to work, but it means that the client can create these pages on the fly and I don’t need to create new page templates.

For example, if they want to create a page of posts for a new client “Widgets Inc.” they simply need to create a new post category “Widgets” and then create a new page that uses the new page template, and enter in “Widgets” as the “client” custom field value for the new page.

I hope this makes sense, and I hope it helps!

The Gastronautsf.com website was designed by Adam Cahoon and launched in the fall of 2010.  Built for a good friend of ours Nate Keller and his business partner Mirit Cohen, it’s a wordpress theme that allows them to publish menus, update content at will,  and receive catering requests.

Soon it will allow Nate and Mirit to publish private mini-blogs for each of their clients.  It was a fun project and continues to be. Check them out if you need a caterer!

I’m very happy to announce that a new version of the Heard Mentallity theme has been launched!

Coded from the ground up, Version 2 features much more flexibility in terms of integration into WordPress. 

The theme is lighter, faster, and has a much smoother user experience than did version 1.  Design-wise, it stays in the same ‘messages on a cork board’ style, but includes numerous improvements to the overall aesthetics, and even takes advantage of a little bit of CSS3.  Version 2 was built with growth in mind, and I’m excited to see the theme’s flexibility shine as new authors join the ranks Heard Mentallity.

The first version of Heard Mentallity was my very first WordPress theme, and as such, it wasn’t quite built in way themes should be.  It didn’t take advantage of a number of default WordPress functions, and as such many of the http references were absolute and hard coded.  Other mistakes were made as well, but instead of going into too much detail, let’s just say that this new version allows the site owner to update nearly every piece of content on the site and is built the way themes were meant to be built.

Some of the new features are:

1. Flexible Navigation: the horizontal navigation is comprised of pages, and authors.  When the site owner wants to add a page or add another author, those pages and authors will show up in the navigation without any modification to the theme files.
2. Blog header and and tag line are now configurable by the site owner, rather than being unchangeable images.
3. Author pages will pull editable information about that author and keep it stuck to the top of each page.
4. Gravitars have been implemented, so if you have one, it will show up in the comments section!
5. Facebook share button has been added to posts to easily share music with friends.
6. The songs listed in the sidebar from Hype Machine are now pulled from an RSS feed and link directly to the song on Hype Machine.  The first version utilized a generated image and simply linked to the site owner’s page.
7. Caching has been implemented via the Wordress plugin WP Super Cache, which speeds up load times dramatically.

Creating the theme was a lot of fun, and I learned a lot! There are a lot of things that I’ll be improving in future themes, but I’m really happy with the way this one came out.  I’d be happy to hear about any suggestions you may have, so feel free to share.

Cheers!

When David Hoffman requested a web site for his portfolio site, he also requested a site for his current project: Persephone, a Musical Allegory.  Because this needed to completed in time for the musical’s debut, we both sat down one weekend and pounded it out.

The layout of the site is a bit unconventional, and this is partly because we didn’t have a lot of time to dedicate to design.  It’s also partly because of some specific desires on the part of the client. However, for a weekender website, I think it’s not bad at all!

Features:

1. Integration with CushyCMS, a very simple system that allows the client to update most sections of the site.
2. Utilization of the Yahoo! Media Player, which scrapes the page for audio files and plays them in a  media player.  Pause / Play buttons are automatically inserted in front of audio links for direct interactions with the links themselves, and all audio files are also placed in a play list that allows continuous play of all audio on the page.

This site is pretty straight forward, but it seems to do exactly what it needs to do.  Furthermore,  it was fun to see what could be done in a single weekend.  Hope you like it.

Cheers!