WordPress Theme Design

These days every site must have a content management system (CMS), or else it will very soon be outdated. Try selling a site to a client and then telling them they can’t actually update any of the content or photos themselves, somehow I don’t think they will be very happy.

Now in searching for a CMS to use you will come across everything from free, outdated systems such as Joomla, to some very expensive (think $50,000) corporate solutions that offer less functionality. In addition to that entire range a lot of development companies have created their own proprietary CMS. Having taken over clients from many of these development companies I can say that they usually produce nightmarish code, and have no documentation.

In a look search for the perfect CMS we finally settled on WordPress, no it’s not perfect, but here are the reasons we love it:

1. Easy Template System. WordPress will integrate very quickly into an HTML and CSS template using some simple PHP tags. Once you get the hang of how it works, then you can convert a template over to a basic WordPress theme in minutes.
2. Clean Code. WordPress outputs clean, semantic code. There are no outdated, table-based layouts, or anything else that gets in the way of web standards. Also the text editor will only let the user style text in a semantic way (such as using H1s for headers) that follows the CSS for the site (meaning the designer can set the style, and the site owner has to stay consistent with it).
3. Robust Backend. Since the WordPress backend has been recently redesigned, it offers greater functionality. Some of the best web designers in the world worked on it, and it includes hours of usability studies. Know that your clients are using the best interface around.
4. Regular Updates (including security). WordPress is updated regularly, which means that as soon as a security flaw is discovered, an update is sent out for it. Also you can rest assured that your client won’t be left years down the road with a system that is out of date. It will move with the times, and everything will just keep getting better.
5. Excellent documentation. Some people say you should buy from them because they can offer something nobody else can. I say don’t, because if they aren’t around to fix it, then nobody else can and you will be stuck. With an open source system like WordPress you have excellent documentation and resources available including a huge support community. So if your web designer falls of the face of the earth it won’t be that hard to find someone else who can work with your system.

There are many more reasons, but those are the five that are most important to me and my clients. Do you have any more to add, or better yet, reasons you don’t like WordPress as a CMS?

Today we are going to answer a common question regarding WordPress navigation. How to create simple drop down menus that work across browsers. If you are at all familiar with the web standards approach, then you have probably heard of Suckerfish Drop Downs.

http://htmldog.com/articles/suckerfish/dropdowns/

Integrating this is mostly CSS, but here is the WordPress code to get us started:

[sourcecode language='php']

[/sourcecode]

That code gets our menu started in the standard WordPress way. We just added in the sort by menu order code so that you can control your page order. Also the depth of 3 is set because that is as far out as we are taking our CSS, so it wouldn’t make sense to let our HTML break it.

Now to get the basic CSS in place:

[sourcecode language='css']

#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
width: 10em;
}

#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}

#content {
clear: left;
color: #ccc;
}
[/sourcecode]

Now we have it working in all browsers except IE6 (which doesn’t properly support :hover). To support IE6 We need to add a few lines of JavaScript:

[sourcecode language='JavaScript']

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}


}
if (window.attachEvent) window.attachEvent("onload", sfHover);


[/sourcecode]

That’s it!

1. The Concept

Goal: To make a tabbed slider that displays WordPress posts from a specific category in an easy to use format. Making it simple to edit/delete posts, from the WordPress back-end, and still have a great, unique front-end result.

To start we are using the Coda-Slider from Niall Doherty.

http://www.ndoherty.com/demos/coda-slider/1.1.1/#1

Start by downloading and unzipping the files.

2. Making it Work With WordPress

We need to use the WordPress loop to make each page of the slider a tab. To do this we will start out with a post query for our category.

Create a new category to house our project (I called mine Portfolio), make sure to note the category ID as we will need it later. Based on the WordPress Template Hierarchy we know that any theme file named category-3.php (where 3 is your category ID) will be used to display posts from that category. So all code featured here will be inside that PHP file.

Place this in your header to link to the javascript files and to start the slider
[sourcecode language='html']

jQuery(window).bind(“load”, function() {

jQuery(“div#slider1″).codaSlider()

// jQuery(“div#slider2″).codaSlider()

// etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.

});

[/sourcecode]

To start with we want to analyze the code, and see where our loop should start. Remember that the loop is repeating code for each post, so we want it inside the containing DIVs. This slider code has three containing DIVs:

[sourcecode language='html']