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!

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!