Converting a Static HTML Site into a Wordpress Theme- Part 2
Ranked #1,418 in Internet, #86,955 overall | Donates to Squidoo Charity Fund
Introduction
This tutorial is outdated. Please see Blue Green Blast Tutorial is Now Updated for WordPress 3.0 for more information.
Breaking Up the index.php Page
1a. We must highlight everything from our <!DOCTYPE... and <head> tags, all the way down to our closing header div. This includes the sidebar-2 search form div as well. Where the highlighting stops in our code is shown in the screenshot from HTML-Kit below:
1b. Now, with all of this highlighted, Cut (Ctrl-X, Cmmd-X) the header section. Next, we create a new blank file named header.php and Paste (Ctrl-V, Cmmd-V) the header code into the header.php file. Save header.php in the same folder as index.php; this is important.
1c. Next, in the index.php file, replace the previous section that was Cut with the following: <?php get_header(); ?>. A screenshot shows the code below:
2a. Now, we must do the same thing for our other sections. On the Stepping Into Templates page, they also specify to break apart and include the footer at the same time. Highlight everything in the index.php page from the <!-- opens footer div --> down to the last closing </html> tag. Cut and Paste into a new file footer.php.
2b. We now replace the previous footer section in index.php with <?php get_footer(); ?>. If you refresh your browsers after these adjustments and the page still looks the same, everything was successful. If the page doesn't show up, make sure there are no typos or missing semicolons in the get statements, as this may cause php to break. You will need to fix these errors and refresh.
3a. The next section to break apart then include is the sidebar. Highlight everything in our template from <!-- opens sidebar div --> to <!-- closes sidebar div --> Cut, Paste into new file, sidebar.php. Replace sidebar in index.php with <?php get_sidebar(); ?>. Easy as pie so far.
Single Post page
<div class="navigation">
<?php previous_post_link(); ?> | <?php next_post_link(); ?>
</div>
4b. What we don't need is a link to the same page around the title, as that is redundant. We can remove the a tag from around the post's title as shown in the before and after below:
<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<h2 class="entry-title"><?php the_title(); ?></h2>
4c. While we're here on the single.php page, let's make some visual changes to further give this page a different look. Let's open the style.css file. Under the h2 tag just adjusted, change the class name: <h2 class="entry-title-single"><?php the_title(); ?></h2>
In style.css, add the following to the very bottom of the file:
/* Single page classes */
.entry-title-single {
color: #000000;
background-color: #63DDDD;
margin-bottom:10px;
padding-left: 10px;
}
4d. Even though this is unrelated, I made some changes to WP Candy's sample content to include forms. Unfortunately, I noticed drop caps at the beginning of form elements shown below, as this is the first single post page that came up in my example. So, while in the style sheet, we could fix this issue by reverting the drop cap style back to it's original for form elements. This can go right below the #content p:first-letter style rule.
#content form p:first-letter {
font: normal 100% Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
Adding Comments to the Single Post page
5b. For this, we will navigate to the default theme's folder. If you installed Wordpress in Apache's htdocs folder, for instance, it would be stored in: Apache Software Foundation > Apache2.2 > htdocs > wordpress > wp-content > themes > default. From here, you can simply Copy the comments.php file and Paste into the blue-green-blast folder. If you want to view the file, you can open it in your text editor, Copy the code and Paste into a New file named comments.php in the blue-green-blast folder.
5c. Next, we will simply add the code that calls our comments.php file. This will be in the single.php page below the loop's endif tag:
<?php endif; ?>
<!-- add comments and reply form to the page -->
<?php comments_template(); ?>
</div>
5d. Refresh the browser(s). Right off the bat, we can see some issues here. One is the Drop cap showing up on the first letter of every post (a little much) and the textarea being too wide. In style.css, we will tackle the textarea first. What we want to do here is make the textarea as wide as the content within it's containing box. If you remember the width under #content, the comment form's containing box, it is 429px. Wordpress's auto-generated code gives the form an id of #commentform, so we will target the textarea within that id:
/* Comment template */
#commentform textarea {
width: 429px;
}
5e. Next, we need to change the drop cap back to normal text in the comment paragraphs. Luckily, we already set that up for the forms within the content div, so we will add to that style rule. We need to target the specific ol tag with the commentlist class, as shown below:
#content form p:first-letter, #content ol.commentlist p:first-letter {
font: normal 100% Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
5f. Let's add a border to the bottom of the post. First, we need to change the class name to post-single, so we don't add a line below each post in the index page. Below are the changes in single.php and style.css.
<!-- opens post div -->
<div class="post-single" id="post-<?php the_id(); ?>">
.post-single {
border-bottom: 2px solid #63DDDD;
padding-bottom: 20px;
}
5g. We want to put some padding between the form elements and add styling to the text boxes to override the browser's default look. Enter the following CSS style rules at the bottom of style.css:
#respond h3 {
padding-bottom: 20px;
}
#commentform p, .commentlist li {
padding-bottom: 10px;
}
.comment-meta {
font: bold 12px Georgia, "Times New Roman", "Nimbus Roman No9 L", serif;
}
#commentform input, #commentform textarea {
background-color: #CCCCCC;
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
color: #000000;
}
#commentform input#submit {
border-top: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
}
.bypostauthor {
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
color: #666666;
padding: 10px;
}
This styling adds the same border style from the search box to our comment form elements and reverses the border colors for the submit button, giving it a raised rather than lowered look. We also styled the bypostauthor class that is included within the comments template. This gives a different look for the current author's posts.
5h. Finally, we want to add an icon to the side of each post to further indicate a comment. This is where we will bring in our speech_bubble.gif file from an earlier tutorial. The blue-green-blast/images folder is where this file is found. The way we will apply this graphic is with the CSS :before pseudoelement, as shown below in bold:
*Unfortunately, the :before pseudoelement is not supported in Internet Explorer 7 and below.
.bypostauthor {
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
color: #666666;
padding: 10px;
}
.commentlist p:before {
content: url(images/speech_bubble.gif);
margin-right: 6px;
}
Pages page
6b. Next, after browsing many of the pages, I noticed the navigation link section at the top of the page doesn't work again; however, a plugin is needed for this functionality and this tutorial series is long enough. We can safely delete the navigation code:
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
If you do want to include Next and Previous navigation links on Pages, see the Codex page Next and Previous Links.
6c. Next, we can once again remove the link around our entry title and change the class name:
<h2 class="entry-title-page"><?php the_title(); ?></h2>
Essentially, things will not be that much different from the index template, except for CSS customizations. This will be a simple template to expand upon. We will leave out a comments section, as comments are more appropriate to the more urgent blog posts.
6d. The next step is to style the h2 tag in style.css, similar to in the single.php template:
/* Page classes */
.entry-title-page {
color: #000000;
background-color: #FFB273;
margin-bottom: 10px;
padding-left: 10px;
}
The Archives page
<div class="navigation">
<?php posts_nav_link(); ?>
</div>
<h2 class="archive-title"><?php bloginfo('title'); ?>: Archives</h2>
<?php if(have_posts()) : ?> ...
And style it like so:
/* Archive page classes */
.archive-title {
color: #000000;
background-color: #CCCCCC;
margin-bottom: 10px;
padding-left: 10px;
}
7b. Since this is an archive list that can get quite long if you have many posts in one month, we are going to change the code within the loop to display an excerpt, a shorter version of a post. Change the code in archive.php as shown below:
<!-- opens entry div -->
<div class="entry">
<?php the_excerpt(); ?>
</div>
<!-- closes entry div -->
The Category page
8b. From here, we will replace <h2 class="archive-title"><?php bloginfo('title'); ?>: Archives</h2> with <h2 class="category-title">Category: <?php single_cat_title(); ?></h2>
single_cat_title returns the name of the current Category.
Now, we can style this tag:
/* Category page classes */
.category-title {
color: #FFFFFF;
background-color: #FF7400;
margin-bottom: 10px;
padding-left: 10px;
}
Adding a Feed Subscription Link to the Sidebar
9b. We want to keep it simple, so we will add the two most popular feeds, RSS 0.92 and RSS 2.0. Our sidebar is widgetized, but we want the feed information to stay persistent, so our theme's users don't delete it upon changing widgets. So, in our sidebar.php file, we will place this information below the opening ul tag, but above the dynamic_sidebar (widgetizing) code. We will follow the instructions under the Codex's Adding Feeds section, modifying the code to make sense and fit our theme.
<ul><!-- opens sidebar ul -->
<li><h2 class="widget-title">Subscribe</h2>
<ul>
<li>
<a href="<?php bloginfo('rss_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS 0.92</abbr>'); ?></a>
</li>
<li>
<a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS 2</abbr>'); ?></a>
</li>
</ul>
</li>
<?php if ( !function_exists('dynamic_sidebar')
9c. Also, I would like to add an icon, once again, to indicate a feed. In the Wordpress Feeds page, under Adding Graphics to Feed Links, there is a link to the Feed Icons website. From there, let's download the Standard Icon bundle. Navigate to where the file was saved, usually a Documents, My Documents or Downloads folder, and Unzip the file. Mac users can use the free Stuffit Expander. Copy these files to Blue Green Blast's images folder. Finally, modify the Sidebar as shown below:
<ul><!-- opens sidebar ul -->
<li><h2 class="widget-title">Subscribe</h2>
<ul>
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/feed-icon-14x14.png" alt="Feed Icon" class="feedicon" /><a href="<?php bloginfo('rss_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS 0.92</abbr>'); ?></a>
</li>
<li>
<img src="<?php bloginfo('template_directory'); ?>/images/feed-icon-14x14.png" alt="Feed Icon" class="feedicon" /><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS 2</abbr>'); ?></a>
</li>
</ul>
</li>
<?php if ( !function_exists('dynamic_sidebar')
9d. We need to modify style.css to add a margin next to the feed icons:
/* Feed Icons */
.feedicon {
margin-left: 6px;
}
I placed a Calendar widget in place of the existing Sidebar, to show that the Subscribe section is still there. This leads me to the next thing I noticed. The Calendar widget is unstyled! We will do that in the next section.
Styling the Calendar
/* Calendar */
#calendar_wrap {
width: 251px;
padding-top: 20px;
}
#wp-calendar {
margin: 0 auto; /* works in standards browsers */
background-color: #FFFFFF;
padding: 10px;
}
#wp-calendar a:hover {
color: #FF7400;
text-decoration: underline;
}
#wp-calendar caption {
background-color: #FFB273;
color: #000000;
}
#wp-calendar thead {
background-color: #CCCCCC;
color: #000000;
}
#wp-calendar tbody {
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
color: #666666;
}
*The default Wordpress Calendar has a rendering issue, where if a month starts on a Monday, the top row of days gets pushed to the right. There is currently no fix for this, but it is being addressed for a future installation. More information can be found at core.trac.wordpress.org/ticket/11414.
Optional: Making our Theme Adsense Friendly
11a. First thing, you may want to use the four images below as Adsense placeholders. You may store them anywhere you'd like, but a good idea would be to store them in this theme's images folder (blue-green-blast/images).
11b. This section is optional as well, but if you want to use these placeholders in any theme you want, they can be uploaded to Wordpress's Media Library. Select Media from within the Wordpress Admin panel. Select Add New. Next, Select Files, navigate to where you stored the images and click Open (the final dialog box is dependent on your operating system; in Windows XP the button reads Open).
*If you want to leave the images where they are (in the Blue Green Blast images folder), just replace the references to the Media Library with <img src="' . get_bloginfo('template_directory') . '/images/name-of-image" alt="Alt text that describes the image" />, where name-of-image is the file name.
11c. We will set the Media Library aside for now and turn to our Functions file. Open functions.php in a text editor. Just below the section where we widgetized the sidebar, we will add a new function. Some place everything in one <?php ?> tag, but for clarity, I will place these in separate tags. The next bit of code defines a function that places a div tag on the page with the Adsense placeholder; then it adds a shortcode that can be placed within Posts or Pages. To place Adsense code in a widgetized sidebar, it can be pasted directly into a Text widget. The pseudo-code for the first example is below:
<?php
//adsense placeholder functions and shortcodes
function show250left() {
return '<div id="ad250-floatleft"><img src="http://[localhost]/directory-where-worpdress-is-installed/wp-content/uploads/[year]/[month]/ad_placeholder250.png"></div>';
}
add_shortcode('ad250-floatleft', 'show250left');
?>
11d. Within the code, you may notice the code that begins with http://[localhost].... Plugging this in will probably generate an error. This is where the Media Library comes back into play. In the Media Library, look for ad_placeholder250. When you mouseover the image, an Edit option appears, select it. At the bottom, there is a File URL. Highlight this and Ctrl-C/Cmmd-C to Copy the URL.
11e. Back in our Functions file, Paste the code in place of the the pseudo-code. The snippet below shows what my code looks like. Note that your code will look significantly different:
<?php
//adsense placeholder functions and shortcodes
function show250left() {
return '<div class="ad250-floatleft"><img src="http://apache.localhost/wordpress/wp-content/uploads/2010/01/ad_placeholder250.png"></div>';
}
add_shortcode('ad250-floatleft', 'show250left');
?>
11f. Next, we will add a little styling for how we place this in the blog. If you noticed, we added a class ad250-floatleft. In style.css, type:
/* Adsense classes */
.ad250-floatleft {
float: left;
padding: 0 1em 1em 0;
}
11g. In order to use these placeholders, simply place a shortcode within a Post or Page by inserting [ad250-floatleft] (for our first example). The screenshot below shows how this looks within a post in our theme.
11h. To use the actual Adsense code, just replace the entire image tag in the function.
<?php
//adsense placeholder functions and shortcodes
function show250left() {
return '<div class="ad250-floatleft"> Adsense code goes here... </div>';
}
add_shortcode('ad250-floatleft', 'show250left');
?>
11i. Okay, so now I'm going to let you, my readers, figure out how to put together the rest of the the functions. A clue is to name the function for a right aligned 250 by 250 Adsense placeholder show250right() and name the corresponding class ad250-floatright.
Screenshot and Resources
Blue Green Blast is now available for download at Jason G. Designs, my blog. A link to download the theme as well as a preview is at http://www.jasong-designs.com/2011/04/25/blue-green-blast/. Some changes made to the theme include a logos panel at the bottom of the page, a functions.php file that now points to the Adsense placeholders in the local images folder (eliminating the need to upload the files to WordPress's Media folder), and in the downloadable version, the footer title "Blue Green Blast" links to it's web post on my blog.
Resources:
Stepping Into Templates
Wordpress Feeds
Feed Icons
9 Useful Snippets for Your Wordpress Functions
Mastering Wordpress Shortcodes
More on Wordpress Themes
Questions or Comments?
Any questions about this or any of the tutorials in this series can be left here.
-
Reply
-
Fred Genti
Oct 12, 2011 @ 7:05 am | delete
- The steps given are so easy to understand that I made it worked perfectly! Thanks a lot.
http://www.mydietarystore.info/
-
by jgpws
Jason Gonzalez resides in Los Angeles as a designer.
He is a 2005 bachelor's degree graduate of Mt. Sierra College in California under the Multimedia Design...
more »
- 7 featured lenses
- Winner of 4 trophies!
- Top lens » Creating a Fancy Website Layout in Gimp 2.6
Explore related pages
- How to Build a Beautiful Site With MODx CMS (Content Management System) How to Build a Beautiful Site With MODx CMS (Content Management System)
- Converting a Static HTML Site into a Wordpress Theme- Part 1 Converting a Static HTML Site into a Wordpress Theme- Part 1
- Terraplanagem Ou Terraplenagem Terraplanagem Ou Terraplenagem
- RapidWeaver-SEO RapidWeaver-SEO
- Web Development Tutorials Web Development Tutorials
- You Need Templates - for your website, eCommerce, Flash and stuff You Need Templates - for your website, eCommerce, Flash and stuff
