Home » Internet » Blogging » Wordpress

Converting a Static HTML Site into a Wordpress Theme- Part 1

Ranked #961 in Internet, #57,985 overall | Donates to Squidoo Charity Fund

Introduction

Author: Jason Gonzalez
Dated: 16, May 2010

This tutorial is the third in a series. To see the first sections, use these links below:

Creating a Fancy Website Layout in Gimp 2.6, and
How To Slice Up Graphics for XHTML and CSS.

This tutorial is now outdated. To get the latest tutorial, see the page Blue Green Blast is Now Updated for WordPress 3.0.



In this section, we are going to convert our static site into a stand alone Wordpress theme. Wordpress is blogging and content management software that makes creating and updating a website far easier than maintaining it oneself. You can include or exclude any blog specific elements you wish if you want to use it just for a general website.

*Parts of the Wordpress codex that are listed in the article are linked to in the resources section, due to limits on the number of links to the same website.

Installing Wordpress on your Local Computer

In this area, I will be very brief in that I will not tell you how to install Wordpress, but point you to resources for downloading everything you need. Wordpress runs on a WAMP, LAMP, MAMP setup. The first letter in these acronyms refer to an operating system (Windows, Linux and Mac OSX respectively). A stands for Apache web server, M for MySQL and P for PHP. These all must be installed and working before you can install Wordpress. Many Wordpress users also use PhpMyAdmin as a GUI for setting up the MySQL database required (once again, I will not go over this, as it is beyond the scope of this article). Luckily, for Windows and Mac users, there are pre-packaged installers that setup and install these for you. Some of these are listed below. For Ubuntu Linux users, I included a very useful article on how to install these individually.

1.
a. Windows:
WAMP Server
XAMPP for Windows

b. Macintosh:
MAMP
XAMPP for Mac OSX

c. Linux:
HOWTO: Installing and Running WordPress on Ubuntu GNU/Linux ~ Moving to Freedom

If you're using Linux and you followed the above tutorial, you already installed Wordpress and may skip the next step.

2. Now you can download and install Wordpress. Information on how to do this can be found at: Installing Wordpress from the Wordpress codex (see the Resources section below).

In addition, for Windows users, the two tutorials below also describe how to install everything needed here:

Install WordPress Locally 1 Of 2 « Weblog Tools Collection
How to Install WordPress on Windows

Getting Started

3. The first step here is to create a folder for our theme in Wordpress's theme directory
a. Navigate to our previously created "blue-green-blast" folder; Cut or Copy these files: index.html, style.css, ie_fixes.css and the images folder
b. Now, navigate (in your operating system) to the folder where Wordpress is installed. You may have this installed in Apache's htdocs folder. For instance, this may be located within these folders: Apache Software Foundation > Apache2.2 >
htdocs. If you installed wordpress into it's own folder (usually named blog or wordpress), click that folder as well
c. From here, we will navigate to the themes folder. That is found in wp-content > themes
d. In this folder is where we will add a new folder or directory for our theme. Create a folder named blue-green-blast. Paste everything into here. Now, change the name of index.html to index.php



e. In the installation step, you probably created a Username and Password to login to Wordpress; log in and click Appearance in the Admin panel's left menu. From here, you should be able to find the folder title blue-green-blast. Click Activate and then right-click Visit Site to see the website in a New Tab



f. As you can see, the styling is not applied (our stylesheet link is broken). This will be handled in our next step

Beginning The Conversion

In this section, a lot of what I learned was the result of following several tutorials that I should list here. They are So you want to create WordPress themes huh? from WpDesigner.com, So You Want To Create Wordpress Themes Huh?- The Remix- this deals with creating a Thematic child theme, and Creating a Wordpress Theme- Part 1, Fantastic Web Design's Gimp specific tutorial.

4. Open a text editor and open the file "index.php" from within our theme's folder
a. So far, we have:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page title</title>

