WordPress themes is the most used and popular blogging platform around the web. Its flexibility, usability and customizability are the main reasons people regard WordPress so high. Another reason is the huge array of themes available for WordPress – you can create almost anything, from online magazines to advanced e-commerce businesses. wordpress themes You can either get themes for free or pay for them. Of course, you get what you pay for — yet don’t be too eager to spend your money on something you might not even need. If you’re just starting out with WordPress I suggest reading Choosing a WordPress Theme: Free or Premium? After that you might consider whether you really want to pay for that premium theme. wordpress themes If the answer is no, continue reading and check out these 80 professional, beautiful and free WordPress themes from 2012 — the best free themes that can be found!
If you started with an HTML ( + CSS) website, you don’t have to throw it all away when moving to WordPress. You can convert your HTML into WordPress and run your (now more powerful) website on the dynamic WordPress platform.
Or maybe that’s not the case. Perhaps you are just wondering how to convert a client’s HTML design into a fully-fledged WordPress theme. Or maybe you would like to learn basic WordPress (+ PHP) programming from the more-familiar HTML side.
Whatever the reason you are here today, this WordPress tutorial will introduce you to the basics of creating a WordPress theme from HTML. So, get a code editor (I use and recommend Notepad++, and SublimeText is another great option) and a browser ready, then follow this simple guide to the end.
Naming Your WordPress Theme
First things first, we have to give your theme a unique name, which isn’t necessary if you’re building a theme for your website only. Regardless, we need to name your theme to make it easily identifiable upon installation.
General assumptions at this point:
- You have your index.html and CSS stylesheet ready. If you don’t have these files, you can download mine for illustration purposes
- You have a working WordPress installation with at least one theme e.g. Twenty Fourteen
- You have already created a theme folder where you’ll be saving your new WordPress theme
Let’s get back to naming your WordPress theme. Open your code editor and copy-paste the contents of your stylesheet into a new file and save it as style.css in your theme folder. Add the following information at the very top of the newly-created style.css:
/*Theme Name: Your theme's name Theme URI: Your theme's URL Description: A brief description of your theme Version: 1.0 or any other version you want Author: Your name or WordPress.org's username Author URI: Your web address Tags: Tags to locate your theme in the WordPress theme repository */
Breaking Up Your HTML Template into PHP Files
This tutorial further assumes you have your HTML template arranged left to right: header, content, sidebar, footer. If you have a different design, you might need to play with the code a bit. It’s fun and super easy.
The next step involves creating four PHP files. Using your code editor, create index.php, header.php, sidebar.php and footer.php, and save them in your theme folder. All the files are empty at this point, so don’t expect them to do anything. For illustration purposes, I am using the following index.html and CSS stylesheet files:
INDEX.HTML
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>How To Convert HTML Template to WordPress Theme - WPExplorer</title> <link rel="stylesheet" type="text/css" media="all" href="style.css"/> </head> <body> <div id="wrap"> <header class="header"> <p>This is header section. Put your logo and other details here.</p> </header><!-- .header --> <div class="content"> <p>This is the main content area.</p> </div><!-- .content --> <div class="sidebar"> <p>This is the side bar</p> </div><!-- .sidebar --> <footer class="footer"> <p>And this is the footer.</p> </footer><!-- .footer --> </div><!-- #wrap --> </body> </html>
CSS STYLESHEET
#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;}
.content{width:70%; border:1px solid #999;margin-top:5px;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;}
You can grab both codes if you have nothing to work with. Just copy-paste them into your code editor, save them, create the four PHP files we just mentioned and get ready for the next part. Open your newly-created (and empty)header.php. Login into your existing WordPress installation, navigate to Appearance –>> Editor and openheader.php. Copy all the code between the <head> tags and paste it into your header.php file. The following is the code I got from the header.php file in Twenty Fourteen theme:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width"> <title><?php afzoneha_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php afzoneha_head(); ?> </head>
Then open your index.html file and copy the header code (i.e. the code in the <div class= “header”> section) to your header.php just below the <head> tags as shown below:
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php afzoneha_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php afzoneha_head(); ?>
</head>
<body>
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header>
Then add…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
Adding Posts
Your HTML template is about to morph into a WordPress theme. We just need to add your posts. If you have posts on your blog, how would you display them in your custom-made “HTML-to-WordPress” theme? You use a special type of PHP function known as the Loop. The Loop is just a specialized piece of code that displays your posts and comments wherever you place it.
source : http://www.wpexplorer.com/create-wordpress-theme-html-1/
This Demo Content Brought to you by Momizat Team
1 Comments
Mary Jo
Thanks for this review. It helped clear things up for me!