A Guide to CSS and WordPress: Part 1

13 Comments

In this tutorial we’ll review the basics of CSS and WordPress, such as image alignment and useful classes, and then next week in part two, I’ll show you some examples of seemingly complex things you can accomplish with just a bit of CSS.

To allow for flexibility, WordPress adds a number of CSS classes on elements across the site to make it easier to customize. Probably the most important set of these classes is for post images. A good WordPress theme has classes for left, center, and right alignment as well as styling for captions. It’s really easy to add these styles to your theme.

Standard Alignment

.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { display:block; margin:0px auto; }

That’s it! Now why do we need these classes, you ask? This trio of classes is WordPress’s default way of aligning images in a post. When a user uploads a new image through the post editor, they can choose to align it to the left, center, right, or just have no alignment (uses the class .alignnone). In order to transfer that display option to the theme, you need to have those classes ready to go on the front-end of the site.

The left, center, and right alignment classes aren’t just used on images, though. You can use them throughout your site to position other elements like divs, links, etc.

Image Captions

If the user decides to add a caption to the image, a div with a class of .wp-caption is wrapped around the image and its caption text, which is stored in a standard paragraph tag (

). Below is an example of how to style the caption box, which will have a light grey background and border and a small amount of padding.

.wp-caption { border:1px solid #ccc; background:#eee; padding:5px; }

If you want to style the caption text, that paragraph tag has a class of .wp-caption-text:

.wp-caption .wp-caption-text { text-align:center; margin-top:5px; }

As for post images, that’s about it! Next, let’s take a look at some of the other standard classes you’ll find throughout a WordPress site.

Menus

In order to create a good navigation menu, it’s important to know your menu classes. Fortunately, WordPress provides plenty of classes within its dynamic menus to allow for an adequate amount of customization.

page_classes_diagram

As you can see in the diagram above, every list item that WordPress generates has at least one class. This menu was generated with the standard wp_list_pages() function. If you aren’t familiar with the code structure of the menu above, the entire thing is an unordered list, each upper level link and subpage link is a <li> list item, and the subpage menus are contained in unordered lists as well.It’s actually quite easy to understand. The active page will always have the .current_page_item class. If you’re currently on a subpage, the parent menu item gets the .current_page_parent class. Every other list item just has the standard .page_item class. In the second part of this tutorial, which we’ll publish next week, I’ll demonstrate a CSS technique that will help you create a menu similar to the one above using those classes.

Others

Images and menus are probably the two sets of classes you’ll use the most, but there are a few others that you should take note of as well.

Categories – the setup of category lists is quite similar to pages. Each category list item has a class of .cat-item, the active category has .current-cat-item, and when viewing a subcategory, the parent has a class of .current-cat-parent. Notice the hyphens instead of the underscores. I can’t tell you why it’s like that but maybe we’ll see a uniformity in classes in the near future.

Widgets – the classes involved with a widget can be customized but the typical setup is that the widget is enclosed in <div class="widget"> .

Conclusion

So those are the basics of WordPress CSS classes. Next Thursday, we’ll take a look at a few more sets of classes and then learn a few techniques that rely heavily on CSS to create the desired end result. If you’re just getting started with WordPress development, hopefully you’ve learned some helpful information from this article. See you next week!