Category Archives: HTML to Wordpress

html to wordpress, how to make wordpress themes, how to make a wordpress theme, theme wp,

Turning a Web Template into a WordPress Theme

Breaking the Mold by Turning a Web Template into a Standard WordPress Theme

WordPress counts more than 60 million users among its ranks, with a development community that numbers in the tens of thousands. Given statistics as impressive a these, it’d be easy to assume that the number of themes available for WordPress installations is as limitless, diverse, and impressive as the number of users who call the software their own. But that’s actually not true, as the design and development community at large seems to have settled into several easily-identifiable patterns when crafting themes for this content management titan. Indeed, a casual glance through any WordPress theme directory website reveals that most sites are comprised of two or three columns, a large header and footer, and the same tired typefaces and font families that have been used for years on blogs all around the internet.

One great way to bypass this seeming limitation of style is to forego the WordPress theme directories altogether and choose a theme from a regular web design directory. Web designers around the world are designing outstanding templates for websites not powered by WordPress, leaving out the PHP code in favor of placeholder text, and encouraging users to do their own handiwork to make the design come alive with content. This might sound intimidating, especially to those new to the WordPress software or XHTML and PHP in general. However, with a few simple steps and general guidance from the WordPress Codex and developer community, it’s easy to turn any web template into a robust WordPress theme. This process generally concerns “slicing” the theme into a header, footer, and content area, and injecting WordPress variables into the code to bring dynamic content to the otherwise-static page. Here’s how the process works.

Step 1: Defining the Header, Content Area, and Footer

Almost every WordPress theme splits the design into three content areas, which include the header and footer as well as a main content area. This main content area includes the published posts as well as at least one sidebar, and sometimes two. Though to goal is to achieve a design which visually breaks the mold of typical WordPress offerings, this basic three-part structure should still be followed as it’s the best way to ensure that dynamic content is pulled in the same way throughout the website. Using these three sections helps ease the process of titling pages, ending code, placing a copyright, and ensuring that there is a certain ease of use to the website.

The first step will be pulling the header out of the template file. Open up the template’s main design file (probably an “index.htm” filename or something similar). In that document, highlight everything from the very top of the file through to the end of the navigation elements. This will likely include meta tags, page title information, navigation, a masthead or header image, and a few script or CSS inclusions. This information should then be cut-and-pasted into a new, blank text file. Save that file as “header.php” and close it.

Next scroll down to the end of the file. Find the last line of code, indicated by a < /html > tag, and highlight everything from that closing tag up to the end of the main content area (likely the < /div > tag which closes the sidebar or content column). Cut that code and paste it into a new, separate text file. Save that file as “header.php” and close it.

Finally, with the remaining code, go to the text editor’s “File” menu and choose “Save As.” Save the file as “index.php” and close it. The template has now been sliced into the three key parts of any WordPress theme and it can now be easily managed and modified as variables, PHP code, and dynamic content are all added into the mix.

Step 2: Turning a Static Header into a DynamicWordPress Header

The theme’s header will be one of the easiest files to modify, as its code will require just a few small adjustments and additions. The easiest way to begin modifying this template is to add the actual “wp_head” tag. This simple tag is responsible for including the WordPress version number and other important information into the header when the page is rendered using the WordPress software. Simply paste the following tag into the header file right after the < head > tag:

<?php wp_head(); ?>

Next, the page must be styled using the theme’s stylesheet file using WordPress variables. First and foremost, rename the downloaded web template’s included stylesheet file to “style.css,” which is the widely-accepted standard name for the stylesheet included with a WordPress theme. Next, include the following meta tag in the file to call the stylesheet (and delete any similar tag which may have been inserted by the original theme developer):

<link rel="stylesheet" href="< ?php bloginfo( 'stylesheet_url' ); ? >" type="text/css" />

The important thing in the above tag is the actual PHP variable, which tells the theme to pull the stylesheet from the relative theme root folder rather than from a hardcoded server path. Finally, it’s time to place WordPress variables in the actual < title > tag so that the blog name and page title can be dynamically placed into it for display to end users. Here’s what that looks like:

