Open source training & tutorials from experienced, passionate people
By A Web Design
NOTE: Click on the icon immediately above to download all the resources used in this lesson.
The header section is the top most part of the BLOG page delivered to the Browser. The Header section often contains a banner that adds visual content to the top of the BLOG page. The header section often contains the BLOG's Search Box.
NOTE: The BLOG's search box can be placed anywhere on the BLOG page ( i.e. a place of your choosing ) not necessarily in the Header section only.
Since the page Header section is a banner you can try and obtain you Header image (i.e. a banner) for free via the internet or you can design one yourself using design tools like Photoshop or Corel Draw or GIMP.
Here are some links where you could find a banner for your webpage for free or at very modest prices.
http://www.bannersketch.com/
Once you have a banner image you are happy with, place this in the /images folder in the mytemplate folder.
Now open style.css in your favorite editor and start styling the header section there. I have selected the banner as shown in the Diagram 1.
Diagram 1
The name of the banner file is top_bg.png. To include top_by.png in the header section add the following styling to style.css.
#divHeader { float:left; width:100%; height:180px; background-color:#FFFFCC; background-image:url(images/top_bg.png); }
After you add this styling to style.css when index.php is run, it will look like Diagram 2.
Diagram 2
In diagram 2 there two uniform white stripes on the left and right sides of the theme. To add a proper T section to the header add the following styling codespec to style.css.
#divOuterParent { width:100%; height:auto; float:left; background:url(images/bg240.jpg) repeat-x scroll 0 0 ; }
When index.php is run the theme appears as shown in the diagram 3
NOTE: The T section look and feel at the top of the page.
Diagram 3
To achieve the above look and feel I have used a brown colored 47px by 240px image as shown in diagram 4 and repeated it along the x- axis.
Diagram 4
This completes the look and feel of our header. Now we’ve decided to add a logo within our theme's header section.
To do this we need a logo image. I have selected an image named ibnewlogo.png as shown in diagram 5 as the logo for this theme's header. The image, ibnewlogo.png will be placed in the /images folder which is in the mytemplates folder.
Diagram 5
Within index.php locate divHeader. Within divHeader create a DIV whose ID will be headerLeft as shown in the code snippet below:
<div id="divHeader"> <div id="headerLeft"></div> </div>
The styling code for headerLeft ( within style.css ) is as shown in the CSS code snippet below:
#headerLeft { float:left; width:385px; height:80px; background-image:url(images/ibnewlogo.png); background-repeat:no-repeat; margin-top:30px; }
Run index.php with the DIV headerLeft in place the theme will look as shown in diagram 6
Diagram 6
Next let’s learn how to display posts or pages within the newly formatted theme.
Wordpress was created to be a BLOG related software.
Hence, it’s geared to creating BLOG posts via its Admin section and displaying these BLOG posts one below the other, with the latest BLOG post first.
Significantly a single page is displayed with multiple BLOG posts on that page.
The specific number of BLOG posts that will appear on this BLOG page can be controlled by specifying a number in the wp-admin section.
Wordpress can also be used as a CMS.
Let’s pause for a moment here and take a quick look at how to use Wordpress as a Content Management System (CMS) and not as a BLOG.
When Wordpress is used as a CMS it will deliver a website look and feel which is quite different from a BLOG.
For example: Instead of a single page loaded with BLOG posts Wordpress can display a top menu with various menu links that will each lead to a separate webpage.
This is because most websites deliver multiple pages. Each page accessed via its own Menu item. Each page delivering different ( and appropriate ) content to the page viewer.
Let's figure out how to acheive exaclt this using Wordpress.
Go to the wp-admin section and choose to create pages instead of posts.
Create an appropriate page title and the load the page with appropriate content.
Content can consist of text, images, audio, video information and more that must be delivered to the viewer.
When Wordpress is used as a CMS, the page title you entered when creating the page appears as a top menu item via which the page content is accessed.
With this basic idea pages in place let’s create a few pages in Wordpress via wp-admin. This ensures that a top menu will be displayed within the theme as shown below.
To ensure that a page title appears as a menu item in the top menu area, add the following code snippet within the divTopMenu in index.php.
<div id="divTopMenu">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
The page titles will appear as menu items in a bulleted form within divTopMenu at one below the other because of the <ul><li></li></ul> HTML code.
To make this look like a proper horizontal menu these HTML tags will have to be styled in style.css. as shown in the code snippet below:
#divTopMenu { float:left; width:100%; height:60px; background-color:#471E08; } /* ***** Top menu items will be styled here ******** */ #divTopMenu ul { list-style:none; margin:0; padding-top:15px;; } #divTopMenu li { display:inline; padding-left:10px; } #divTopMenu a { text-decoration:none; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; color:#FFFFFF; } /****** Top menu items styling ends here *********/
When index.php is run the theme will now look as shown in diagram 7
Diagram 7
NOTE: Only the page titles appear as menu items. The actual page content is not visible. This is because we have not yet added appropriate code to display the page content within divContent in this theme.
Open index.php and locate the DIV whose ID is divContent and add the following code snippet to invoke and display page content within divContent.
<div id="divContent">
<!-- Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Post -->
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-title">
<div class="post-date">
<span><?php the_time('d') ?></span>
<?php the_time('M') ?>
</div>
<h2><a href="<?php the_permalink() ?>"
rel="bookmark"
title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
</h2>
Author: <?php the_author() ?>
</div>
<div class="post-entry">
<?php the_content('Read <span>more...</span>'); ?>
<?php wp_link_pages(array
('before' => '<p><strong>Pages:</strong> ',
'after'=> '</p>', 'next_or_number' => 'number')); ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
</div><!-- /Post -->
<?php endwhile; ?>
<?php else : ?>
<!-- Post -->
<div class="post">
<div class="post-title">
<h2>Not Found</h2>
</div>
<div class="post-entry">
<p>Sorry, but you are looking for something that isn't here.</p>
</div>
</div><!-- /Post -->
<?php endif; ?>
<div class="clear"></div>
</div><!-- /Content -->
</div><!-- divContent ends here -->
NOTE: The styling for setting up the position and size of divContent is located within style.css and is shown below:
#divContent { float:left; width:68%; height:600px; background-color:#FFFFFF; }
When index.php is run the theme will now look as shown in diagram 8
Diagram 8
Click on any menu item in the top menu and its associated page content will appear in the content section of the theme as shown in diagram 16.
To display a list of available pages as a left vertical menu add the following code snippet to divLeftCol.
<h3>Pages</h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
If you want to display archived posts add the following code snippet to divLeftCol below the earlier snippet.
<h3>Archives</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
To display META information such as RSS feeds and so on, add the following code snippet to divLeftCol below the earlier snippet
<h3><?php _e('Meta'); ?></h3> <ul> <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"> <?php _e('<abbr title="Really Simple Syndication"> RSS</abbr>'); ?></a> </li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"> <?php _e('Comments <abbr title="Really Simple Syndication" >RSS</abbr>'); ?></a> </li> <li> <a href="http://greatwordpressthemes.com"> Wordpress Theme Directory </a> </li> <?php wp_meta(); ?> </ul>
When index.php is run the theme will now look as shown in diagram 9
Diagram 9
In the right column a login/register section is required.
To achieve this create another div named divLogReg inside the divRightCol.
Add the following code snippet to divRightCol to display the Wordpress built-in Login / Register module for this theme.
<!-- The Login Register section starts -->
<div id="divRightCol">
<div id="divLogReg">
<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) : ?>
<h2>Logged in</h2>
<ul>
<li>Welcome <strong><?php echo $user_identity ?></strong>
<ul>
<li><a href="<?php echo wp_logout_url('$index.php'); ?>">
Logout</a>
</li>
</ul>
</li>
</ul>
<?php elseif ( get_option('users_can_register') ) : ?>
<h2>Identification</h2>
<ul>
<li>
<form action="<?php bloginfo('url') ?>/wp-login.php"
method="post">
<p>
<label for="log">User<input type="text" name="log" id="log"
value="
<?php echo wp_specialchars(stripslashes($user_login),1)?>
" size="22" /></label>
<label for="pwd">Password<input type="password" name="pwd"
id="pwd" size="22" /></label>
<input type="submit" name="submit" value="Send"
class="button" />
<label for="rememberme">Remember me<input name="rememberme"
id="rememberme" type="checkbox" checked="checked"
value="forever" /></label>
</p>
<input type="hidden" name="redirect_to"
value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
</li>
<li>
<a href="<?php bloginfo('url') ?>/wp-register.php">Register</a>
</li>
<li>
<a href="<?php bloginfo('url') ?>
/wp-login.php?action=lostpassword">Recover password</a>
</li>
</ul>
<?php endif // get_option('users_can_register') ?>
</div><!-- divLogReg closes -->
</div><!-- divRightCol closes -->
<!-- The Login Register section ends -->
The styling instructions in the CSS file style.css for divRightCol is as follows:
#divRightCol { float:right; width:15%; height:600px; padding:5px 5px 5px 5px; background-color:#FFFFCC; } #divLogReg { float:left; border:1px solid black; width:100%; } #divLogReg ul { list-style:none; margin:0; padding:5px; } #divLogReg p { line-height:1.5; margin-top:0; } #divLogReg .button { margin-top:3px; background-color:#666666; color:#FF0000; } #divLogReg h2 { margin:0; padding:5px; } #divLogReg a { text-decoration:none; color:#CC0000; }
When index.php is run the theme will now look as shown in diagram 10
Diagram 10
In the next lesson we will look at how this theme's Footer section is created.
