Join Chris Coyier for an in-depth discussion in this video Building the sidebar, part of WordPress 3: Creating and Editing Custom Themes (2010).
One of the major design elements of our site is the sidebar. For the most part it's consistent across all pages of the site. So what we have here is just like we have been working before. On the left is a TextMate project with our static HTML and CSS conversion and on the right is our WordPress theme. So at the end of the last movie, we opened up the browser and saw some weird layout problems. That was because we hadn't yet dealt with the sidebar, which is a major structural element of the site. So we need to move the sidebar from the left as we've built it to the right.
So on the right we have opened the sidebar.php file, which is the modular bit of the WordPress theme that deals with the sidebar. So I want to go ahead and copy the aside element from the left and paste it over to the right. But I don't want to just select all and copy and just get rid of the whole thing. I want to make sure that we salvage anything from the existing sidebar that we might want to save. So let's take a look at what we might want to save over here. A lot of this just isn't a part of our design.
it wasn't a part of our Photoshop design. It's not a part of what we converted. It's not stuff that we want anymore like these archives, and the categories, and the bookmarks, and this meta information, all the stuff can go. There are a few things that we want to save though, and that's this smart little get_search_form function. That's another one of these WordPress modules in a way. It just says go, get the searchform. php file and put that code here just like other theme files, say get sidebar, which gets all of this code and puts it in there.
So get_search_form in a way is a module within a module. If you want to use the search form on multiple different theme files, you just use this there, so you don't have to repeat yourself. This bit at the top here says if (function_exists('dynamic_sidebar') && dynamic_sidebar('sidebar Widgets')). So that's a bit of a mouthful there but that's a way that you can widgetize a WordPress theme. You are kind of declaring a WordPress widgetized area. The sidebar is a very common place for that. So we want our theme to be smart and widgetized, so we are going to save that bit.
So we are going to save this and this. Notice this nice little comment here too that says, "All this stuff in here only shows up if you DON'T have any widgets active in this zone." So it's a warning that anything come in between this and where this closes out is subject to only if there is no widgets active. As soon as you activate a widget, all this stuff kind of gets wiped out and gets replaced with widgets. So we want to be aware of that. So since we're saving basically these two bits, I am going to go ahead and cut them and paste them above here, and then just get rid of all the rest of this stuff, because all that stuff is going to go.
We are going to copy our static stuff from the left and paste it over here. Then we are going to incorporate these things that we saved. So get_search_form, I am going to cut, and replace the form that's already there because all this code just gets replaced with this nice little function, this little modular thing. Then the widgets. we are going to put at the bottom of our sidebar. So that's where we want widgets to go in case someone were to activate a widget. But we want all the stuff to be here no matter what.
So at the very bottom of our sidebar, we're going to put this thing here, and really nothing inside of it. We are just going to make sure to close out our PHP function, so we don't get any nasty PHP errors, but otherwise this is where widgets will go. So let me hit Save there and let's jump back out to the web, so you can see our progress on this theme. So structurally looking a lot better. The sidebar is in place, you can see our search form, the navigation, all the stuff is static. So as we move forward here we're going to be taking a look at different parts of the sidebar, making them smart just like we made our sidebar smart.
- Building a design in Photoshop
- Converting Photoshop design to HTML and CSS
- Setting up MAMP on Mac and WAMP on Windows
- Moving HTML and CSS into a WordPress theme
- Building navigation
- Using custom fields
- Creating a commenting system
Skill Level Intermediate
Q: What prerequisite skill do I need to be successful in this course?
Q: The index.php file that the author is working with in Chapter 3 doesn't match mine after the "Building a sidebar" movie. It appears to change between the "Building a sidebar" and "Building the navigation" movies. What code am I missing?
A: The author makes some changes off screen between several movies in this title, simply because there is so much material to cover. These changes are provided in the exercise files.
However, if you are following along without the exercise files, you catch up to him by adding the following code to your index.php file, directly after the <?php get_header(); ?> line:
Near the end of the file, just before <?php get_sidebar(); ?>, add a closing div tag, </div>, to complete the div wrapper.
The resulting code will look like so. You may also copy and paste this into a new file and save it as index.php.
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>
<?php the_content(); ?>
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php endwhile; ?>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<?php else : ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Q: How do I load my custom theme once I have finished?
A: Copy the Custom theme folder to your new WordPress installation and put it in wp-content > themes. Then you can activate the new theme and work with it from there.