<?php wp_title(-); ? > < ?php bloginfo( 'name' ); ?>

These two tags should be placed between < title > and < /title >. The first one displays the actual post or page title while the second one is responsible for printing the name of the blog. They can be arranged in any order and the hyphen placed into the “wp_title” tag can be defined as any ASCII character to serve as a separator between the blog and page title elements.

These are the last of the WordPress variables to be placed into the header. Developers will want to change the navigation area to reflect the site’s structure, as these links may not line up with those defined by WordPress. Make sure the home, archives, about me, and other links go to the proper pages within the site.

Step 3: Filling in the Web Template’s Footer Information

Most web templates are designed to give the original theme developer some credit in the footer area, often pairing it with a link to the author’s site, a copyright, and other links such as those to the wider template directory. It’s fine to keep these in the footer, especially since free themes (and free theme developers) rely on these referral links to generate future business. They can be removed by the end user as their tastes demand, however, and that process should be completed first.

After the content in the footer has been updated to the satisfaction of the WordPress administrator, it’s time to place one simple variable into the footer so that WordPress can place its own basic copyright information (both printed on the page and included in XML tags behind the scenes). This is done by including the following tag:

<?php wp_footer(); ?>

With this included, and the administrator-desired information placed into the footer, the alteration of this template is now complete. It can be saved and is ready to upload to the server.

Step 4: Bringing WordPress Content to the Main Index File

Two things are now necessary to complete the actual XHTML elements of the content area of the web template. Those two things will see dynamic WordPress content brought into the sidebar area, and will enable the display of published content on the page. The sidebar is, without a doubt, the easiest thing to modify and bring up to WordPress standards. Start by highlighting all of the existing static code in the sidebar < div > area and cutting it. Then paste that information into a new text file, saved as “sidebar.php.” Eliminate any content that should not make it into the final theme, and then paste the following variable below that content. This variable will allow the placement of dynamic WordPress widgets below the hardcoded static content.

<?php if ( function_exists ( dynamic_sidebar() ) ) : ?>

With that variable added to the sidebar content, the “sidebar.php” file itself is now complete and can be saved. It is now ready to be uploaded to the server. All that remains is the standard WordPress sidebar inclusion variable which will serve to bring the sidebar’s content into the main index page. The variable below should be pasted into the same < div > element that the static sidebar content was just removed from:

<?php get_sidebar (); ?>

The sidebar area is now complete and focus can shift to the main content area of the website. This is where the content from pages and posts will be displayed and it requires inclusion of the standard WordPress Loop in order to make that happen. A standard WordPress Loop is given in the example below, but it’s important to note that this is an exceedingly simple version of what is often considered the “heart” of WordPress programming. There are many more variables which can be used, and a combination of XHTML and CSS can be used throughout the loop to give it a truly stunning appearance on each page as the author wishes:

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

<h2> <?php the_title(); ? > </h2>

<span> <?php the_date(); ?> </span>

<p> <?php the_content(); ?> </p>

<?php endwhile; else: ?>
<span><?php _e('There are no posts here! Go back and try again?'); ?></span>
<?php endif; ?>

With this code placed into the file, it should now be saved as it is ready for upload to the server. Also, since this template will also work to display categories, archives, single entries, and user-created pages, it should be saved with the following file names using the “Save As” feature in the “File” menu:

– archive.php
– category.php
– page.php
– single.php

With all of the PHP files updated with WordPress variables and completely saved, the web template is just one simple step away from becoming a regular WordPress theme, capable of handling any content the software throws at it. That simple step involves modifying the “style.css” file created earlier in this tutorial so that it’s header includes basic theme information. This information will allow the theme to be seen by the WordPress Dashboard, allowing administrators to view, preview, and activate it as they wish. Here’s how that process is completed.

Step 5: Turning the Stylesheet into a Theme Identification Document

Every WordPress theme is identified using “commented” lines of CSS code in the theme’s “style.css” file. This method has been used since the early days of WordPress and has proved so effective, and so easy to use, that it was also adapted to site plugin files for their identification in the Dashboard as well. Each line of this information needs to be filled out, and authors should do their best to fill everything in as accurately and fully as they can. It only helps to identify the theme and set it apart from the others once uploaded to the server. Here’s the commented CSS code which will need to be altered:

