studionashvegas | WordPress Development, Web Design, Social Media, and Marketing in Nashville, TN

This post is part of the “Creating a WordPress Theme from a .PSD” series for designers to use for theme development. The other posts can be found here:

• Part 1 – Background / Introduction
• Part 2 – From .PSD to .HTML
• Part 3 – WordPress Structure
• Part 4 – The Header (header.php)
• Part 5 – The Footer (footer.php)

We’ve taken a look at one of the key files in the WordPress universe, the header, which kicks off everything else in a WordPress theme (including CSS, RSS, and all the other meta goodness). Now, going from beginning to end, we’ll explore the footer of a standard WordPress Theme. To be honest, a footer really only needs to have three elements:

1. the <?php wp_footer(); ?>
2. a </body> tag
3. an </html> tag

The first of those, the php function, serves the same purpose that <?php wp_header(); ?> does in the header – it serves as a hook for plugins and other WordPress functions that need to prophigate themselves in the footer. Think of it this way: if you were to install the Google Analytics plugin, how do you think it knows where to put the Analytic code? Answer: that php tag.

However, aside from those three lines, you can put anything else you want to show up under the sidebar and content. A lot of people add a second navigation to their footer (sometimes including other less-important site pages such as the privacy policy and legal information). The theme designer’s tagline/information can be found there too. And why not show your love to WordPress by including a statement saying that you are “Proudly Powered by WordPress”.

Widgets go great in a “footer-bar”. A great way to display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in relatively short space.

Of course, there are fun footers too.  It’s your theme – do what you want with it!

A lot of people have been asking me to explain some of the new features in WordPress 2.7 – the main ones are the admin Interface and some of the new, movable widget-like items in the post menu and on the dashboard.  But, it’s hard to talk about visual changes when, to be honest, you can’t see them.  Enjoy this >5 minute screencast on some of the new features included in WordPress 2.7.

WordPress 2.7 Admin Tour (full size)

Starting with the design concept, we took our WordPress theme from a .psd file to an .html file. Then we started laying the groundwork by commenting and slicing apart the .html file we created into the various .php files.

So, what do those various .php files really do?  And what should go in each one?  That’s where will shift our focus as we take a look at the beginning of any good WordPress theme, the header.php.

The header, by nature, will be the first file you call in your WordPress theme.  Typically, it will contain one or more of the following elements:

• Doctype Information
• Meta (Charset, Title, Description, Keywords)
• RSS Information (Feed/Comments Feed)
• CSS Stylesheets
• Javascript Calls/Functions
• The WordPress Header Call

The Doctype information should have been automatically included when you started your new Dreamweaver file back in step 2, so that’s pretty self explanatory.

When it comes to your meta information, you want to make sure a few things are covered.  As good practice for SEO, make sure your title has good keywords (You can use <?php bloginfo(’name’); ?> if you want – just make sure that your blog name has those keywords included).  The codex also explains how you can set different

Your description is next.  If you want to use the description you declared inside of WordPress, use <?php bloginfo(‘description’); ?>.  Once again, make sure you make great use of those keywords!

And finally, your keywords (yes, I know I’ve talked about keywords quite a bit – can you sense a trend?) should only be the keywords that best describe your site.  Only use a few of them, and don’t pad the ones in you know won’t describe your content – Google doesn’t like that.

Your RSS Feeds are next.  Yes, I said feeds, but if you only have one, that’s fine. At least call your WordPress feed in the header:

<link rel=“alternate” type=“application/rss+xml” title=“<?php wp_bloginfo(‘name’); ?>” href=“<?php wp_bloginfo(‘rss2_url’); ?>” />

The relevance of the link, the type (RSS+XML), the title, and the URL.  This puts that nice little RSS icon in your Firefox toolbar also (but don’t forget to actually link to it in your blog!)

Next you should link to your CSS stylesheets.  This should be taken care of inside of Dreamweaver, but if you want to release the theme for the public, you can use “<?php wp_bloginfo(‘url’); ?>/wp-content/themes/THEMENAME/style.css”.  In fact, use this anyway – it’s a great way to get it right no matter what! (are you seeing a trend in not hardcoding your theme links?  Makes it easy to port to other sites.)

Any JavaScript you need to use can go after the CSS stylesheets.  But then again, if you’re using JavaScript, you know that already.

Finally, have <?wp head(); ?> right before your </head> tag.  It’s called a “hook”, and it does just what it sounds like: lets functions and plug-ins that are called in the header do their thing.  A lot of plug-ins use this, so make sure it’s there.

