Subscribe via RSS Feed
Premium WordPress Themes

TURNING YOUR HTML TEMPLATE INTO A WORDPRESS THEME

August 18, 2013 0 Comments

Current post is about converting HTML template to WordPress Theme.

First decide your custom theme name and create a new folder with this name. Copy image folder from your old website folder and paste it into the new folder.

GPnew2 Always create a backup of all the files that currently make up your static website

Now open your text editor, create the blank files to following the chart and save them to your new theme folder

The Basic File for Custom Templates

index.php   The main page file
header.php   For header part of the website
single.php   For single post file
sidebar.php   For Side bar of the website
page.php   For single page file
footer.php   For footer part of the website
Function.php   For special function

Pic 1

Copy the stylesheet used on your original site and then paste it into the theme folder for your WordPress theme. Next, rename the stylesheet that you just pasted into your new theme folder rename it as style.css.

Open style.css in your text editor and add the below stylesheet header at the top of file. This information is required to appear your theme on the Manage Theme screen located within WordPress.

/*

Theme Name: Your Theme’s Name.

Theme URL: Your Theme’s URL

Description: A few sentences describing your theme.

Author: Author’s Name

Author URL: Your website address.

Version: The current version number for your theme.

*/

Now save the changes and close the style.css.

TIPS2Preparing for the transition from your old website to WordPress, you will need to document the name of each of your web pages and its web address. Open your spreadsheet and label the first column File Name. Next, label the second column URL. Visit your website and write down the information in the spreadsheet. The spreadsheet look like the picture shown below

excelchart

                                                                                                

CREATING FUNCTIONS FILE

We need to add all features like Navigation Menus, Sidebars, thumbnail support and more to dynamically work in WordPress. In functions.php we need to add this piece of code to get a widget-ready sidebar. Open the already created blank functions.php files and paste the following code that shown on the image into it to get a widget-ready sidebar.

function

Now, we add the following code in functions.php. It will allow us to make changes to the background of theme when we would like to make changes. We navigate to Appearance | Background where we will find the custom background screen.

add_custom_background();

To add the feed links in our theme header , we add the following code into the functions.php.

add_theme_support( ‘automatic-feed-links’ );

Now put the end php closing tag  ?> and save to complete functions.php

Your functions.php file looks like following picture

functionpage

GPnew2Always use comments above the code. It will be helped to understand the functionality of the code.

Now we open the sites original index.html and separate the template into four sections which are header.php, sidebar.php, footer.php and index.php. Then cut the code from main html file and paste into the blank files which we already made as follows the name.

 

Start to create Header Template

Open the index.html file in any of your web editor and select the html code which follow the header comment tag and paste into blank header.php template. Below We have shown in image how to select header portion from index.html.

header

 

When building wordpress theme it’s important to add following codes on the top of header.php.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!–To tell the browser which language we using to create the web page–>

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>

 

<!–We need to add new head tag in our template–>

<head profile=”http://gmpg.org/xfn/11″>

<!–Dynamically display and a unique title for the web page–>

<title>

<?php wp_title(‘&laquo;’, true, ‘right’); ?>

<?php bloginfo(‘name’); ?>

</title>

<!–Meta information of the website–>

<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>;

 charset=<?php bloginfo(‘charset’); ?>” />

<<!–Link to the stylesheet–>

 <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />

 <!–Threaded comments–>

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

<!–Action Hook template tag–>

<?php wp_head(); ?>

</head>

header1

Codes under Head Tag

Now we put the following code in the place of site title

<a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a>

Your blog title will be dynamically changed through wordpress admin. Also when we have the navigation bar in header.php, we locate the unordered list responsible for displaying the navigation bar and replace all the part of navigation with this code:

<?php wp_list_pages(‘title_li=’); ?>

header2

You can see on a picture, I have been selecting all the navigation code and replace with the above code.

So, your header template is ready. Now we move to create the index.php template for the theme.

Creating the index.php template

Open the index.php file to enter the following tag at the beginning of index.php.

<?php get_header(); ?>

Also you have to add sidebar.php and footer.php templates into index.php. Place the following tag at the bottom of index.php.

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Now it’s time to concentrate on adding The Loop to index.php. The Loop is responsible to displaying content on your wordpress website. Find the section in index.php, where your content appears. Then paste this code just after the <div> tag that starts your content area.

<?php if (have_posts()) : ?>

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

Next you locate the place where your content headline appear and replace with the following codes. If the headline is surrounded by heading tag, then make sure that these template tags are encapsulated in them too.

<div id=”post-<?php the_ID(); ?>”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></div>

Now to include information on the author, category, post date and comment count, as well as a link to edit the post if we’re logged in. To display those things into your blog, place the following code into your template -

Posted in <?php the_category(‘, ‘) ?> by <?php the_author() ?> on <?php the_time(‘F jS, Y’) ?> | <?php edit_post_link(‘Edit’, ”, ‘ | ‘); ?><?php comments_popup_link(‘No Comments’, ’1 Comment’, ‘% Comments’); ?>

Now to display the page’s content. We need to place the following code in old content area which surrounded by <div> tags, so that the appropriate styles will be applied.

<?php the_content(‘Continue Reading…’); ?>

Enter the following line of code to end the loop

<?php endwhile; ?>

If blog is set to display a certain number of posts per page, then we will need a way to navigate between those pages. Add the following code to appear the navigation link in all pages.

<?php posts_nav_link(); ?>

Next you add the following the code

<?php endif; ?>

Now save the index.php and we start to work on single.php template.

Creating the single.php

Open the index.php and single.php file in your text editor and copy all of the contents from index.php and paste it into single.php. Now we will need to make some edits and addition to this template.

Now we start to edit our page. Look for the following code

<div id=”post-<?php the_ID(); ?>”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a></div>

Then replace with this code

<div id=”post-<?php the_ID(); ?>”><?php the_title(); ?></div>

Now look for the following code

<?php the_content(‘Continue Reading…’); ?>

Then delete Continue Reading… from this tag, because single.php displays the full post. The new code look like

<?php the_content(‘ ‘); ?>

 Next looking for the following tag

<?php posts_nav_link(); ?>

Replace the above tag with this following template tag

<?php previous_post_link(‘&laquo; % link’, ‘%title’); ?> <?php next_post_link(‘%link &raquo;’) ?>

Now we can easily switch to previous or next posts.

Next look for the end of the loop and add this following code above it

<?php comments_template(); ?>

Now save the single.php template

Creating the page.php

Open the single.php and page.php file. Copy all of the content from single.php and paste it into the page.php. Remove the following code

<?php previous_post_link(‘&laquo; % link’, ‘%title’); ?> <?php next_post_link(‘%link &raquo;’) ?>

Now save the file. Our page.php file is ready.

Creating the sidebar.php

Copy all the code which show between sidebar comment tag in your index.html file and paste it into sidebar.php. Leave all the tags responsible for styling the sidebar. Then, add the following code between the styling tags.

<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<?php endif; ?>

Now save the sidebar.php file.

Creating the footer.php

Open your index.html file and copy the footer section and paste it into footer.php file. Now add the following code next to opening footer styling tag.

<?php wp_footer(); ?>

Now save the footer.php

Your custom theme is complete. Now zip your theme folder and upload into wordpress as new theme. Open it in browser and take a screen shot and open in image editor paste it and resize the image into 300px*225px. Then save the image as screenshot.png and upload into your theme folder.

Acknowledge

WordPress 3 Sites Blueprint — Heather R. Wallace

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

Sign Up to read the rest of the content

Email will be used only for updates of our site

No Thanks