<link rel=stylesheet type="text/css" href="style.css" media=screen>
<!--[if gte IE 6]>
<link href="ie_fixes.css" rel="stylesheet" type="text/css" media="screen">

<![endif]-->
</head>
<body>

...

</body>
</html>



b. Now, we will work on the header area. Notice the changes to our doctype and the html and head tags in bold. Change the code as shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- our main stylesheet -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>



*Note: I fixed the code above, as the original code shown did not pass XHTML validation.

c. After checking the look of the theme in both Firefox and Internet Explorer 7 with and without the ie_fixes stylesheet, it looks like Wordpress's rendering environment already handles IE7's layout issues, so I left out the fixes stylesheet (for now).

d. The next step in this process is to change the blog title to reflect our Wordpress site. Change <h1>My Blog</h1> to <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>. And, we change the blog subtitle as well adding this between our paragraph tags: <p><?php bloginfo('description'); ?></p>. What this process does is add a link to our Wordpress site's home page onto our blog's title.

e. Finally, we get to the possibly most important steps in our conversion process: the Wordpress Loop. The Wordpress Loop is basically what puts each and every post on the page. It will be used in the index page, single post page and several other pages in our theme. More information can be found at Wordpress.org- The Loop. Now we will replace our Lorem Ipsum text on our front page. Type the following below the <div id="content"> tag in our index.php page's code:


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



f. The following goes after the </p> tag just before our div that closes the content section:


<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>



g. For this part, we will refer to the page in Wordpress's codex, Template Tags (see Resources at the bottom of this tutorial). We are going to replace the generic "Post 1" title with our actual blog post titles, and of course a link to the associated post. Just after the <h2> tag, type <?php the_title(); ?>.

Now, we will place links to the post around our titles and add a class (for specialized CSS) by modifying our code: <h2 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>.

Next, we will replace our dummy Lorem Ipsum text with the real content. Replace the Lorem Ipsum text and <p> tags with <div class="entry"><?php the_content(); ?></div>

You may already have a Wordpress blog with several posts, which will show up in this tutorial. But, if you don't, you may want to create dummy pages to test your theme. Enter WPCandy's Sample Wordpress Content. This handy xml file provides just that. Instructions on how to install can be found at their website. This is what I used for development. The look of the blog's index page thus far in Firefox and Internet Explorer 7 is shown in the screenshots below:



Conversion Details

5. Under this section, we will add each post's metadata including the date of post entry and author. To see how this will be formatted, we will refer to our labels image from the previous tutorial, shown below:



a. We will add the HTML tag and author code within the Loop first just below the post title as shown:


<h2 class="entry-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<h3 class="postdata">by <?php the_author(); ?></h3>



b. Now, we will add the date, but using the_date template tag does not display more than one post written on the same day (undesirable for our blog design). So, according to the Wordpress Codex, we must use the_time instead. Just next to <?php the_author(); ?>, type what is shown in bold:


<?php the_author(); ?>, dated: <?php the_time('n/j/y'); ?>, <?php the_time('g:i a'); ?>



c. The next parts borrow from the tutorial So you want to create WordPress themes huh?. In it, the author suggests adding a post ID and link titles to your posts. I will follow suit here; add the following written in bold:


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

<div class="post" id="post-<?php the_id(); ?>">

<h2 class="entry-title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<div class="entry">
<?php the_content(); ?>

</div>

</div>

<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>



d. Next, we will add navigation links that go from one page to the next. But unlike in "So you want to create WordPress themes huh?", we will place our navigation links at the top. Type this just below the content opening div:


<div id="content">

<div class="navigation">
<?php posts_nav_link(); ?>
</div>

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

Sidebar and Search Box

6. Now, we will work on the sidebar, where we will use Wordpress codes to generate our Pages, Categories, Archives and Account (login) information. Then, next is the Search box and sidebar 2 that will go in the upper right of our theme. After that, we will make both "sidebars" widget friendly

