Register now or log in to join your professional community.
Write down easy and simple way to develop/design WordPress theme for beginners.
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:
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 */Do not leave out the (/*…*/) comment tags. Save the changes. This info tells WordPress the name of your theme, the author and complimentary stuff like that. The important part is the theme’s name, which allows you to choose and activate your theme via the WP dashboard.
Breaking Up Your HTML Template into PHP FilesThis 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 open header.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 wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <!--[if lt IE9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_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 wp_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 IE9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> <?php wp_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" />…anywhere between the <head> tags in the header.php file to link your stylesheet. Remember also to put the <html> and <body> opening tags in the header.php as shown above. Save all changes.
Copy the second section (i.e. <div class=”content”>…</div> from index.html to the newly-created index.php , and add…
<?php get_header(); ?>…at the very top and …
<?php get_sidebar(); ?> <?php get_footer(); ?>…to the absolute bottom. These three lines fetch the header.php, sidebar.php and footer.php (in that order) and display them in the index.php, which puts your code back together. Save all changes. At this point, your index.php file should look like:
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?>Then copy the content from the sidebar and footer sections in your index.html to sidebar.php and footer.php respectively.
