4

Creating a WordPress Theme (Part 4): Home Page

As we continue with our theme’s development, I’ll show you in this article what changes we need in our index.php. So we’ll continue changing the files we copied from the Default theme and we’ll create new CSS styles. In order to complete the main part of our home page, we’ll also prepare our sidebar and add some functions to our theme.

If you didn’t read the previous article, click here to download our theme’s files.

Introduction

In the previous article we copied the Default theme (which comes with WordPress 2.9) and started our development by changing its header (header.php). We also defined different styles in the style.css. Today we’ll continue our development by coding our home page and the index.php file.

So far this is how our theme looks like:

Our theme with the header

Our theme with the header

As you can see we have everything ready until our menu. The post title appears next to the menu. Now we’re going to fix this.

PHP Development

Please open the index.php file from our theme (wp-content/mytheme). The code is the original one from the Default theme, so let’s do the necessary changes. Besides this file, we’ll also create some functions and correct our sidebar.

As we’re using the 960.css (960 Grid System) we need to insert our content in a new container. The container will have 12 columns, 8 columns for the main content and 4 columns for the sidebar (this will be defined inside sidebar.php). So, the structure of our index.php will be:


<div id="main" class="container_12 box-shadow">
    <div id="content" class="grid_8" role="main">
    </div>
    <?php get_sidebar(); ?>
    <div class="clear"></div>
</div>

Home Page

  1. As we did the last time, change the subpackage information at the first lines: replace @subpackage Default_Theme with @subpackage MyTheme_Theme
  2. In order to speed thing up, also replace all occurrences of ‘kubrick’ with ‘mytheme’. This will update the default text domain for our own text domain which will be used for translation later.
  3. Now replace also the <div id=”content”> with 2 div’s which will define our structure:
    
    <div id="main" class="container_12 box-shadow">
        <div id="content" class="grid_8" role="main">
    
    
  4. Inside the tag <small> we’ll change the post information. We’ll include the author, the date and the number of commetns:
    <small><?php _e('By', 'mytheme'); ?> <?php the_author(); ?> <?php _e('on', 'mytheme'); ?> <?php the_time(__('F jS, Y', 'mytheme')); ?> <?php if ( comments_open() ) _e('with', 'mytheme'); ?> <?php comments_popup_link(__('No Comments &#187;', 'mytheme'), __('1 Comment &#187;', 'mytheme'), __('% Comments &#187;', 'mytheme'), '', __('Comments Closed', 'mytheme') ); ?></small>
    
  5. The next step is to replace the simple call for the function the_content() – which shows the post content, of course – with another code that will also show the post’s thumbnail:
    <?php
    if ( has_post_thumbnail() ) {
        the_post_thumbnail();
    }
    
    the_content(__('Read more &raquo;', 'mytheme')); ?>
    
    
  6. Now we need to remove the number of comments from the post metadata paragraph. Besides, we’ll also add a “clear” DIV before the metadata because we’re going to use float for the thumbnail and the “clear” will force the metadata into the next line. The code will look like this:
    <?php
    <div class="clear"></div>
    <p class="postmetadata"><?php the_tags(__('Tags:', 'mytheme') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'mytheme'), get_the_category_list(', ')); ?> <?php edit_post_link(__('Edit', 'mytheme'), ' | ', ' | '); ?>  </p>
    
    
  7. Close the DIV we created in step 3, but put the get_sidebar() function inside it. Also add another “clear” after this function.

The complete code for the index.php file is the following:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */

get_header(); ?>
<div id="main" class="container_12 box-shadow">
    <div id="content" class="grid_8" role="main">

	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>

			<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'mytheme'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
				<small><?php _e('By', 'mytheme'); ?> <?php the_author(); ?> <?php _e('on', 'mytheme'); ?> <?php the_time(__('F jS, Y', 'mytheme')); ?> <?php if ( comments_open() ) _e('with', 'mytheme'); ?> <?php comments_popup_link(__('No Comments &#187;', 'mytheme'), __('1 Comment &#187;', 'mytheme'), __('% Comments &#187;', 'mytheme'), '', __('Comments Closed', 'mytheme') ); ?></small>

				<div class="entry">
                                    <?php
                                        if ( has_post_thumbnail() ) {
                                            the_post_thumbnail();
                                        }

                                        the_content(__('Read more &raquo;', 'mytheme')); ?>
				</div>

                                <div class="clear"></div>
				<p class="postmetadata"><?php the_tags(__('Tags:', 'mytheme') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'mytheme'), get_the_category_list(', ')); ?> <?php edit_post_link(__('Edit', 'mytheme'), ' | ', ' | '); ?>  </p>
			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'mytheme')) ?></div>
			<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'mytheme')) ?></div>
		</div>

	<?php else : ?>

		<h2 class="center"><?php _e('Not Found', 'mytheme'); ?></h2>
		<p class="center"><?php _e('Sorry, but you are looking for something that isn&#8217;t here.', 'mytheme'); ?></p>
		<?php get_search_form(); ?>

	<?php endif; ?>

	</div>

    <?php get_sidebar(); ?>
    <div class="clear"></div>
</div>

<?php get_footer(); ?>

If you go to your browser and check your website you’ll see a fatal error. That’s because we used the thumbnail functions without enabling it in our theme. Therefore we’ll need to do that by changing our functions.php.

Creating the Functions