a. First, we need to add the code to generate our list of Pages in the blog. For this, we will again look to the Wordpress Code template tag page. Our h2 tag is now added to the Wordpress code below. We will also add a special class to our h2 tag for all widget titles. In the sidebar, type:


<!-- opens sidebar div -->
<div id="sidebar">
<!-- opens sidebar ul -->
<ul>
<?php wp_list_pages('depth=3&title_li=<h2 class="widget-title">Pages</h2>'); ?>
</ul>
<!-- closes sidebar ul -->
</div>
<!-- closes sidebar div -->



Here, we added ul tags because the code Wordpress generates for pages are list items. We added a widget-title class, specified a depth of 3 to accommodate our three sidebar icon designs and set the auto generated Pages title to show our h2 tags and widget-title class by adding title_li=<h2 class="widget-title">Pages</h2>. Notice how we need to place an ampersand (&) between each parameter argument inside the quotes.

b. Second, we will put together our Categories section. Add the following just below what we previously typed and above the sidebar closing ul tag:


<?php wp_list_pages('depth=3&title_li=<h2 class="widget-title">Categories</h2>'); ?>
</ul>
<!-- closes sidebar ul -->
</div>
<!-- closes sidebar div -->



c. Third, is the archive section. Type the following (in bold):


<?php wp_list_pages('depth=3&title_li='<h2 class="widget-title">Categories</h2>'); ?>
<?php wp_get_archives(); ?>



In this case, Wordpress's auto generated code does not place these listings in a separate <ul> tag with a title, so we must add this part. If you check the source by going to View Source in your browser, you will see that the archive code generated is in the form of a list. So we must place a new unordered list around it as shown in bold below:


<li class="archives"><h2 class="widget-title">Archives</h2>
<ul>
<?php wp_get_archives(); ?>
</ul>
</li>



d. Last and fourth is a log in and log out link, so blog owners can edit their site on the fly. Using the function reference page Function Reference/wp login url, we will specify a log in that redirects to the same page:


<?php wp_get_archives(); ?>
</ul>
</li>
<li class="log-in-out"><h2 class="widget-title">My Account</h2>
<ul>
<li>
<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
</li>
</ul>
</li>



...And we provide the logout link just below the login link:


<li class="log-in-out"><h2 class="widget-title">My Account</h2>
<ul>
<li>
<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
</li>
<li>
<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
</li>
</ul>
</li>



e. Continuing, if you actually used the login link it logs in and does nothing! You can't edit any pages or anything. So now, we need to check if the user is logged in to display a message and link to the admin panel:


<li class="log-in-out"><h2 class="widget-title">My Account</h2>
<ul>
<?php if(is_user_logged_in()){
echo "<li><span class=\"login-message\">Welcome registered user:</span></li>"; wp_register('<li>',' (Edit Site)</li>');} ?>
<li>
<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>



We added a class to our Welcome message so we can style it later. You may have noticed the two backslashes before the quotes around our class name. These are escape slashes. If these were not there, the PHP parser would view the second quote after the echo statement as closing the statement.

f. Now, we will add the search box to the upper right sidebar-2 div. Scroll up to the top of our code and look for <div id="sidebar-2">. In this case, I went to the Function Reference/get search form page and used the first example (what you get with the standard code) and modified it to look like our searchform. Copy and Paste what is below:


<div id="sidebar-2">
<form method="get" id="searchform" action="<?php bloginfo('url') ?>" >
<div><label class="screen-reader-text" for="s"></label>
<input type="text" value="Enter Your Query" name="s" id="s" onfocus="if (this.value == 'Enter Your Query') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Query';}" />
</div>
</form>
</div>



The added bit of Javascript beginning with onfocus is thanks to the article Getting Text in your WordPress Search Box by C. Bavota. This script makes the title disappear when a visitor clicks in the box, then reappear when the visitor clicks outside of the box.

g. Next, we are going to place our icon from the earlier tutorial in this series next to the Search form and place it in a Submit button. If you recall, we placed an image of a magnifying glass in our theme's images directory. We will now place that on the website. Type or copy and paste what is in bold:


<input type="text" value="Enter Your Query" name="s" id="s" onfocus="if (this.value == 'Enter Your Query') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Query';}" />
<input type="image" name="s" src="<?php bloginfo('template_directory'); ?>/images/mag_glass.gif" />
</div>
</form>



<?php bloginfo('template_directory'); ?> displays in our url the location of the template's directory and then we specify the image's location relative to there.

Widgetizing the Sidebars

7. Most modern Wordpress themes have a sidebar or more than one that is widgetized. If you're in the Admin panel and click Appearance in the left panel, you will see a section called Widgets. If your sidebars or any section of your site is "widget friendly", you would see a section to drag and drop other components (such as a Calendar and Tag Cloud) into the sidebar, replacing what is currently there. Our theme isn't widget ready. Luckily, in that section of the Admin panel, we are provided a link: Widgetizing Themes

a. I copied and pasted the code needed for this part from the Widgetizing Themes page. I will give that here in bold:

*I changed the code in this section after seeing that if you drag a widget to the sidebar, the login information dissappears!


<ul><!-- opens sidebar ul -->
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<?php wp_list_pages...
...
</li>
<?php endif; ?>
<li class="log-in-out"><h2 class="widget-title">My Account</h2>
<ul>
<?php if(is_user_logged_in()){
echo "<li><span class=\"login-message\">Welcome registered user:</span></li>"; wp_register('<li>',' (Edit Site)</li>');} ?>
<li>
<a href="<?php echo wp_login_url( get_permalink() ); ?>" title="Login">Login</a>
</ul><!-- closes sidebar ul -->
<li>
<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
</li>



b. Now, for the Admin panel to recognize the widget friendly sidebar, we need to register it via a functions.php page. Create a new file named functions.php and save it in the blue-green-blast folder. Type the following into functions.php:


<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>



c. I went ahead and placed a widget in the sidebar, clearing what was previously there. Checking the code by viewing the source code, I saw that the class name next to the auto generated h2 tags is "widgettitle", but to match with our theme, we need to name the class "widget-title". This is handled by modifying our functions.php code:


<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
?>



d. We're not done yet. We need to widgetize our second sidebar in the header:


<!-- opens sidebar-2 div -->
<div id="sidebar-2">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2) ) : ?>
<form...
...
</form>
<?php endif; ?>
</div>
<!-- closes sidebar-2 div -->



