WordPress CMS Part 2: Theme Implementation
I finally found some time to implement the WordPress theme for Sky Dental and to write Part 2 of my WordPress as CMS tutorial. Like I said in Part 1, the WordPress theme that you begin with is not really that important. What’s important is that you use a theme that matches your layout as close as possible.
Since I already created the basic “header + 2 columns + footer” HTML structure when I built the initial website, using a two column WordPress theme like Corporate Sandbox will make this a simple copy / paste job and maybe a couple of small tweaks.
The theme structure
Below is the layout we’re using and I also highlighted the files we need to edit:
I will discuss the changes we need to make to each of these files, but I won’t go into specific details about the CSS. I will focus on the Worpdress code and HTML markup instead. Here’s the markup for this particular layout:
<div id="container">
<div id="top">
<div id="header">Logo and phone number</div>
<div id="menu">Main menu tabs</div>
<div id="banner">Text and image</div>
<div id="promo">Promo below the blue area</div>
</div>
<div id="page"> <!-- or id="bottom" for homepage -->
<div id="content">Page content</div>
<div id="sidebar">Sidebar links</div>
</div>
<div id="footer">Footer text</div>
</div>Header
The default header.php file contains your blog’s title and description. The best thing you can do to improve you search engine rankings is add some keywords and use SEO friendly titles. Of course, the majority of company websites will need to have the company logo in the header. So how can you do that, while still achieving great SEO results? Here’s a neat trick that Alex thought me:
<h1 id="logo" title="Main Keywords"><a title="Main Keywords" href="/"><span>Main Keywords</span></a></h1>Use the above markup, along with the following CSS:
#logo {
float: left;
margin: 25px 0 0 35px;
}
#logo a {
width: 160px;
height: 35px;
display: block;
background: url(images/logo.gif) no-repeat top left;
}
#logo a span { display: none }Besides the logo, my header contains the main navigation (check WordPress Tutorial: Rounded Corner Tab Menu Using CSS for info on how to style that), some text and images, as well as a promo area (the one with the heart icon) that links to a certain page of the site. I used the following code to make this area only show up on the homepage:
<?php if (is_front_page()) { ?>Promo content goes here <?php } ?>Content
Since I won’t use tags and don’t plan to keep a monthly archive for the Blog section, I deleted a bunch of files from the original WordPress theme. Basically, the only files I have to edit are page.php, index.php and category.php.
Here’s how the page.php file looks like:
<?php get_header() ?>
<div id="<?php if (is_front_page()) { ?>bottom<?php } else { ?>page<?php } ?>">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID(); ?>" class="postsandbo">
<?php if (!is_front_page()) { ?>
<div class="breadcrumb">
<?php
if (function_exists('bcn_display')) {
bcn_display();
}
?>
</div>
<h2><?php the_title(); ?></h2>
<?php } ?>
<div class="entry-content">
<?php the_content() ?>
</div>
</div><!-- .post -->
</div><!-- #content -->
<?php get_sidebar() ?>
<div class="clear"></div>
</div><!-- #bottom or #page -->
<?php get_footer() ?>If the current page is not the front page, I will display the breadcrumb and title and add a background image (the one with the fading clouds) to the content area, because the promo is no longer there.
Sidebar
Since the sidebar shows the secondary navigation menu, there won’t be anything to show on the front page. This is why I use the is_front_page() conditional tag once again, to add links to the important sections of the site. Here are some other things you could add: newsletter subscription, link to download something, latest news (blog posts), etc.
<div id="sidebar">
<?php if (is_page()) {
if (is_front_page()) {
?>
// front page sidebar content goes here
<?php
}
else {
if ($post->post_parent) {
$children = wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent."&echo=0");
} else {
$children = wp_list_pages("title_li=&depth=1&child_of=".$post->ID."&echo=0");
}
?>
<h3>In This Section:</h3>
<ul id="sidemenu">
<?php echo $children; ?>
</ul>
<?php
}
} else { ?>
// existing sidebar.php content goes here
<?php } ?>
</div><!-- #sidebar -->Using Templates
If you find the code a bit too messy, there is another way to do things: using Templates. Instead of using all these conditional tags inside sidebar.php, you can leave the original sidebar file intact and just create frontpage.php, a Template for the front page.
We will also have to change page.php, replacing <?php get_sidebar() ?> with the actual code from sidebar.php. Here’s how the code for the two files will look like:
page.php shows the title and breadcrumb, as well as a secondary navigation in the sidebar:
<?php get_header() ?>
<div id="page">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID(); ?>" class="post">
<div class="breadcrumb">
<?php
if (function_exists('bcn_display')) {
bcn_display();
}
?>
</div>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content() ?>
</div>
</div><!-- .post -->
</div><!-- #content -->
<div id="sidebar">
<?php
if ($post->post_parent) {
$children = wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent."&echo=0");
} else {
$children = wp_list_pages("title_li=&depth=1&child_of=".$post->ID."&echo=0");
}
?>
<h3>In This Section:</h3>
<ul id="sidemenu">
<?php echo $children; ?>
</ul>
</div>
<div class="clear"></div>
</div><!-- #bottom or #page -->
<?php get_footer() ?>frontpage.php shows has no title or breadcrumb and shows just a couple of static links in the sidebar:
<?php
/*
Template Name: Front Page
*/
?>
<?php get_header() ?>
<div id="page">
<div id="content">
<?php the_post() ?>
<div id="post-<?php the_ID(); ?>" class="post">
<div class="entry-content">
<?php the_content() ?>
</div>
</div><!-- .post -->
</div><!-- #content -->
<div id="sidebar">
<h3>Next Steps:</h3>
<ul id="sidemenu">
<li><a href="#">Our Location</a></li>
<li><a href="#">Practice Schedule</a></li>
<li><a href="#">Dental Treatment</a></li>
</ul>
</div>
<div class="clear"></div>
</div><!-- #bottom or #page -->
<?php get_footer() ?>And of course there’s footer.php, where you can add copyright information and maybe duplicate the main navigation links.
Does this make sense?
Even if some of you already know these tricks, I’m really curious to hear your feedback on wether this tutorial was easy enough to follow. I mean… am I making any sense? Cause I have a couple of other tutorials on the pipeline and I want to know how to go about it. Maybe it’s better to prepare a short script, double check, triple check, instead of writing as I go along.
Hope to see more.