Open the functions.php file and remove all the content.

  1. As we did for all the PHP files, insert the package information for our theme.
  2. Right after that we’ll add the function that will be in charge of loading our text domain. First we have to add the function using add_action() and later we add the function itself:
    add_action ('init','mytheme_init');
    
    function mytheme_init (){
        load_theme_textdomain('mytheme', get_template_directory());
    }
    
  3. The next step is enabling the thumbnails by adding support in our theme. We’ll also define the thumb’s size. in our case it will have a width of 125 pixels, without constraints for the height.

    add_theme_support( ‘post-thumbnails’, array( ‘post’ ) );
    set_post_thumbnail_size( 125, 9999 );

  4. Now we’ll register our sidebar and define the tags used inside it.
    if ( function_exists('register_sidebar') ) {
    	register_sidebar(array(
    		'before_widget' => '<li id="%1$s" class="widget %2$s">',
    		'after_widget' => '</li>',
    		'before_title' => '<h2 class="widgettitle">',
    		'after_title' => '</h2>',
    	));
    }
    

If you go to your browser again, you’ll see that the theme is working again.

Sidebar

Let’s finish the PHP part of this post updating the file sidebar.php. As it’s a small file, let’s simply remove all the content and add the following:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */
?>
<div id="sidebar" class="grid_4" role="complementary">
    <ul>
        <?php /* Widgetized sidebar, if you have the plugin installed. */
            if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
            <li><h2><?php _e('Archives', 'mytheme'); ?></h2>
                <ul>
                <?php wp_get_archives('type=monthly'); ?>
                </ul>
            </li>
        <?php endif; ?>
    </ul>
</div>

Here we define the size of 4 columns by using grid_4. We used here the dynamic_sidebar() function to check if the widgetized sidebar is enabled. In case it’s not enabled we’ll show only the blog archives.

This is how our theme looks before we add the new styles:

Theme before the new styles

Theme before the new styles

So now let’s go to our CSS.

Style Definition in the CSS

Open the style.css file from our theme. First we’ll add the index page styles and later the sidebar ones.

Index Page

  1. Let’s start with the <div id=”main”>. We’ll define it with a white background, green (#008800) border with a border-radius. We’re going to define margin and padding too.
    #main {
        background-color: white;
        border: 2px solid #008800;
        border-radius:10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin: 32px auto;
        padding: 20px 0;
    }
    
  2. Next, we’ll define the font details for the post entries.
    .entry {
        font-size: 1.4em;
        text-align: justify;
        line-height: 1.5em;
    }
    
  3. Now we have to add the different sizes for the headers. We’ll also add a border on the top of the header in order to have a better separation among sections.
    .entry h1, .entry h2, .entry h3, .entry h4 {
        color: #000;
        border-top: 1px dotted #afa;
    }
    .entry h1 {
        font-size: 1.8em;
        padding: 25px 0 0 0;
        margin: 25px 0;
    }
    .entry h2 {
        font-size: 1.6em;
        padding: 15px 0 0 0;
        margin: 15px 0;
    }
    .entry h3 {
        font-size: 1.4em;
        padding: 10px 0 0 0;
        margin: 10px 0;
    }
    .entry h4 {
        font-size: 1.2em;
        padding: 5px 0 0 0;
        margin: 5px 0;
    }
    
  4. Align the thumbnail by adding a float to it. Also add a border to it.
    .attachment-post-thumbnail {
        float:left;
        margin:4px 8px 4px 0;
        padding:0;
        background: #d2d2d2;
        border: 1px solid #808080;
        border-radius:10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    
  5. The last thing is to define the metadata:
    .postmetadata {
        font-size: 1.2em;
        line-height: 1.5em;
    }
    

Sidebar

  1. We’ll start the sidebar by defining the border that will make it appear.
    #sidebar {
        border: 2px solid #008800;
        border-radius:10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin: 15px 8px;
    }
    
  2. Next, we’ll remove the list styles and the padding:
    #sidebar ul {
        list-style: none;
        padding:0;
    }
    
  3. And now we’ll fix the H2 headers, which we used when we registered our sidebar (in the functions.php).
    #sidebar h2 {
        background: #006600;
        color: #fff;
        padding: 5px;
        border-top: 2px solid #008800;
        border-bottom: 2px solid #008800;
        text-shadow: #000 2px 2px 2px;
    }
    #sidebar h2 a {
        color: #fff;
    }
    
  4. As there are different HTML structure for the widgets, we’re going to define the spacing inside widgets in different ways.
    #sidebar ul li ul {
        font-size: 1.4em;
        padding: 5px;
    }
    #sidebar div {
        font-size: 1.4em;
        padding: 5px;
        text-align: justify;
        line-height: 1.5em;
    }
    #sidebar table {
        font-size: 1.4em;
        padding: 5px;
    }
    #sidebar div div {
        font-size: 1em;
        padding: 0;
    }
    #sidebar ul div ul {
        font-size: 1em;
        padding: 0;
    }
    

So now we have finished our theme’s home page (except the footer). This is the result so far:

Our theme's home page

Our theme's home page

Conclusion

In this article we continued our theme’s development by updating it’s home page. We’ve also created some function inside our functions.php, which allows us to enable and/or create some functionalities.

Click here (75 Kb) to download the current version of our theme.

In our next post we’ll continue our theme’s development preparing the templates used for single posts and pages. From the next part we’ll reuse a lot of styles and the PHP files will look similar because our structure will be almost the same for different files. Once again, thanks for the visit!

Other Posts from the Series
Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction
Creating a WordPress Theme (Part 3): Header

Share Button

Oscar Dias

I work with software development since 2003 and I've used different programming languages. Currently I work with PHP in my own company Softerize.

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *