Building Blocks

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access

Think of a layout as building blocks or puzzle pieces that you want to fit together in certain ways. PHP allows you to split up your files in this way and include them into the original. Furthermore, WordPress encourages this kind of split in its support for theming. The themes supplied with WordPress are structured this way.

So, first you'll break down the theme files into multiple pieces. You will take each of the elements of the header, the main section, the individual sidebars, and so on, and split them into separate files. You can then choose to include those files as appropriate based on the type of page to display.

Rather than take you through splitting each file piece by piece, I will show you one such piece and leave the rest as an exercise. You will be able to download the completed version from the Source Code area of the Apress web site (

The example I will take you through is splitting the rightmost column from the main file into its own file. Listing 17-1 shows the code to be moved. All of this code will go into a new file called sidebar-b.php. The name is not related to its position on the page, because it may not always be on the right.

Listing 17-1. The Right Sidebar Code to Go in sidebar-b.php

<?php get_calendar(); ?> <?php if (function_exists('_rssLinkList')) : ?> <h2><?php _e(' Links'); ?></h2> <ul class="rightsidelists"> <?php _rssLinkList(array("rss_feed_url"=> "", "show_description"=>FALSE, "num_items"=>10)); ?> </ul> <?php endif; ?>

<?php if (function_exists('c2c_get_recent_comments')) : ?> <h2><?php _e('Recent Comments'); ?></h2> <ul class="rightsidelists"> <?php c2c_get_recent_comments(5, "<li>%comment_author% on <a href=\"%comment_url%\" " ."title=\"%comment_excerpt%\" >%post_title%</a></li>"); ?> </ul> <?php endif; ?> <h2><?php _e('Contribute'); ?></h2> <ul class="rightsidelists"> <?php wp_register(); ?>

<li><?php wp_loginout(); ?></li> </ul>

Once the code is in its own file, you need to insert the instruction to include that file in the main index.php file exactly where the code was, as shown in Listing 17-2.

Listing 17-2. Include the New File in index.php

</div><!-- /side --> <?php include_once('sidebar-b.php'); ?>

Also adjust the CSS style names to match in both sidebar-b.php and style.css, as shown in Listings 17-3 and 17-4.

Listing 17-3. Renamed Styles in style.css

float: left; text-align: left; padding-left: 15px; width: 190px;

margin-top: 1.2em;

ul.sidebar-b-sidelists {

list-style-type: none; margin:0;

padding-left: 10px;

ul.sidebar-b-sidelists li {

margin-top: 4px; margin-left: 1em; text-indent: -1em;

Listing 17-4. New CSS Names in sidebar-b.php

<?php get_calendar(); ?> <?php if (function_exists('_rssLinkList')) : ?> <h2><?php _e(' Links'); ?></h2> <ul class="sidebar-b-sidelists"> <?php _rssLinkList(array("rss_feedjjrl"=>

<li><?php wp_loginout(); ?></li> </ul>

A quick check on the main blog page shows that everything still works. If you download the completed split-out version from the Apress web site (as file and unzip it into your wp-content/themes directory, you will see that I have split it into quite a few files and renamed the theme to c3rohorses. The file list now looks like this:

• main-content.php

If you examine index.php (you can use the WordPress Theme Editor, as described in Chapter 16), you will see that it has become very simple and modular. Listing 17-5 shows the whole file. It has been reduced to a mere 18 lines. Each of the main areas of the file has now been extracted to its own file.

Listing 17-5. The Lean index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""> <html xmlns=""> <?php include_once('html-head.php'); ?> <body>

<div id="wrapper"> <?php get_header(); ?>

<div id="container"> <div id="pagecontent"> <?php include_once('main-content.php'); ?> <?php include_once('sidebar-a.php'); ?> <?php include_once('sidebar-b.php'); ?> </div><!-- /pagecontent --> </div><!-- /container --> <?php get_footer(); ?> </div><!-- /wrapper --> </body> </html>

Note that the header.php and footer.php files are not directly included by this file. Instead, the WordPress template functions get_header() and get_footer() have been called. These standard template tags automatically include a file called header.php and footer.php, respectively. If one of these files doesn't exist in the theme, the tags will include the corresponding files from the default theme.

This modularity now allows you to be incredibly flexible in the layout of the theme. As an example, simply commenting out any combination of the three include files in the central section allows you to change which pieces of the page are included. Figures 17-1 through 17-5 demonstrate how you can change the layout by commenting out files.

Saturday, July 23rd 2005

New Links In The Sidebar posted @ 9:21 am Edit This in [Site News ]

We have added a list of related links in the right most sidebar. Do check them out! In elit felis, faucibus nec, consectetuer eleifend, molestie a, erat. Nullam fermentum, lorem quis molestie congue, turpis erat sodales lorem, quis luctus dolor mi sit amet sem. Morbi eget ante. Aenean nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in sem. Etiam

August 2005












6 7






13 14






20 21






27 28





Jul Links

Figure 17-2. Sidebar A commented out

Figure 17-3. Sidebar B commented out
Figure 17-4. Both sidebars commented out


Alex Dougal

22 23 24 25 26 27 20


Alex Dougal

22 23 24 25 26 27 20

Figure 17-5. Main content commented out

Before moving onto building a layout from these pieces, you need to make one more change to the basic structure. You can see in Figure 17-2 that the combination of main content and sidebar B does not fill the width of the theme. Similarly, the main content with no sidebars is also too narrow. To resolve this problem, you can define three CSS classes that specify different widths for the main content, as shown in Listing 17-6.

Listing 17-6. Special Class Rules in style.css

#main-content { float: left; text-align: left; padding: 0 10px 0 5px;

.main-content-norm {

width: 340px;

.main-content-wide {

width: 530px;

.main-content-full {

width: 720px;

This way, you can specify in the code of the template which width to use. Listings 17-7 and 17-8 show the changes in index.php and the main-content.php include file to continue using the default value. I'll explain how this code works in the next section.

Listing 17-7. Setting the Class Variable in index.php <div id="pagecontent">

<?php $main_content_class = 'main-content-norm'; ?>

Listing 17-8. Using the Class Variable in main-content.php

<div id="main-content" class="<?php echo $main_content_class; ?>">

<div id="content">

Was this article helpful?

0 0
Instant Ways To Monetize Your Blog

Instant Ways To Monetize Your Blog

Get Paid For What You’re Worth. Benefit From Your Talent. Get Your Due Credit. Provide Your Skills A Platform To Shine. Enhance Your Opportunities. Learn how to monetize your blog and reap the rewards of your skills.

Get My Free Ebook

Post a comment