Notice the number 2 inside the !dynamic_sidebar() part for the second sidebar. We also need to modify our functions file once more to recognize two sidebars:


<?php
if ( function_exists('register_sidebar') )
register_sidebars(2, array(
'before_widget' => '<li>',
'after_widget' => '</li>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
?>



e. We had to add li tags before and after each new widget so it will fit in with our existing ul structure in the main sidebar. The problem is that now our sidebar-2 produces invalid code. The li tag has no corresponding ul tag. So, we will add that to sidebar 2 (and hide it with CSS later):


<!-- opens sidebar-2 div -->
<div id="sidebar-2">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2) ) : ?>
<li><form...
...
</form></li>
</ul>
<?php endif; ?>
</div>
<!-- closes sidebar-2 div -->

The Footer

This is the final section in which we will use Wordpress PHP codes. We will replace the code we have with a copyright symbol and code that displays the name of our blog. As well, we will put a designer link that links back to my Portfolio site ;). (This is optional).

a. Change the footer as shown below:


<div id="footer">
<p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
<p class="author-link">Theme: Blue Green Blast,
designed by <a href="http://www.jgpws.com/portfolio/">Jason Gonzalez</a></p>
</div>



Instead of using php the_date, the Wordpress tag, I used the general php tag php echo date('Y') to specify the year. For some reason, Wordpress's code shows the year of the last post.

CSS Fixes- Sidebars

I was considering if I should save all of the new CSS fixes for the final tutorial or use them in this one. I decided to include them here, so we will have a more complete looking website by the end of this tutorial. We will set the sizes for our list items in the sidebar, customize our posts and more.

a. The first thing we must do is get everything looking consistent in each browser- specifically in Firefox (a standards browser) and Internet Explorer 7. If you are on Windows, open your index.php page in both browsers. Other OS readers can open any two browsers as most of the other browsers are standards compliant. I will only use the above mentioned browsers in this tutorial. Starting from the top, we can erase the padding and margins around the search box in the sidebar-2 div. Open your style.css file in your text editor and type this below the sidebar style rule:


}

/* sidebar 2 */
#sidebar-2 ul {
margin: 0;
padding: 0;
}



b. Next, we want to get rid of the bullet next to the top level list items in both the sidebar and sidebar-2. Since this is a shared rule, we can target both sidebars by adding this below the closing sidebar curly brace:


/* sidebar */
#sidebar {
width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
padding: 20px; /* add padding */
float: left;
}

#sidebar ul, #sidebar-2 ul {
list-style-type: none;
}



This gets rid of all of the list bullets, but don't worry, we will add in our icon bullet items later.

c. If you have the labels image with our design handy, you will see that all of the lists items and their levels are aligned left. We will take care of that in the following style rule:


padding: 20px; /* add padding */
float: left;
}

#sidebar ul {
margin-left: 0; /* IE 7 */
padding-left: 0;
}

#sidebar ul, #sidebar-2 ul {



d. Next, we can add the list item decorations. Type this after the previous style rule:


#sidebar ul li li {
list-style-image: url(images/redpixelbullet.png);
}

#sidebar ul li li li {
list-style-image: url(images/arrowbullet_red.png);
}

#sidebar ul li li li li {
list-style-image: url(images/arrowbullet_gray.png);
}



Let's push the ul list items to the right to line up with the titles:


#sidebar ul {
margin-left: 0; /* IE 7 */
padding-left: 0;
}

#sidebar ul ul {
margin-left: 18px;
}

#sidebar ul ul ul {
margin-left: 0;
}



Now, we can style the text and links in the list items by targeting the whole sidebar div and adding link styles. We will style the titles separately:


#sidebar {
width: 251px; /* width is set minus the 20px padding, according to the CSS box model */
padding: 20px; /* add padding */
float: left;
font: bold 12px/18px Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
}

#sidebar a {
text-decoration: none;
}

#sidebar a:visited, #sidebar a:link {
color: #FFB273;
}

#sidebar a:active, #sidebar a:hover {
color: #FFFFFF;
}



e. Next, we need to add the image behind each widget title. At the very bottom of the style sheet, add the following:


/* classes and ids */
.widget-title {
background: url(images/button.png) no-repeat;
width: 160px;
height: 40px;
padding: 12px 0 0 12px;
color: #FF7400;
}



Now that we added in our widget title background images, you may notice that our titles are too close to the end of the list items above them. Let's fix that. Go back to the #sidebar ul rule and add the following beneath it:


#sidebar ul li {
padding-bottom: 20px;
}



Add this to the #sidebar ul li li style rule:


#sidebar ul li li {
list-style-image: url(images/redpixelbullet.png);
padding-bottom: 0;
}

CSS Fixes- Header and Everything Else

f. Time to work on the header. Type the following below the #header h1 style rule:


#header h1 a:visited, #header h1 a:link {
color: #FFFFFF;
text-decoration: none;
}

#header p {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
font-style: italic;
margin-top: -6px;
}



g. We can now work on the main part of the page, the content area and its associated posts. In style.css, type the following under classes and ids to style the entry-title class:


.entry-title a:visited, .entry-title a:link {
color: #FF7400;
text-decoration: none;
}

.entry-title a:active, .entry-title a:hover {
text-decoration: underline;
}



Next, style the post time and date info:


.postdata {
color: #00BBBB;
margin: -6px 0 6px 0;
}



Let's add 20 pixels between each post:


.post {
padding-bottom: 20px;
}



h. Now, we can style the navigation link at the top, general post links and the welcome text when you login to the Admin panel. At the bottom of the style sheet, type:


.navigation {
font: bold 12px Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
padding-bottom: 20px;
}

.navigation a:visited, .navigation a:link {
color: #FF7400;
text-decoration: none;
}

.navigation a:active, .navigation a:hover {
text-decoration: underline;
}



To style all of our links, type the following after the final h6 tag as shown in bold:


h6 {
font-size: 8px;
}

/* link styles */
a:visited, a:link {
color: #FF7400;
}

a:active, a:hover {
color: #BF7130;
}



For the login message, type in:


.login-message {
color: #FFFFFF;
}



i. The next section to style is the search box in sidebar 2. Type this below the sidebar 2 rule:


#sidebar-2 #searchform input#s {
border-top: 1px solid #666666;
border-left: 1px solid #666666;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
color: #666666;
background-color: #CCCCCC;
margin-right: 6px;
}



j. Finally, we must style the footer, then this part of the tutorial will be over. Type the following under the #footer style rule:


#footer p {
font-family: Georgia, "Times New Roman", "Nimbus Roman No9 L"/*Linux*/, serif;
color: #FFFFFF;
}

#footer a:visited, #footer a:link {
color: #FFFFFF;
}



Then under classes and ids, type this for our author link:


.author-link {
font-size: 10px;
}



k. One more thing to do is to format the style sheet so proper information shows up in the Admin panel. We need to add a proper title, description and so forth. At the very top of the style sheet, add these special comment tags:


/*
* Theme Name: Blue Green Blast
* Description: Blue Green Blast is an attractive theme that uses a complimentary
blue-green and red-orange color scheme. It features two widget-friendly sidebars,
a custom login section and a custom searchbox.
* Author: Jason Gonzalez
* Author URI: http://www.jgpws.com/portfolio
* Tags: two-column, right-sidebar, blue-green, simple
* Version: 0.1
*/



Screenshots of the front page's design in Firefox and IE7 are below:





By now, this can be considered a fully functioning website, but it still isn't a fully functioning blog. Blogs need the ability for readers to post and view comments, and Wordpress blogs have special requirements for posts, pages and single page. So, if you are looking to create a design built on top of a content management system, you can stop reading here. But, to make our design blog specific, we will do that in our next and final tutorial: Converting a Static HTML Site into a Wordpress Theme- Part 2.

Resources

*some links are text only, due to limitations of links to the same site in a Squidoo lens.

Wordpress Installation resources:

Installing Wordpress
WAMP Server
XAMPP for Windows
MAMP
XAMPP for Mac OSX
HOWTO: Installing and Running WordPress on Ubuntu GNU/Linux ~ Moving to Freedom
Install WordPress Locally 1 Of 2 « Weblog Tools Collection
How to Install WordPress on Windows

Other Tutorials:

So you want to create WordPress themes huh?
So You Want To Create Wordpress Themes Huh?- The Remix
Creating a Wordpress Theme- Part 1
Getting Text in your WordPress Search Box

Wordpress Codex pages:

Wordpress Codex
The Wordpress Loop
Template Tags
Function Reference
Function Reference/wp login url:
http://codex.wordpress.org/Function_Reference/wp_login_url
Function Reference/get search form:
http://codex.wordpress.org/Function_Reference/get_search_form
Widgetizing Themes
http://codex.wordpress.org/Widgetizing_Themes

Sample Content:

WP Candy- Sample Wordpress Content

More Wordpress Resources on Amazon

If you want to go much further with designing themes and WP in general, these books look to be good references.
Loading

Questions/Comments?

If you have any questions or comments about this tutorial, leave them here and I will answer them to the best of my knowledge.

submit
Show All

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 »

Feeling creative? Create a Lens!

Explore related pages

Related Tags