Now, here’s where the gray area comes into play. You’ve ended your head tag and started your body tag.  Should you include anything else in your header?  Well, ask yourself this question: are there elements (such as the navigation, logo, and other such items) that you want to be able to show on every page?  If the answer is yes (and it pretty much always is with those elements) then go ahead and put them in.  Usually you want to stop the header RIGHT BEFORE your content div starts. 

Sounds like a lot of elements, but having a great theme means taking care of all of the geeky stuff beforehand.  That all taken care of, you can let the rest of your theme really shine out.

Next time we’ll talk about the footer.php, the possibility of “footer widgets”, and what other goodness you should include.

I spent days (literally) looking for a good lifestreaming plugin for WordPress to showcase some of the exploits that I have my hand in on a daily basis (videos, twitter, pictures, etc).  The ones I found had certain features that I liked, but none of them really LOOKED (format-wise) how I wanted it to.

Enter Friendfeed.  They have a slick looking widget/badge you can embed on a site to display the items that are broadcast to your Friendfeed.  BUT, in the initial code, you can’t make it do everything you want.

With some fun hacking, I’ve got the FriendFeed widget doing what I want.  So, if you want a great, easy way to show your lifestream, here’s the 4-1-1:

1. Head over to FriendFeed.com.  On your personal profile page, next to your pictures, there’s a link that says “Embed in a Web Page”.

   

2. That will take to the “embed” page.  There are five options (Badge, ShareLink, Feed Widget, Chiclet Widget, and Status Widget).  You want “Feed Widget”.
3. Clicking on that link will give you a preview and some options to choose.  Here are your optimal choices:
   • Feed: My Feed”
   • Services: All Services (you can include only a certain service if you want to segment it, but this shows everything in order)
   • Entries: Change it to 10.  We’ll be hard changing this in the code, but that drops a variable in we can change.
   • Show: UNCHECK all of the boxes.  You want to get rid of the logo, feed, and subscribe links.
   • Format: Javascript (yes, I know the other option mentions WordPress, but we’re doing things a bit differently)
   • More Options / Width: Set the width of the CONTENT region (minus sidebar) you want to display this in.  Typically anywhere from 400-600 pixels)

   

4. Copy the HTML.  Take it into a text editor and get ready to make some changes.  This is (more than likely) what you have:
   <script type=”text/javascript” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&amp;num=10&amp;hide_logo=1&amp;hide_comments_likes=1&amp;hide_subscribe=1″></script><noscript><a href=”http://friendfeed.com/studionashvegas”><img alt=”View my FriendFeed” style=”border:0;” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&amp;num=10&amp;hide_logo=1&amp;hide_comments_likes=1&amp;hide_subscribe=1&amp;format=png”/></a></noscript>

   That’s all well an good, but it’s only showing 10 entries and it looks weird.  Change the “num=10” to something bigger like “num=100”  Also, make sure to add a special div to your script – you want to be able to target CSS to customize it; might as well give it a canvas hook to work with! You can also delete the <noscript> section too.

5. Take your page.php and make a duplicate.  Rename this page “lifestream.php” and upload it to your server.  In the WordPress theme editor, take everything between:
   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

   and

   <?php endwhile; endif; ?>

   and delete it (those lines included).  Copy your final script, which should look something like this:

   <div class=”lifestream”><script type=”text/javascript” src=”http://friendfeed.com/embed/widget/studionashvegas?v=2&amp;num=100&amp;hide_logo=1&amp;hide_subscribe=1&amp;width=505″></script></div>

   and paste it where those php calls were.  Make sure you also include the code to create a page template in WordPress:

   <?php
   /*
   Template Name: LifeStream
   */
   ?>

   at the top of the page. Save your changes.

6. Create a new WordPress page titled “Lifestream” and set the page template to “lifestream” (leave the content blank).
7. Voila!  Your very own friendfeed widget. But hold on, what if you want to change the css?  No matter what code you put in, it doesn’t work!  Never fear; there’s a guide here!  A Guide to CSS’ing a FriendFeed Widget, that is.

In our quest to take a WordPress theme from start to finish (Photoshop to Functional Theme), we have reached what most people would call the end of their journey.  We’ve taken our Photoshop file, made the necessary slices and converted it to an .html file. If we wanted this page to remain a static web document, we’d stop here, head into the base camp, and drink our hot cocoa.  But we’re not done quite yet, because we need this page to be able to handle the dynamic content that WordPress delivers.  Before we make our ascent, however, we need to know what it is we’re dealing with.

Theme Structure

WordPress themes have three files (usually four) at minimum that are required in order to be considered a true WordPress theme: header.php, index.php, sidebar.php [optional] and footer.php.  There are many more files that you can include (404.php, single.php, page.php; the list goes on) but those core files are what defines WordPress themes and how they are segmented out.

The best way to take our .html file and segment it into the various files we need is to use comments:

<!—Header—>

…header stuff is here…

<!—End Header—>

<!—Main Content—>

…main content goes here (this will be your index.php if you’ve been designing with blog postings in mind)…

<!—End Main Content—>

<!—Sidebar—>

…your sidebar contains badges, widgets, recent posts, comments, etc…

<!—End Sidebar—>

<!—Footer—>

…the footer contains a boilerplate, navigation, and design/copyright information…

<!—End Footer—>

What we’ve basically done is taken our .html file from this:

to this:

Then, just cut and paste those sections into their respective files:

Finally, back on the .html page, replace the code that you just cut/pasted with these commands, respectively:

<?php get_header(); ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

These are WordPress specific commands that pull in the contents of header.php, sidebar.php, and footer.php into one page that is generated when you look at the wordpress theme in a browser.  Save the remaining code as index.php, and you keep your .html file handy as a reference to check the design as you are going along.

We’re not nearly done, but we’ve laid the foundation for a killer WordPress theme by splitting up the files.  When WordPress accesses the databases via one of the .php pages (index.php by default) it pulls in the header, sidebar, and footer as one page.  This way, you can just include those <?php commands to call the header whenever you want, instead of having to repeat code in every page.

I want to go into each of these files in more depth to give tips, tricks, and techniques for making sure the WordPress theme is the best it can be, so the next post will be focusing on header.php and footer.php.  After that sidebar.php, then an in-depth look at the various other files (index, single, page, and archives) to make sure they work right with our created theme.  Finally, we’ll look into comment styling and see ways we can make our comments look awesome (and match our theme!)

This is the 2nd part in a series on turning a design done in Photoshop into a WordPress theme.  I’m documenting taking a client’s theme from concept to functional site, showing a brief overview of the steps that I take.

When last we met, I had just put the final touches on the WordPress design for “Pray With Africa”.  With the design completed, it was now time to take that design and (using a combination of Dreamweaver and Photoshop) turn it into a fully functional WordPress theme.

Before we begin, I know that using the slice tool you can take a .PSD file (very easily) and turn it into a site without needing Dreamweaver.  This method does give you the option of exporting CSS / HTML tables with images that do the trick pretty well.  However, if you plan on using pure CSS to center the page, you may want to rethink and switch your slices to “images only”.  Using the pre-rendered CSS puts everything into an “absolute” position, which doesn’t allow for even centering on any width monitor.

That being said, and having already switched my CSS slices to “images only” in my Photoshop settings, I pulled up the previously created file:

Now, in Dreamweaver, I set up my document space.  That requires three things:

1) Creating a new index.html file – this will be sliced into the corresponding .php files later, but for now, I want to work on it as a whole.

2) Creating a blank .css file.  This will be named “style.css”, as per standards, and will house the styles for the entire theme.

3) Attach (and copy into the directory) the “reset.css” file.  This clears a lot of the browser-specific styling out of the document, and allows me to start with a blank canvas.  For more information on “CSS Reset”, visit Eric Meyer’s site where he documents the need for / use of a CSS Reset.

The first div I create is a #wrapper div container. I set the width to 960 (because I’ve used a spinoff of the 960 grid system to design my mockup) and set the margins to “auto”.  This pushes the div horizontally into the center of the page, and allows me to center the theme no matter what screen resolution someone is using (my themes are all optimized for 1024×768 and larger).

After that, I begin taking the image from the top down and pulling pictures (either through slicing or cropping) from Photoshop into Dreamweaver.  I started with the header:

Notice there’s no logo?  We’ll get to that in a second.  This image will become the background for it’s own div (a #header div).  Inside that div, I’ll position the logo and link it to <?php bloginfo(’url’); ?>, a template tag that will automatically insert the URL of the blog (even if it’s not on the root of the site).

Continuing on, I’ve divided my navigation (which I’m using images for to get a really nice hover effect) into slices in Photoshop:

Saving them (and their respective hover images) into the image folder, I then create an unordered list to display them.  This puts them in a nice vertical line, but since I need them to display horizontally, there’s a few things left to do.

In the CSS code, I add:

.nav li {
    float: left;
}

which causes the items to float next to each other in a horizontal line (if you’re not using the CSS Reset, you’ll also have to put:

.nav li {
    float: left;
   list-style: none;
}

to get the bullets removed.

So, basically, by taking the parts of the Photoshop file and slicing/cropping them in Photoshop, I end up with a web comp that is very close to the mockup.  You can see a web comp (non-working) here:

http://www.studionashvegas.com/test/pwa

Tomorrow I’ll start switching the .html file over to .php files that are separated by their function (index, header, sidebar, footer).

A lot of people ask me what process I use to design themes for WordPress, and my answer to that question is the same answer I give to people who ask my design process “in general”: I start with a Photoshop mockup and take it into HTML via Dreamweaver.  The only difference is that I (quite literally) drop WordPress code in at the last minute, and separate a SINGLE .html file into .php files (header.php, sidebar.php, footer.php, and index.php).

So, to shed some insight into my process (and the process of creating a WordPress theme in general), I’m going to let you in on the creation of a theme for one of my current clients, Pray With Africa:

Pray With Africa is sending out a missions team to different cities in Africa in the next few weeks.  They wanted a site that could be easily updated, have a blog element, and could be a place for pictures to be funneled in.

Of course, I chose WordPress (and not just because of my affinity for it).  It’s super easy to blog with, has the ability to bring in Flickr galleries, and can be combined with Windows Live Writer to do posts offline while they are in the remote areas.  Live Writer can then push the posts out all at once when they have access again.

So I set to work on a design.  Here’s what I came up with:

Pretty straightforward, nothing too fancy, and just the right amount of grunge and clean to make it interesting. 

So, that’s where I am right now.  I’ll be documenting my progress as I turn this wireframe mockup into a WordPress theme.  The next part will be the different parts to a theme and where those parts lie in the comp pictured above.

[Note: this project is due tomorrow for the client, so don’t expect it to be documented right away.  Client first, then education ]

A long point of contention with WordPress MU users is the inability to “promote” posts from the user pages to the main blog feed.  This causes a disjoint between the bloggers and the site administrators who want to share the content their users are creating.  Other content management systems have this feature built-in, but WordPress users have been trying workarounds (with little success) to allow their users to have the “15 MB of Fame” they deserve.

Working with the Students for a Free Economy, we’ve come up with a solution that works really well (and gives added benefit to the site administrators)

The one caveat with this way is that it does not import the author’s names.  I’ll address that later in the post.

You Need:

1) Google Reader Account

2) WPMU – Sitewide Feed Plugin

3) WP-O-Matic Plugin

4) WPMU installed on a host with a few user blogs already created

Let’s Roll

1) Install Sitewide Feed into the /mu-plugins/ directory.  This compiles feeds from all over your MU installation and creates a “master feed” pulling in posts as they happen from the user blogs.  Putting it into the /mu-plugins/ directory automatically activates it, so you should be good to go.

2) Visit the generated feed.  It should be something like http://www.yourdomain.com?wpmu-feed=posts if you are running a subdirectory structure.  If you are running subdomains, it’s http://www.yourdomain.com/masterfeed/ or whatever you set it to in the options.  Make sure the posts are being parsed correctly, then copy the feed url down.

3) Put the feed into your Google Reader.  This is the first step in allowing you to “promote posts”, but it also gives you a super easy way to check your user’s blogs for spam, inappropriate content, or anything else you as a site administrator need to be on the lookout for.

4) Look at your feed in Google Reader.  If it shows up OK, go ahead and share an item or two (making sure to annotate the author’s name and URL in the note).  Make sure it’s fairly recent so you can know immediately if it shows up in the master feed later.

5) Click on your “Shared Items” tab in the Reader sidebar.  It should bring up a page with only those items that you’ve shared, and a link to a public page.  Visit that link, and pull the RSS feed from the Firefox/IE toolbar (it should be long and look like this: http://www.google.com/reader/public/atom/user%2F08955600430794990750%2Fstate%2Fc…).

6) That feed is your shared items feed.  You are going to take those shared items and parse them onto your blog as promoted posts using WP-O-Matic.

OPTIONAL* 7) Create a new user (role doesn’t matter) in your main blog.  For the SFE blog we used “An SFE Blogger”, but you can call it whatever you want.  If you don’t mind it posting under your username, skip this step.

Install WP-O-Matic into your /plugins/ directory (you’ll have to manually activate this one) and follow the setup procedures. When you’re all set up, click “Add Campaign” to set up your newly generated shared items feed.

9) Set your options, and click Submit.

And there you have it.

To break it down in a nutshell, this method parses together all of your sites’ blog feeds, brings them into Google Reader, allows you to moderate which posts you want to show up on the front page, and then pulls them in at a timed interval.  Sure, there are other methods people have found to doing this, but the utility in this method is that you have a way to monitor your entire site from a single dashboard, while allowing your users to have their moment in the sun.

I’ve been playing around with some really cool features in WordPress lately.  With my site, and a few others i’ve been working on, I’ve been toying with the “Page Template” feature that allows me to customize which elements show up on a page (like, a sidebar, specific headers, a footer, etc).  But, while working specifically on The Film Talk for Jett Loe, I developed/discovered a technique for keeping visitors in your page but giving them the luxury of a Google Search.

(more…)