Develop WordPress Theme and Convert HTML to wordpress

Creating a WordPress theme is easy if you have some idea about PHP and you are good in HTML and CSS. Making a WordPress theme is nothing but a HTML page, broken down into several parts and pulling the post contents from the database.

You may also convert your HTML pages into WordPress site. Also by following this tutorial you may make a WordPress theme from a PSD or mockup file.

If you have created PHP pages by including header, footer, sidebar etc into a page then you are 50% advanced now to step into creating a WordPress theme.  The mandatory theme files are style.css (this is the main stylesheet) , index.php (main template file for the theme), comments.php (enables commenting) , screenshot.png  (appears as theme thumbnail).

Other WP theme files are:

rtl.css:  Enables changing styles from WP user dashboard.

front-page.php : For a custom  front page, different from other pages on the site.

home.php : It contain latest posts and strictly a template for front page.

single.php : This is the template file for single post.

single-{post-type}.php : A template file for custom post type.

page.php : A template file for individual page.

In the same way category.php, tag.php , taxonomy.php, author.php , date.php, archive.php , search.php , attachment.php , image.php , 404.php are the few more template files in a WordPress theme.

Let us create our basic WordPress theme or convert a HTML page to WP theme.  First of all create a folder in any name, for now suppose it is “Mytheme”.  Now create a PNG image file  with your design layout, features or just the “Theme name” on the image. This image is the thumbnail of a WP theme.

Creating the essential files: Now from your index (html) file copy the codes marking from the beginning of html to the closing tag of head.  Put <?php wp_head(); ?> just before the head closing tag. It will enables WordPress to load files by plugins. To load stylesheet and javascript files put similar lines like this- <link rel=”stylesheet” type=”text/css” href=”<?php echo get_template_directory_uri(); ?>/style.css”>. Make a file named header.php by pasting the codes. Now copy the sidebar to sidebar.php and footer to footer.php file.  Similarly put <?php wp_footer(); ?> just before the closing tag body.  Now create a file named index.php and put the codes there as follows-

<?php get_header(); ?>

Then put your body part.

<?php include (TEMPLATEPATH . “/sidebar.php”); ?>

<?php get_footer(); ?>

Make style.css file and put the css styling  codes there. In the beginning use this code-

/*

Theme Name: Your Theme name

Theme URI:  URL where your theme is published

Author: Author or developer of the theme who own this

Author URI: URL of the author profile

Description: A description about the theme.

Version: 1 (you may use any number, for now 1 and if you change to 1.1 then user will see a upgrade notification)

License: GNU General Public License v2 or later (Your license term)

License URI: http://www.gnu.org/licenses/gpl-2.0.html (license url)

Tags: light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready (some features by which users search themes on the wp directory and markets)

Text Domain: mythemeteam

 

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you’ve learned with others.

*/

 

 

Now you have static wp-theme. Let us make this a dynamic theme.  For this article just let us make the post filed dynamic. To do so use code like this on the body part-

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

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

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

<?php endwhile; ?>

<?php else : ?>

<h3><?php _e(‘404 Error&#58; Not Found’); ?></h3>

<?php endif; ?>

To use any image and files use code like this-

<a href=” <?php echo home_url(); ?> “><img src=”<?php echo get_template_directory_uri(); ?>/images/logo.png” alt=’logo’></a>

You can see that you can use php inside html in the wordpress theme. You may take a free wordpress theme and can practice editing the code pieces there. For more coding you may try https://codex.wordpress.org/Theme_Development and check our later posts about theme development.

 

Shamim Hoque
About Shamim Hoque 41 Articles
Shamim Hoque is an expert in web design and development field. He has designed and developed many websites in Wordpress, HTML and PHP. He has good experience in freelancing and writing articles too. Do you have any jobs or project you want to get done? Please use our "Contact" page.

1 Comment

Leave a Reply

Your email address will not be published.


*