/*
Theme Name: Web Template Theme
Theme URI: http://link-to-actual-web-template-here.com
Description: Place a brief description of the theme in this area, as it will be displayed in the Dashboard itself and will help identify the theme to administrator users.
Author: Your Name
Author URI: http://your-website-here.com
Version: 1.0
Tags: list, creative, tags, which, describe, the, design elements, of the, theme, separated by commas
*/

This information, once completed, gets placed into the “style.css” file immediately at the top of the document. This means it appears before any actual CSS code is added to the document. Failure to include the information in that way will see it completely ignored by the Dashboard. The immediately consequence of this is that the theme will not be displayed in the Dashboard at all, rendering it unable to be activated until the problem is remedied.

Step 6: Bug Test and Activate the New WordPress Theme

Developers need to avoid making a common mistake: Overestimating their ability to correctly copy code and custom-create a WordPress theme on the first attempt. Even the most seasoned developers have been known to make mistakes, and that means that an effective bug test is the key to ensuring a theme’s high quality and usability. Be sure to preview the theme in the Dashboard before activating it; after activating it, browse the website and make sure that everything is displayed properly and according to plan.

If everything looks as great in real life as it did when the web template was first downloaded, then the process is complete and a new, unique WordPress theme will grace the appearance of a blog which almost fell victim to uninspired, uniform WordPress-targeted design.

HTML to WordPress: Header.php

Now that you have your files all set up for converting your HTML template to WordPress, you now want to start changing the code of your HTML template to a WordPress compatible theme.

Today we are going to work on your header.php template. You will need to open your Header file from the folder you created in the last step in order to begin this process.

Next you will want to open up your HTML document and copy and paste the code from the top of the template all the way down to just BEFORE the DIV that contains your sidebar and/or content. This will be the core of your header.php file in your new WordPress theme.

For example:

(Click to view larger.)Next you will want to fill in the header with some code that will help convert the HTML document into a WordPress compatible template!

Replace the code with the following code, or the code from your favorite WP theme:

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico" type="image/x-icon" />
<?php wp_head(); ?><meta name="verify-v1" content="53/AHENoYym8RbXpIdO+Aa2GaVPVpX8G79ehG6+NYTw=" />
</head>

Your header.php file should look something like this:

(Click on image to view larger.)Please note that in WordPress the stylesheet is separate from the HTML document. But this code above is designed to link to the stylesheet you defined in the previous tutorial. If you have any CSS located within the header of your template, be sure to take it out and just add it to your external stylesheet.

Now this is actually turning out to be pretty easy don’t ya think? Going from static website to WP is definitely a smart move for EVERYONE who markets their business online!

Next week we will tackle the sidebar. Be sure to subscribe to this blog in your feed reader or by email so you don’t miss a single step!

Part 1: HTML to WordPress

Creating your own WordPress theme is really just taking your regular HTML website and converting it to a WordPress theme, making it compatible with the WordPress blogging software.

Learning how to convert an HTML theme to WordPress is also a great task to learn if you would like to take your current HTML website or boutique and create a matching WordPress theme so that your Internet Business can also have a blog!

In this tutorial series we will cover the simple steps you will need to take in order to convert an HTML template to a WordPress theme.

Step 1: Set Up Your Files

The first step to creating a WordPress theme is setting up the theme files on your computer.

First you will want to create the main folder that will hold all your theme files. This typically is the name of your WordPress theme.

Next you will want to add the following text files to your new spiffy WP theme folder:

  • Index.php
  • Header.php
  • Footer.php
  • Functions.php
  • Sidebar.php
  • Comments.php
  • Page.php
  • single.php
  • style.css

Note: These are just your basic theme files needed. If you have any additional sidebars you will need to make an php file for these as well.

In Part 2 of this series we start chopping up our HTML theme and placing the code into the PHP files. Be sure to subscribe to this blog in your feed reader or by email so you don’t miss a single step!