If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
In our previous article of this series, we talked about a few general Steps to Create Your Own WordPress Theme. In this article we will go a bit deeper and see a few things practically. Since Graphic Design is not the main area I work in, we would not talk mainly about that. We will continue in this article from the point what you receive from your graphic designer.
Your graphic designer will provide you a set of html and psd files. In this article we will generate the php code for the most important file of your theme, index.php. So Lets dive into action.
Here is a sample front page html file along with css that we will use in this article. Have a good look at this and familiarize yourself with the overall structure. As you know that any WordPress theme is appears consistent because of its general structure. This is actually what makes different pages as part of a theme. The consistent structure can be clearly divided into certain key areas. Here these are:
- Header
- Main content area
- Footer
- Side bar
The html of the front page we have includes all these elements. So in order to work our way towards the index file, we first have to modularize the html in such a way that it can be accessed from different pages in a way that is consistent to WordPress.
Header
So as a first step we separate the header from our html. The header should start from the top of the file and generally it will include everything till the navigational area. At present for the sake of simplicity, we will just decide where our header ends, cut that html and put that in a file called header.php. Nothing more. But there will be a time when we will go a bit deeper and modify that html and actually convert that into a php code.
Here is the header file that we have extracted out of the html. header.php
Note that the navigation bar div element is completely included in the header file. Most of the theme elements are hard coded in this file. We wouldn’t worry about this hard code until the next article.
Footer
Just like the Header, we will cut the html of our footer and paste that in a file called footer.php .
Here is the footer file.footer.php
It is important to note here that the div named footer is fully included in the this file. However the html in the footer file actually begins by closing a div called ‘content’. This is div element is opened in the header file. So where ever we include the header file in the beginning, we will include the footer. This will create a valid HTML.
Side bar
Side bar for our theme will include Recent articles links, rss feed link, blog roll etc. Side bar is placed at one of the sides of the theme using the magic of css. Html code for sidebar we have extracted is saved in sidebar.php . Note that unlike our header and footer, site bar is one complete div with id=sidebar. This naming will be handy when you try to style different elements of your theme using css.
Here is the file sidebar.php
Content Area
This is the main area where you display your contents. We will not create a different file for just the content area. Instead a file index.php will be used to display header / footer / sidebar and the content area. It is important to understand the structural elements which are used to display the contents. The div that is used to display the main contents column in our theme is called ‘contentleft’ .
In order to display the front page with these contents along with header and footer .. all we have to is to include the files we created at proper places. That will give us a front page of our them.
So we include at the top
<?php get_header(); ?>
This will fetch the contents of the file named header.php
and at the bottom, we include
<?php get_sidebar(); ?>
<?php get_footer(); ?>
This will include the sidebar and the footer on our front page. This completes our cut and past operation. We will now start removing the hard coded elements from our theme to make it alive and start displaying contents right from our blog.
To do that you need to include WordPress while loop just inside your contentleft div. This loop is used to fetch different elements of your post. The loop looks like this.
<?php while (have_posts()) : the_post(); ?>
...
...
<?php endwhile; ?>
Inside this loop you will fill in elements like title of the post, date and time , and number of comments. Anything related to the post goes in here.
So our finished loop looks like
<?php while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<h4><?php the_time('F jS, Y') ?><!-- by <?php the_author() ?> --> · <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></h4>
<div class="entry">
<?php the_content('[Find more →]'); ?>
</div><!--entry-->
<p class="tagged"><span class="add_comment"><?php comments_popup_link('→ No Comments', '→ 1 Comment', '→ % Comments'); ?></span><strong>Tags:</strong> <?php the_category(' · ') ?></p>
<div class="clear"></div>
<?php endwhile; ?>
Now all you have to do is to copy the files in a folder in /wp-contents/testTheme and give it a try by going into presentation option of your admin area. All the files till this point are archived in
We will continue to add flexibility and removing hard coded elements from this theme in coming articles.
Browse more posts marked in:
;
There are no comments yet...Be the first by filling out the form below.
Leave a Comment