Creating the footerphp template file

We'll start first with the footer.php file, as this will remain consistent across all page types for my theme 1. Create a new file in your theme's directory and name it footer.php. 2. Open up your index.php file and cut all the markup and WordPress PHP from the beginning of the footer in the markup to the end of the HTML page's last tag 3. Paste the selected code into your new footer.php file. 4. In your index.php file, where your footer code used to be, add the WordPress include template tag...

Creating the sidebarphp template file

Currently, the main sidebar (the sidebar that's just on the right-hand side of my layout) is still just XHTML markup. Let's get it out into its own template file and included into the index.php file, and then see about making it more dynamic with WordPress template tags. This will essentially be the same as creating the footer.php file 1. First, create a new template file named sidebar.php in your theme's directory. 2. Now cut everything that makes up your sidebar markup into that file. In our...

Using Word Press bundled includes versus including your own or using a CDN

As I mentioned earlier, the wp_enqueue_script function allows for a safe load of jQuery (and other includes) into noConflict mode. Loading your own version from Google Code or from your own site has the potential for problems down the line. For one thing, some plugins may also use the jQuery library (from WordPress' bundle or included directly in their own plugin), and they are going to load it up as well. They may load in older versions of jQuery or even a newer one. Having multiple versions...

Color schemes with GIMP or Photoshop

Pick one or two images which strike you and drop them into Photoshop or GIMP. A thumbnail is fine in a pinch, but you'll probably want an image a bit bigger than the thumbnail. Don't use photos with a watermark, as the watermark will affect the palette output. Lose the watermark Most stock sites have a watermark and there's nothing you can do about that. You can create a free login on Getty Images's Photodisc (http Photodisc.com). Once logged in, the watermark is removed from the comp images...

Color schemes

Now that the general layout is hammered down, we're ready to move onto more exciting design elements. You'll want a predefined palette of three to ten colors arranged in a hierarchy from most prominent to least. I like to create a simple text file that lists the colors' hex values and then add my own comments for each color and how I plan to use it in the theme. This makes it easy for me to add the colors to my CSS file, and then later to my Photoshop document as I create graphic interface...

More template files Home internal and static pages

As I mentioned earlier, the advantage of having your WordPress theme's parts separated into individual template pages is that your theme will be more flexible and able to accommodate a wider range of content. As nice as my theme currently looks, there are some problems with it that can only be dealt with if I break down the theme's design into further WordPress template pages. To start, I only want that huge 300 pixel-high header graphic to load on the home page. It's neat to give the feel of a...

Classes output by the media manager

The following are the options available when uploading an image using WordPress' media manager Any images uploaded through WordPress' media manager will have the following classes elegantly applied, depending on the options you selected when uploading the image .aligncenter This style is generated if you select Center. A good way to ensure this style is centered is display block margin-left auto margin-right auto .alignleft This class is generated if you select Left. .alignright This class is...

Adding in the favicon

The last touch is to take the favicon.ico file we created in Chapter 2 and make sure it loads up in our theme. To activate the favicon, follow these steps 1. Make sure the favicon.ico file is placed into the root of your theme's directory. 2. In your header.php file, locate your favicon link and target your theme's directory using the bloginfo template tag like so < link href < php bloginfo('template_directory') > favicon.ico rel shortcut icon type image x-icon > That should do it. When...

Licensing

You'll find that most WordPress themes you found on the web either do not mention licensing or use the GNU General Public License (GPL) license. If you're not familiar with the GNU GPL, you can learn more about it at http www.gnu.org copyleft gpl.html. You may wish to do the same with your theme, if you want it to be freely distributed, available to all, and changeable by all, with no permissions necessary as long as they acknowledge you. If you've created a completely original design that you...

Theme packaging basics

To make sure your template is ready to go public, run through the following steps before packaging it up 1. Remove all the unnecessary files hanging out in your theme's root directory As I work on a theme, I often copy in files from the default theme in order to quickly reference them. I make sure to name them something like orig_header.php, and so on, for quick and easy reference of template tags that I will use in my theme, but those must be cleared out before you package up. Be sure that...

Internal pages

Now that our home page is working, it's time to modify the index.php file for the internal page layout. Using the same rapid prototyping process we used to generate the home page layout in Chapter 2, I've created a mockup of my internal layout. Updating the index.php file to be an internal page The biggest difference between my internal pages and my home page is the header. As a result, it will be easier to start off by just copying my current home.php page back over into the index.php page. 1....

Custom fonts with CSS3

Safari and Firefox 3.1+ both support the font-face rule that allows your stylesheet to point to a .ttf or .otf (open type font) on your server. You can then reference that font in your stylesheet using the normal font-family property like the following font-family CuprumFFU src url('Cuprum.otf') h3 font-family CuprumFFU, sans-serif Incidentally, IE has tried to implement this since version 5. The drawback is that they use the .eot format and it hasn't fully caught on. Safari and Firefox...

Creating custom header footer sidebar includes

WordPress 2.7 introduced the ability to create custom header, footer, and sidebar templates for a theme. You simply create your custom header, footer, or sidebar and call it using the standard include template tag (which we'll get to later in this chapter). Be sure to add a file prefix of header-, footer-, or sidebar- and your own name. You can then call your custom template file like so. In Chapter 3, I updated my second sidebar include, from using the TEMPLATEPATH call, to the following much...

Problem with setting up a Lightbox effect in Word Press

While Lightbox JS is simple to add to your template (remember, Script.aculo. us and Prototype are available in WordPress via that wp_enqueue_script function). However, in order for Lightbox JS to work, you need to add a custom rel lightbox attribute to each < a href tag that will call an image into the Lightbox. I find this very easily done by flipping over to the HTML view in your WordPress Post or Page editor and just adding it in to the XHTML markup. Well, easy for me and maybe you, but...

Creating a custom include in your theme

Creating a custom include will not require me to edit all three pages. I only need to edit one page as follows 1. Open up your index.php page and select everything from the < div id intTop_navlist> down to the end div tag and < -- top_navlist--> comment. 2. Cut that code out and paste it into a new template page navlist.php. 3. Go back to the index.php page and add this include file where all that code used to be < php include(TEMPLATEPATH . navlist.php) > 4. Test your internal page...

The header

For me, the header is more than just the beginning of the XHTML file and the specific < head> < head> tags. It includes the opening < body> tag and through to the < div id head> tag that make up the top half of my theme's design. Create a file called header.php in your theme directory. Open up your index.php file and cut everything from the doctype at the very top of the file down to the closing XHTML comment Paste that into your header.php file, and in your index.php file...

Creating your Word Press workflow

Your work flow will pretty much look like the following You'll be editing CSS and XHTML in your HTML editor. After each edit, you'll hit Save, then use Alt + Tab or the taskbar to switch over to your browser window. You'll then hit Refresh and check the results (I'll normally recommend using Alt + Tab to switch over to the directed window, but you can use your own way). Depending on where you are in this process, you might also have two or more browser windows or tabs open one with your...

Including threaded comments

Threaded comments were introduced in version 2.7. They're great in that they allow a post's commenters to interact with each other as well as commenting to the posts author. A new comment on the post will show up, as normal at the bottom (or top if that option was set in the Administration panel), but if someone wants to comment on a comment, it will show up beneath that comment nested in one level. You can specify how many levels deep you'd like to allow commenting to go. This brings about a...

Adding tag display to your theme

In the interest of keeping things straightforward and concise, we didn't include tag-display capability to our theme in Chapter 3. That's OK, we'll do it now. This feature is very easy to add using the the_tags() template tag. Within any pages that display The Loop in your theme, decide where you'd like your tags to be displayed. I prefer them to be on top, under the author's name and category display. I'll add the following template tag just under the author and category tags in my loop < p...

Creating a custom page template

Let's use the following steps for creating a custom page template in our theme 1. Create a new file that contains the markup, CSS styles, and template tags you'd like your optional template page to have. I made a copy of my page.php and called it page_dynmc.php. I then copied the following comment loop back into it < div id pagecomments> < div class comments> < div comments_number(No Comments,< span response,< span Comments) > < div> < comments_popup_link(Add Your...

Using PHP to make graphic headers easy

I like to simplify this process by using a simple PHP script with a local TrueType font to help me quickly generate my header graphics. I can then just include them into my CSS sheet, dynamically setting up the text that the header needs to say. This technique is very useful if your site is going to be mainly controlled by a client, as they'll probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You'll be able to accommodate them...

Modifying the basic comments display

Because this is the Web and not a paper magazine, there are WordPress features I should take advantage of. I want to show what Column (a.k.a. WordPress category) the article has been posted to. I also want to take advantage of having people's comments and ideas on the article and help keep it fresh. So, I'll show how many comments have been added to the post. But again, some editing will need to happen, as I don't want those two items lumped together at the end of the article section. I've...

Testing other browsers and platforms

I'll mostly be talking about working in Firefox and then fixing for IE. Perhaps this is quite unfair, assuming you're working on Windows or a Mac OS, and that the source of all your design woes will (of course) be Microsoft IE's fault. But as I mentioned in Chapter 1, this book is not about only using Firefox You must check your theme in all browsers and, if possible, other platforms, especially the ones you know your audience uses the most. I surf with Opera a lot and find that sometimes...

Do it yourself or use plugins

In this chapter and the next one, I'll discuss how to use some of these techniques yourself and will also direct you to comparable plugins. In the case of more complex techniques, I will show you plugins that do the job and point you in the direction for learning more about doing it yourself. As to the question, should I use plugins or do it myself , it depends on a few things such as the following Your technical comfort level The level of control you want over the theme Whether your theme is...

Creating a basic loop

I'll start by pasting the following code (which I've copied from the default theme's index.php loop) into my widest column under my This Month header, overwriting the sample content. This code will ensure that the sample posts I've added to my WordPress installation will show up < php while (have_posts()) the_post() > < div < php post_class() > id post-< php the_ID() > > < h2> < a href < php the_permalink() > rel bookmark title Permanent Link to < php...

Out of the box model thinking

Your best bet is again to not use hacks. This is achieved in a couple of ways. First, you can break your XHTML markup down a little more. That means, for example, instead of one div layer leftSide width 200px border 2px This is clearly going to give you problems in quirks mode IE, because the div will stay at 200 pixels wide and squish your border and padding inside it. It would be better to tuck an extra div or other XHTML element inside the leftSide id such as < div Then, you can control...

Inline magazine

Lorem psum dolor sit. arret, consectetuer adipiscing eltt, 5ed a eras net orci volutpat vestibulum. Ut pellentesque sagittis metus. In euisrnod tellus id ante. Ut lectus. Nunc adipiscing. Praesent luctus, massa quis vu Iputate rhoncus, justo turpis mollis dolor, nec blandit nisi mauris et pede. Maecenas nec nibh. Nulla velit tellus, ornare nec, egestas eget, cursus sed, risus. Pellentesque sit amet velit eu urna v hicula semper. Ut tincidunt eras eu dolor. 5ed leo. Morbi viverra, tortor eu...

Understanding template tags

Template tags are most commonly used in templates to help you retrieve or get information from your WordPress CMS into your theme design. They can also be used to include or call in other template files. The bloginfo tag was a typical example of a template tag that can be passed a parameter. In the previous section, we passed it the stylesheet_url parameter, to make sure we targeted our style.css page, but in other parts of our template we may wish to pass that template tag the name parameter...

Column Layout Floating div tags versus CSS tables

IE8 finally offers full support of CSS tables (which are actually a CSS2 standard and not a CSS3 standard). There's no doubt that CSS tables relieve a lot of frustration in dealing with column layouts in design. In this design, however, you'll note that I stick to a more traditional floating cleared div structure that uses the pushbottom class with a clear property to make sure the footer stays at the bottom of the longest column. The main reason behind this is to ensure that the site is easily...

Breaking it up Header footer and sidebar template files

Now that we've got the Loop working in our theme, it's time to start breaking the theme down into template files which will help us make sure edits flow consistently across all of the various aspects of the theme. My rule of thumb for separating markup and code into its own template file is, first and foremost, avoiding duplicate markup and code. Second, you'll be able to create template files to address any unique markup and code that should only appear in special circumstances, like on a home...

Create a new theme directory

To get started, we'll create a copy of the existing default theme. I'm using a development installation of WordPress 2.8.5 on my local machine within MAMP. If you're working remotely, you can follow my instructions using an FTP client instead of the desktop Copy and Paste commands. 1. Create a new directory that has a completely unique name that best suits your project. 2. Important Don't skip this step Copy in your XHTML CSS mockup files and the image directory. Rename your index.html file to...

Passing Flash a Word Press variable

So now you've popped a nice Flash header into your theme. Here's a quick trick to make it all the more impressive. If you'd like to keep track of what page, post, or category your WordPress user has clicked on and display a relevant image or animation in the header, you can pass your Flash SWF file a variable from WordPress using PHP. I've made a small and simple Flash movie that will fit right over the top-right of my internal page's header. I'd like my Flash header to display some extra text...

CSS3the new way to round corners

Those of you who are mostly interested in users surfing on Safari 3.1+ or Firefox 3.1+ are in for a few breaks. You can use the CSS 3 border-radius property to set up rounded corners on your div tags like the following .roundedCorner width 15 0px background-color D9D8C6 -moz-border-radius 10px -webkit-border-radius 105px border 1px solid 9E9C76 padding 10px Both Safari and Firefox seem to have their own property name. Firefox's property name starts with -moz while Safari's starts with -webkit...

Navigation

As we've discussed, one of the many cool things about WordPress is that it outputs all lists and links with < li> tags wrapping each item. This lets you specify if you want the list to be an ordered or unordered list and what ID or class you'd like to assign to it, even though by default, all lists are vertical with bullets. Using CSS, you have a wide range of options for styling your WordPress lists. You can turn them into horizontal menus and even multilevel drop-down menus (I'll show you...

Meta tag plugins

If you're a serious blogger and really need more robust options for your meta tags, you might want to try one of the following two WordPress plugins All in One SEO Pack by uberdose 2.0. (http wordpress.org extend plugins all-in-one-seo-pack ) This plugin not only utilizes the the_exerpt() tag as we just did, but also allows you to set your own specific keywords and several other great options for handling robust meta tag information for each post. Meta SEO Pack by Daniel Fruzynski (http...

Creating the graphical elements

Now, except for those multicolored borders I've put around each of my containing div tags (they will be removed shortly), I have an XHTML and CSS design that's not half bad. Let's polish it off Snap a screenshot (Ctrl+Prt Scr on a PC or use Grab, the free capture program on a Mac) of your layout and paste it into a blank Photoshop document, or open it up into Photoshop. This is where (after realizing that blocking out layout directly in CSS isn't so bad) I've had web designers argue with me...

Theme Design and Approach

Welcome to this chapter on theme design and approach. My hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation. The purpose of this chapter is to help you create a working XHTML and CSS-based mockup, with a view to having it end up being a WordPress theme while staying compliant with W3C standards and table-less CSS layout techniques. Theme design is essentially web design and, throughout the chapter, we'll...

Adding a SWF to the template using swfObject

If you'd like to use the swfobject.js file and method, you can read the full documentation here documentation. But essentially, we're going to use the dynamic publishing option to include our SWF file. 1. Using the SWF file included in this book's code packet, create a new directory in your theme called flash and place the SWF file in it. Then, create a div with alternative content and a script tag that includes the following JavaScript < script myContent, 300, 120, 9.0.0) < script> <...

Preface

This book will take you through the ins and outs of creating sophisticated, professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. This book reviews best practices in development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live. The last three chapters are...

Dont forget about your 404 page

Error 404 pages are where servers direct browsers when a URL seeks a missing page. While it's easy to think you won't really need a 404 page with a WordPress install, you'd be surprised. Even though all the links to the article or page you deleted are removed automatically from within your site, someone else might have created a link on their site to your post, which will no longer work. The 4 04.php template page is how you'll handle these requests. Features (2) Office Productivity (1) On The...

JQuerys Thick Box and Color Box plugins

ThickBox installs and works very similar to jQuery's lightBox. However, in addition to handling images similar to Lightbox JS, it can also handle inline content, iFrame content, and AJAX content be sure to check out the examples on the Thickbox page The downside is ThickBox requires that you add a special class thickbox to your lt a href tag markup. The good news is, because it's a class attribute, TinyMCE doesn't strip this out, but you'll need to have content editors that know how to add that...