Design, Development, and Consulting

Visibility Toggling with jQuery

Peter — Mon, 16 Aug 2010 22:10:18 +0000

User interface design often makes use of showing and hiding blocks of content. It focuses one’s attention to the right thing, and it’s fun to do with jQuery.

I’ll show you how to toggle the visibility on a group of selected elements. I’ll build up from a simple case to the more complicated ultimate goal.

First, whenever you’re working with jQuery and Javascript, you should probably get your references ready. For online references there’s the jQuery documentation (which is easier to search with Google than with the site search, I find) and the Mozilla Development Center Javascript reference among others. A very nice site to test, store, and share your jQuery snippets is jsFiddle.

Ok, let’s get started. First let’s toggle the visibility of an element with jQuery using .toggle(). Since we’re talking about user interfaces, we’ll probably trigger the toggle with an action, let’s say a .click():

```
$(document).ready(function(){
```

      // Toggle the visibility of all divs when one is clicked.

```
    $("input").click(function() {
```
```
        $("div").toggle();
```
```
    });
```
```
});
```

jsFiddle example

The code above will toggle the visibility of all the divs on a page if an input button is pressed. The way this works is that after the document is ready, an event handler is bound to all the elements. The handler waits for the user to click it. If clicked jQuery selects all the divs on the page and reverses their visibility. If they were invisible they become visible and vica versa.

Well, this was just to give you a tast of .toggle(), since the above example is pretty crude. Usually you want more control over which divs appear and disappear. In fact, an often trick part of visibility toggling in jQuery is to make sure each toggling button is linked uniquely to one block of content. You also want to ensure that when a block of content appears, all the other similar blocks of content disappears.

I’ll show you two methods of making sure that each time only one block of content appears, while all the other blocks of content disappears. The first method will only work if all the content blocks are siblings in the DOM. This will often be the case, since we’ll usually be dealing with semantically related chunks of content. The second way will be a little trickier but more flexible.

But before we start discussing siblings, let’s make sure we can toggle one specific div with one particular button. There’s many ways of doing this. I’ll show you how to use individual but related ids for the buttons and the content divs. Each button will have a name like, “block-x” where “x” is a number, and it’ll have a corresponding content block with the id “block-x-content”. Now if we have 3 content blocks, we could write one functions to control each block, for a total of 3 functions, but it’s more convenient and maintainable to generalize. We’re going to use input buttons with class “.toggler” to toggle the divs. You, of course, don’t have to use buttons, you can use other divs, or images, or whatever your little heart desires. So, so far we have:

```
$(document).ready(function(){
```

      // Toggle the visibility of all divs when one is clicked.

    $("input.toggler").click(function() {

        $( "#" + $(this).attr("id") + "-content" ).toggle();

```
    });
```
```
});
```

jsFiddle example

The most complex part is the line with the toggle. The previous line simply binds an click event handler to all input elements with a “toggler” class. The function that is triggered in case of a click is an anonymous function that toggles one div. To see witch div gets toggled we’ll look more closely at “$(“#” + $(this).attr(“id”) + “-content” )” . The part inside the parentheses is simply a jQuery selector string. The string starts with a literal “#”, so we know that an element with a certain ID is getting toggled. The “#” is followed by the “ID” attribute of the element that was clicked. So far we have something like $(“#block-x”). This by itself would make the buttons disappear. But we know that each button has a corresponding content block. This block is selected by concatenating “-content” to the previous to give us a toggling of $(“#block-x-content”). Where is the number in the ID attribute of the INPUT button we clicked. Notice how the visibility of each DIV is kept track of separately. .toggle() is doing all the hard work for us.

Well, we’re approaching what we want. The previous example is okay, in that it let’s us toggle things, but it doesn’t really feel like we’re concentrating the attention of the user to one pertinent block of information. To achieve that end, we must make all the other divs invisible when we make one div visible.

We only have to change one line to achieve this. We’ll go from:

$( "#" + $(this).attr("id") + "-content" ).toggle();

to:

$( "#" + $(this).attr("id") + "-content" ).toggle().siblings().hide();

Notice how I chained the methods .siblings() and .hide() onto the previous line. This means that after toggling our content block, we’ll select the DOM siblings of that block and make them invisible. This means you have to make sure you’ve thought through your HTML. The easy way to do this is to nest all the content divs into a parent div, or if it makes sense, maybe to have content LIs in a parent UL or OL.

One finally change is that you may not want the content to disappear if a button is pressed twice, so we’ll switch out .toggle() with .show() to give:

```
$(document).ready(function(){
```

      // Toggle the visibility of all divs when one is clicked.

    $("input.toggler").click(function() {

        $( "#" + $(this).attr("id") + "-content" ).show().siblings().hide();

```
    });
```
```
});
```

jsFiddle example

But what if our content DIVs aren’t siblings? They usually should be, just because of the way information is structured on an HTML page, but we really don’t want to count on that. We want the flexibility to toggle any set of elements we want.

To toggle any set of elements we want, all we have to do is create jQuery set of the elements and use .not() in combination with that. I’ll show you how.

First, let’s say that we have 3 content divs. Let’s select all of them with jQuery:

var theDivs = $("#block-1-content, #block-2-content, #block-3-content);

So, now theDivs is a jQuery selection of out content DIVs, let’s use that in combination with our click handler and .not() to toggle the appropriate content divs. Except, now I’m going to use an unordered list, so our content will be in LIs. If we’re dealing with unordered lists, we could easy have a situation where all the individual content LIs are not siblings of each other.

To show the corresponding content LI of a button, we’ll still use:

$( "#" + $(this).attr("id") + "-content" ).show();

But now we can’t simply make the siblings disappear. Instead we’ll make everything from our jQuery slection “theDivs” that isn’t the corresponding content LI vanish. Like this:

theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();

And that’s it! You can of course replace the .show() and .hide() methods with fancier animations like .slideDown() and .slideUp(), but overall we have a relatively simple to implement, generalizable way of toggling the visibility of a group of content divs. The full code will look something like this:

```
$(document).ready(function(){
```

      // Create a selection of the content divs of interest

    var theDivs = $("#block-1-content, #block-2-content, #block-3-content");

      // Toggle the visibility of all divs when one is clicked.

    $("input.toggler").click(function() {

        $( "#" + $(this).attr("id") + "-content" ).show();

        theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();

```
    });
```
```
});
```

jsFiddle example

Data Visualization

Peter — Fri, 30 Jul 2010 01:37:18 +0000

Sleeping time is a site with an interesting idea. It takes the time of a Twitter user’s Tweets, and it makes a guess at their sleep schedule. The idea is that if you’re sleeping, you won’t Tweet (obviously this only applies to amateur Tweeters). Once you enter a person’s nickname, the site draws out a visualization of the sleep schedule. For example here is my sleep schedule.

Well, the first impression one gets is that I sleep as much as a brown bat (19.9 hours per day apparently). The red area is much larger than half the clock, so it looks like I sleep the whole day away.

Of course the clock only has 12 hours on it, so while it looks like I sleep 2/3 of the day, I actually only sleep half of that, or 1/3 of the day, according to Sleeping Time.

So, if the visualization doesn’t give you a quick visual idea of what portion of a day you spend sleeping, what is it good for? It tells you what portion of half a day you spend sleeping, but that’s not really a metric that’s ingrained in any of our brains.

This is the problem with data visualization. A graph often looks clear cut and simple, but it is often simply not showing you an answer to the question your are asking.

If you found this post even mildly interesting, then you should know that a great book about graphs, charts, and other ways of showing data is The Visual Display of Quantitative Information.

A few code snippets.

Peter — Sun, 25 Jul 2010 02:40:09 +0000

I often write very short, very simply little code snippets just to test specific things in HTML, CSS, PHP, or Javascript (and jQuery). These are short little blurbs, that are useful for looking at how certain specific things work. They are mostly notes to self.

Here are links to a few of them:

Short Code Snippets:
CSS	Change image on hover.
CSS	Creating large clickable areas.
CSS	Images sprites example – External CSS is here – Sprite is here
DOM	Checking how many elements in an ID.
Javascript	Basketball animation
jQuery	Return ID of clicked LI
jQuery	Sliding, fading, and disappearing
jQuery	Not this array element
jQuery	Using toggle()
PHP Algorithm	A linear linked list
PHP Recursion	Turning digits into words
PHP JSON CSS	Retrieving and displaying information from Delicious
Simple Apps:
jQuery PHP	Guessing game using Stackapps and Stackoverflow data
jQuery PHP	Dynamic Syntax Highlighting

Pimp My Web Page: Simple to Complex

Peter — Tue, 22 Jun 2010 06:28:51 +0000

Let’s start with the simplest web page:

```
Hello World!
```

Well, that’s nice, but there’s certain information missing. We should add a doctype to let the browser know what flavor of HTML, XHTML, etc we’re using. This declares the document type definition (DTD) in use for the document.

We should also add things like the HTML elements, a HEAD element for specifying more information about the page, a BODY for the contents.

We should also let the browser know our character encoding with a meta tag.

So now we have:

```
    
```
```
        
```
```
        Greetings World
```
```
    
```
```
    
```
```
        Hello World!
```
```
    
```

What about the look of the page? Let’s add some CSS:

```
    
```
```
        
```
```
        Greetings World
```

```
    
```
```
    
```
```
        Hello World!
```
```
    
```

Of course we should throw that into an external style sheet:

```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
    
```

and:

```
/* styles.css */
```
```
body {
```
```
    background-color:#BDC4D4;
```
```
}
```

Let’s add two images:

```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```

Hmmm… but we’re making two requests to the server for these two images. We can pass the same amount of information to the user with only one request to the server using sprites.

Sprites are often used in divs or other elements as background images. We’ll use sprites as background images, but they’ll be the background to an IMG element. “null.png” is simply a transparent pixel:

The HTML:

```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

The CSS:

```
/* styles.css */
```
```
body {
```
```
    background-color:#BDC4D4;
```
```
}
```
```
.sprite {
```
```
    width:80px;
```
```
    height:80px;
```
```
    background:url('images/sprite.png')
```
```
}
```
```
.image2 {
```
```
    background-position:-80px;
```
```
}
```

Well, ok, but our sight isn’t going to change much over time, so once a visitor see our site, they should cache it in their browser for future use. This’ll make the page load faster for everyone, since it reduces server load, and it speeds up the loading of pages by repeat visitors.

We can accomplich this using HTTP headers. This is not the HTML HEADER tag. HTTP headers are lines that the server sends to the browser before the contents of the page… this means we can’t put the HTTP headers into the HTML file. We’ll have to use something server side for this. PHP has a header() function, which makes things really easy:

```
// Expires one year from now
```

$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);

```
// Format date
```

$date =  date('D, d M Y H:i:s', $expires);

```
// Send HTTP header
```
```
header("Expires: $date GMT");
```
```
?>
```
```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

We could have done the above with Apache or whatever server itself we’re using. PHP is nice for illustration, since we can keep all the code in the HTML file. Since the HTTP header comes before the HTML content, you cannot put any HTML before the PHP header() function.

Ok, now we’re getting somewhere, but we’ve still got all this text and stuff on our web page…. ok we don’t, but we could have all this stuff, if we had a big web page, or it may look like a lot of stuff to someone with a limping dial up in East Timor. Well, why don’t we compress all our stuff. Let’s GZIP it.

```
// Expires one year from now
```

$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);

```
// Format date
```

$date =  date('D, d M Y H:i:s', $expires);

```
// Send HTTP header
```
```
header("Expires: $date GMT");
```

if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))

```
    ob_start("ob_gzhandler");
```
```
else
```
```
    ob_start();
```
```
?>
```
```
    
```
```
        
```
```
        Greetings World
```
```
        
```
```
    
```
```
    
```
```
        Hello World!
```
```
        
```
```
            An Image ==>
```
```
            
```
```
        
```
```
        
```
```
            Another Image ==>
```
```
            
```
```
        
```
```
    
```

You can confirm that you’re properly GZIPPED.

Ok. With PHP we can also flush the buffer early:

```
    
```
```
    
```
```
    
```

It’s great that our CSS is in its own file, but it still has a bunch of whitespace. Why don’t we minify it.

I used the YUI compressor with this command:

java -jar yuicompressor-2.4.2.jar styles.css -o styles.min.css --type css

To get this CSS file:

body{background-color:#BDC4D4;}.sprite{width:80px;height:80px;background:url('images/sprite.png');}.image2{background-position:-80px;}

We can do the same minification with our Javascript if we have any, and remember to include your Javascript as far to the bottom of the page as you can.

Take a look at the final page.

JQuery for a little night time reading

Peter — Tue, 15 Jun 2010 01:16:26 +0000

If you use Javascript, JQuery is a great framework to speed up your coding. It’s essentially a collection of really convenient shortcuts. It does more, since JQuery also handles a lot of browser compatibility issues. So, you don’t have to go through your JQuery code to update it for new browsers, all you have to do is download the new version of JQuery, and your old commands will learn new tricks.

Ah, speaking of downloading JQuery, you just might want to understand how JQuery works if you use it. The first time I tried to do this, I simply clicked on my JQuery src file link:

… and this is what I saw:

Fun reading, huh? Well, when your browser loads Javascript, it has to load each charachter, so the less whitespace there is, and the shorter the variable names are, the faster it will load.

This means you should be using this, the minified, version of JQuery on your site, but if you want some ~~pleasant and relaxing~~ reading… you should look at the uncompressed version. JQuery shows you both versions very clearly on their download page, but for some reason, it took me a while to realize that there is an uncompressed version. The uncompressed version of the latest version is here. The uncompressed version is actually very readable:

The joys of toxic asset ownership

Peter — Fri, 11 Jun 2010 21:36:48 +0000

I tend to listen to a lot of podcasts while doing housework. Listening to things like Planet Money makes washing the dishes fun… well, maybe not, but it makes it feel like I’m learning something new while doing the same old same old.

Not too long ago, the members of Planet Money pitched in, pooled their money, and bought their own $1,000′s worth of real estate based toxic assets. You can hear about how they picked their asset, bought it, and how it’s doing. You can also hear about the types of things that affect whether the Planet Money team will get a good return on their investment…. It turns out, that having people not pay their monthly mortgage is ok, since the person who gave out the mortgage is then responsible for paying the money into the toxic asset coffers… whoever, if the home owners refinance, then the amount of money they have to pay decreases, and so the pay out to the toxic asset decreases. There’s also all sorts of other stories about the history of their specific toxic asset including an eye opening animated graphic showing the rate that the loans in the asset are going into delinquency. (I do have to say that one of the downfalls of the graphic is that the number of loans in each state is not immediately apparent, even though these numbers vary from one to several thousand… so make sure you hover over the states you think are interesting to check the sample size).

It’s a great series of stories, and it lets you understand about toxic assets, and even makes you feel bad for Toxy…. Yes, Toxy is the name of the toxic asset. But seriously, this is some reporting that takes a subject that is often presented as dead boring and overly complicated, and Planet Money makes the subject personal, interesting, and entertaining. Just wanted to share.

Three Steps for Using JQuery in Your WordPress Theme

Peter — Mon, 31 May 2010 05:58:39 +0000

This is a quick post on using Javascript and the JQuery framework in particular within your WordPress theme. It’s quick and pretty painless. This is just for regular themes, not admin themes, plugins, or posts.

Step 1:

Load JQuery and your custom JS onto your page with wp_enqueue_script(). It’s better to use wp_enqueue_script than hard coding it into your page. This is because WordPress comes with JQuery, so you won’t have to worry about updating JQuery as new versions come out. WordPress will do the work for you. Make sure wp_enqueue script is before wp_head(), or it won’t work.

Here’s a snippet from my template file (let’s say index.php). I’ve created my custom JQuery functions in my themes “scripts” directory with the file name “custom-js.js”. You also have to make up a handle or name for your collection of custom JQuery functions. I called mine custom:

```
    wp_enqueue_script('jquery');
```

    wp_enqueue_script('custom', get_bloginfo('stylesheet_directory') . '/scripts/custom-js.js');

```
    wp_head(); // WP API Hook
```
```
?>
```

get_bloginfo is your friend. If you hard code your themes directory into your code anywhere, you won’t be able to share it with others, and you’ll break everything if you ever move hosts or just directories.

Here’s another example. Let’s say you want to use Google Maps on your page. Here is the line of WP code that makes that possible:

    wp_enqueue_script('googleMaps', 'http://maps.google.com/maps/api/js?sensor=false');

```
?>
```

Finally, if you just want plain JS with no JQuery, you can simply leave out the line that calls JQuery but leave in the line that enqueues your custom functions. WordPress comes with a lot of other JS goodies besides JQuery. Scroll down to the bottom of this page to look at all the other stuff included with WordPress.

Step 2:
Write your JQuery. The only thing you have to look out for is that wp_enqueue_script() calls JQuery in no conflict mode. This means that $ will not work as a shortcut for JQuery functions. There are two simple solutions.

Define another shortcut for JQuery functions.
Use a wrapper around your JQuery code.

Here is how to define a new shortcut for JQuery functions, $j in this case. The script shown is a very effective test to see if you’ve got JQuery working in your theme. It’s a little blunt, but it’s effects are hard to miss.

```
var $j = jQuery.noConflict();
```
```
$j(document).ready(function(){
```

 $j("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");

```
});
```

Here is how to use a wrapper in order to use the default JQuery shortcut:

```
jQuery(document).ready(function($) {
```

    $("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");

```
});
```

Make sure you pay attention to all the curly brackets and parentheses. If the long and multiple parenthetical expressions annoy you, go check out Lisp.

Anyway, the second method is nice, since it let’s you use previously written code easily.

Step 3:

Enjoy!

Big Button CSS Menu Links

Peter — Sun, 30 May 2010 01:08:54 +0000

This post will show you how to make this:

Notice that the entire highlighted area is clickable, not just the lettering.

I’ll describe a simple way to make pure CSS menu links that highlight nicely when hovered over. Now, you can obviously get a lot fancier with Javascript, but a good website design degrades nicely. This means that you should stack as much functionality into the (X)HTML and CSS as you can, and then add extras on with Javascript. This will enable you to read the page nicely through the widest range of media. This is important these days when you don’t know whether your visitors are using a cell phone, iPAD, curl on a UNIX shell, text reader for the vision impaired, or whatever. There are obviously some things Javascript is great for, but there’s no need to kill a fly with an elephant gun. Don’t use it when you don’t have to.

The W3C page has a nice example of elegant page degradation when Javascript is turned off. The menu links on the left hand side of the page, for example the ones under standards, flash dark gray before settling to light gray when hovered over. The flash is Javascript. When you turn Javascript off, notice that the flash is gone, but the links are still highlighted in the same way. You can click anywhere in the Menu box to follow the link, not just over the lettering, and the entire menu box is highlighted in light gray.

Ok let’s build a similar but simpler vertical menu. Horizontal menus are easier to highlight, since the horizontal width of each box can vary without having the menu look unnatural.

Our menu will have three items: Home, Gnome, and Rome. It often makes sense to put your menu items in an unordered list, so we’ll do that, and we’ll set a fixed with for the items. We’ll use a 440 px body width and 220px menu width, just so you can easily see the results as displayed in this blog.

Ok, let’s set up the menu with simple highlighting using “a:hover”.

You can take a look at the menu above on its own page. Here is what that code looks like (remember to use style sheets; I used a style definition in head, so that all the code could be read easily in one go, but unless you like to individually and tediously change CSS rules one at a time for hundreds or thousands of pages, you’d better use external style sheets):

Bad Hover Menu

```
    
```

If you hover over a link, the background changes in color. Yeah, but it’s not very elegant, since the area that’s highlighted has a different shape for each link. Additionally, you have to be pretty precise with you mouse. The list takes up half the colored area, but you have to hover directly over letters in order to follow a link. Let’s deal with the first problem first.

It turns out that :hover is a valid pseudo class for a list item not just a. So if we change the a:hover code to li:hove like this:

```
div#da-body2 ul#da-menu2 li:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```

We’ll see this:

Now we’re getting close. The problem is that you cannot click the entire highlighted area to follow the link. This is because we’re highlighting the li element and not the a element. Ok, well how about:

```
/* THIS WILL NOT WORK!!! */
```
```
div#da-body2 ul#da-menu2 a {
```
```
    width:100%
```
```
}
```
```
div#da-body2 ul#da-menu2 a:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```
```
/* ^^ INCORRECT */
```

Nope, that’ll basically just look like the first example. The problem is that the “a” element cannot have a width attribute. It’s not a block level element. You can’t set it’s width normally.

Don’t you wish we could simply display the anchor element like a block item, in this case like a list item, and then we could set its width. Well, CSS knows about inheritance, and there is a display attribute. We just have to force the “a” or anchor tag to act different than usual using, “display:inherit;”. This means that the “a” tag will inherit whatever display mode its parent element has. In this case it will will inherit the “block” display from the li element. So, our solution is:

```
div#da-body ul#da-menu a {
```
```
    display:inherit;
```
```
    width:100%
```
```
}
```
```
div#da-body ul#da-menu a:hover {
```
```
    background-color:#BFB6AF;
```
```
}
```

This will produce:

Incidentally, “display:block” will work too. To wrap up, here is the full code:

Good Hover Menu:

```
    
```

Incidentally, you can see that I’ve got a few margin:0s and padding:0s thrown in to make things look neater. Instead of dealing with zeroing the margins, paddings, etc. for each item one by one, you can simply use a CSS reset. You can put this at the top of your style sheet, or add it in as a separate style sheet. I didn’t use a CSS reset for this example, since I wanted to keep the code as self contained as possible.

Ok, that’s all the hovering over CSS menus for today.

Creating your first WordPress theme – Part 1

Peter — Wed, 26 May 2010 19:26:46 +0000

Content Management Systems and WordPress is so powerful because it allows site owners to update their sites efficiently and to customize their sites and their CMS experience. WordPress themes control both the look of a site and the options a site owner has in terms of customizing this look.

That sounds pretty good and rather vague. It’s hard to describe what you can do with WordPress themes, since they can do a lot. It’s like trying to describe all the things you can do with a nail. It all depends on how you use it.

In light of this, it seems like the best thing to do would be to go through an example of building a WordPress theme. I’ll go through a theme as I develop it, and I’ll try to build it starting at the simplest level and working to progressively more complicated iterations.

Before we begin, there’s a few things that I’m going to assume:

You’ve got WordPress installed on your site. It’s usually pretty easy to install WordPress.
You can access the files in your WordPress install.
You can access your WordPress admin panel.

You can usually access your files through FTP, SSH, or even your web host’s control panel. On Windows I usually use PuTTY for SSH. I’ve heard good things about FileZilla for FTP, but I’ve personally never tried it. You can edit your files with anything from Notepad (ugh) to Notepad++ (yay!) to Dreamweaver (for all the flack Dreamweaver gets, it sure can speed up a lot of things), Emacs (hang on, let me grow a beard and put on my glasses)…

Actually, in spite of the beard and glasses joke, if your host offers a Unix or Linux shell, then working on your pages with Emacs can be a great pleasure. I mean you have access to not just your files, but also to your files through one of the most powerful “word processors” in the world. No more worrying about whether your files are on your desktop, laptop, smartphone, or smartbrain. Anyway, Emacs is fun and free (free as in hair, and yanking it out in frustration while you pound your head against the keyboard trying to understand what a Lambda expression is). No, but seriously, using Emacs through SSH courtesy of your web host is fantastic stuff, and lets them work a little for the money you give them. I will shamelessly mention that I use Dreamhost, and so can you by clicking on that link that will earn me money when you sign up.

Ok, you’ve got WordPress installed, and you can access the files on your server. Let’s start building a theme.

The way WordPress works is that it runs a bunch of PHP create the HTML for your web pages. These PHP pages will often look into an associated MySQL database for info. The PHP will also look (ok, I’m definitely anthropomorphizing) in specific directories for certain things.

One of these special directories contain all the themes that you have installed. Each theme is in its own folder, and you can pick the theme to use through the WordPress admin panel.

You can find the theme choices on the left side of the adminn panel under “Appearance”:

The directory that the themes you can pick from are in is:

/wp-content/themes/

Each directory in themes is a theme you can use. Understanding how WordPress knows that the contents of these directories are themes will help us create our first theme.

WordPress looks at the main stylesheet in each directory, and from this style sheet it reads the information about the theme. You have to know that convention that for WordPress the main style sheet is a file called, “style.css”. So the simplest theme is just a style sheet in a directory. Let’s see how to make one of these themes…

Let’s look at this in practice. Here’s is what the themes page looks like when /wp-content/themes only has the Classic theme in it. In other words /wp-content/themes only has a directory named “classic” in it, and the index.php file:

As you can see, I’m currently redoing Evergreen Ice Sports web page. Soon it’ll look nicer and be easier to maintain for the site owners. Anyway, as you can see currently Classic is the only available theme.

If we create a directory with only a style sheet called “style.css” in it, we can use that style sheet to:

Tell WordPress that the directory the style sheet is in contains a WordPress theme.
Tell WordPress that theme is just like another theme with a few modifications (in other words the theme is a child theme).

Ok, let’s step through this and then discuss it. First create a directory called, “mytheme” in wp-content/themes . Now reload the Manage Themes page in the admin panel to see what happened:

This shows you that I was telling the truth about WP looking in the wp-content/themes directory for the available themes. It looked in your empty directory called mythemes, and since it the information about each theme is supposed to be in the main style sheet, and there is no style sheet in mythemes, we have a broken theme.

Let’s add a stylesheet over at wp-content/themes/mytheme/style.css. This style sheet will contain all the necessary information to create a WordPress theme. Here are all of the contents:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```

Yup, that’s all it takes, and yeah replace my info with your info, but make sure that line 7 stays untouched. The file contains only CSS comments. WordPress, reads these comments, and when it sees line 7, that says “Template: default”, it understands that mytheme is a child theme of the theme that is in the directory called, “classic”. Let’s reload the Themes admin panel and activate this new theme.

You can see how WordPress used the information in the CSS file to fill in the information about our new theme. You’ll notice that there is no screen shot for My Theme. We’ll do this soon. Anyway, click on “activate” to…. uh….. activate the theme. Since MyTheme is a child of Classic, this means that MyTheme inherits all the characteristics of Classic. We can add to or modify these characteristics, but we haven’t done that yet, so right now our theme should look identical to Classic. Visit your site’s homepage to check on this……

Whoops!

Our page looks like it has no styles! I guess I lied. MyTheme inherits everything from Classic except the style sheet. That’s a little odd right? Especially if you’re used to dealing with inheritance in things like children and object oriented programming, but no matter, it’s easier to fix than your…. well, than, many things. So, let’s grab the style sheet from the classic theme using the line:

```
@import url("../classic/style.css");
```

So now our entire wp-content/themes/mytheme/style.css file looks like:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```
```
@import url("../classic/style.css");
```

Ok, now go and check on how your home page looks…. Just like classic, huh? Well, that’s not very interesting, let’s make things a very tiny bit more interesting by adding one more line to prove that we have a theme that uses default but has some of it’s own rules:

```
/*
```
```
Theme Name:     My Theme
```

Theme URI:      http: //netlumination.com/

Description:    Child theme spawned by the Classic theme

```
Author:         Peter Ajtai
```

Author URI:     http: //peter-ajtai.com/

```
Template:       classic
```
```
Version:        1.0
```
```
*/
```
```
@import url("../classic/style.css");
```
```
body {
```
```
	background-color:blue;
```
```
}
```

Ok, that was 3 lines, but I could have made it one line. Does it work? Yup. Does it work with all themes…… uh, no. For example, if you try the same thing with the Default theme, you’ll notice that some of the background images that are used in the Default theme will not be used in your child theme. This is because the CSS for these background images are created by PHP that looks for them in the wrong directory. It’s easy to fix, but it illustrates why I’m using so many words to explain this one simple thing of how to make a child theme. If you know how all of this works, you can probably track down these problems. If you don’t know how it works, you’re lost. But these details aren’t important right now, since we want to create our own theme, not look for weird little leaks in the inheritance abstraction for WordPress themes.

You’ve just created your own WP theme! Don’t worry it gets better. We’ll do stuff that’s more useful. We’ll push pixels around around like they’re not our boss. We’ll meld code to our mind’s desire, but you’ll have to wait for the next part of this series for that… until then we’ll….. well, we’ll see you later.

Why use a Content Management System

Peter — Wed, 26 May 2010 05:41:34 +0000

You can feel free to skip this entire article if you have a website that you are happy with… hold on, there’s something else… and you can easily update it. Notice that I said you, not your latte drinking, jargon spouting, charge by the hour web air quotes consultant.

One of the main reasons to use a content management system is to enable you to update the content, and sometimes the look of your site. A CMS (I’ll explain what it is soon) should enable you to do this in a painless way. In other words, without cracking open any sort of O’Reilly book with “the Definitive Guide” somewhere in the title.

This brings me back to what exactly is a Content Management System. Sorry, I didn’t link you to this Wikipedia page because it’s not all that helpful. In broad terms a CMS lets you have control of your website without having to understand all the code that makes it work. Of course there are many different CMSes, and some are better at this than others. But basically a CMS is like the controls on your car. The controls on your car let you drive a car without having to understand how an engine works. Now, some cars are better at doing this than others. If you’ve got a Fiat with 300,000 miles on it, then you don’t get into the car without your tool box right? But if you’ve got a new Honda you may not even know where the lever to open the hood is. Basically, sometimes you’re going to have to deal with the innards of your car or your web site, but hopefully not often.

Sounds good right? You don’t want to drive a car and get oil on your hands, and you don’t want to make a website and get ones and zeros on your hands…. or those < and > symbols or whatever. Now you just have to pick a CMS. I’ll jump the gun here and tell you that WordPress is often a good choice.

But you’ve got plenty of other choices, some free (as in beard (or leg hair), beer, or fall depending on what you pick): Concrete5, Drupal, Joomla, WordPress… and some for payment (as in investment or hole in your computer screen you stuff money into that will be lost forever depending on what you pick): City Desk, Expression Engine, Sharepoint, Sitefinity…

I like WordPress for small business sites. It’s pretty easy to use, very flexible, open source, and built from PHP and MySQL which are also open source. Like I said, there’s plenty of other choices, many of them excellent.

Ok, so where was I? Something about Fiats and oil on your hands. Time for Car Talk? Wait, I was talking about Content Management Systems and why they help you not to get your hands dirty.

So, a CMS puts the power back into the user’s hands. Admittedly even a CMS has a learning curve, and sometimes you will run into things that you need to dive into the

Here’s a concrete example. It’s a very simple one. Let’s say you have a web page, and it’s about food. You care about food. You don’t care too much about clunky computer code. You’ve got all sorts of stuff on your webpage including some of the dishes you create for your clients. You’ve just made a new dish you’re very proud of, and you want to put it on your website. Now, at first you might say that it should be easy. You can figure out how to modify the page on the server. Well maybe, but since you have a nice site, it’s not just one page. Each recipe is filed under one or more food categories. Each recipe has a pretty background. Some of the recipes may be highlighted in special sections. Basically, it’ll take a long time for you to figure out how to add just one recipe to your site. You’ll have to update a lot of things, and you’ll probably break your site a few times before you succeed. Granted, you’ll learn a lot about HTML, Javascript, PHP, MySQL, Apache, and who know what else, but you don’t care about that, you care about food.

A CMS handles these type of things for you. How? Well, by creating a bunch of control panels that let you add to, subtract from, and modify your site.

Don’t worry even if you have a CMS, you’ll still be able to throw plenty of money at your latte drinking, jargon spouting, charge by the hour web air quotes consultant… but you’ll be able to do it while having control over your own site. In fact, the hope is that the more work you get done on tweaking your CMS to fit your needs, the more control you’ll have, so all that money becomes a good investment, not just lattes down the drain.

Design, Development, and Consulting

Visibility Toggling with jQuery

Data Visualization

A few code snippets.

Pimp My Web Page: Simple to Complex

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

JQuery for a little night time reading

The joys of toxic asset ownership

Three Steps for Using JQuery in Your WordPress Theme

Big Button CSS Menu Links

Creating your first WordPress theme – Part 1

Why use a Content Management System