Step by step instructions on how to clone/copy a wordpress template using simple editor and little knowledge of HTML.

There are plenty of websites with WordPress tutorials, but I couldn’t find a decent website that teaches “How to build a WordPress theme” from scratch. In this tutorial, we will cover some basic steps to create a WordPress theme. Before we go further, let’s talk about the things we need while developing a WordPress theme.

Any basic HTML template that we convert into WordPress theme. Text editor, Sublime Text 2, Notepad ++ or any other of your choice browser to test our development stages Apache Server with WordPress installed, or WordPress app from Bitnami a little knowledge of HTML, CSS, PHP

What is the structure of WordPress theme

If you’ve ever edited a WordPress theme, you would have probably noticed that there are different theme related files in the main folder. To make your theme work you should have at least two files in your main folder:

index.php – the main page template;

style.css – the stylesheet.

This is the minimum necessary to ensure that your theme work. But of course, in addition to these two files, there are more files, such as:

header.php, to display the header

sidebar.php, to display the sidebar

footer.php, to display the footer

page.php, template for pages

single.php, template for a single post

archive.php, template archive posts

comments.php, comments template file

functions.php, theme functions file

and many more files

First, we will work with index.php, header.php, footer.php, sidebar.php, and style.css to create the structure of the theme and later we add necessary functions multiple PHP-files.

Download the zip file, we will use this HTML template to create a full working copy of WordPress Theme.

What we just downloaded

The file we just download is an HTML template. You will see following files in the folder when you extract the files.

index.html is the main layout file

folder css, there are style files

Folder images, picture

folder js, which contains the scripts

How to create WordPress theme files

Now we will create our theme files. Create a new folder, and create empty files with following names in it:

style.css

index.php

header.php

sidebar.php

footer.php

Open the style.css and add these lines (Choose a good name for your theme ):

/* Theme Name: MyTheme Theme URI: https://ssiddique.info Author: Shahid Siddique Author URI: https://ssiddique.info Description: My first theme Version: 1.0 License: Creative license */

Now open index.html and copying header.php which is going to be common for all the pages.

<!DOCTYPE HTML> <html> <head> <title>Striped by HTML5 UP</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-panels.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel-noscript.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-desktop.css" /> <link rel="stylesheet" href="css/style-wide.css" /> </noscript> <!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]--> </head> <body class="left-sidebar"> <!-- Wrapper --> <div id="wrapper"> <!-- Content --> <div id="content"> <div id="content-inner">

Now we will create an index.php. Copy everything in post section in index.php

<!-- Post --> <article class="is-post is-post-excerpt"> <header> <h2><a href="#">Welcome to Striped</a></h2> <span class="byline">A free, fully responsive HTML5 site template by HTML5 UP</span> </header> <div class="info"> <span class="date"><span class="month">Jan<span>uary</span></span> <span class="day">14</span><span class="year">, 2013</span></span> <ul class="stats"> <li><a href="#" class="fa fa-comment">16</a></li> <li><a href="#" class="fa fa-heart">32</a></li> <li><a href="#" class="fa fa-twitter">64</a></li> <li><a href="#" class="fa fa-facebook">128</a></li> </ul> </div> <a rel="nofollow" href="#" class="image image-full"><img src="images/n33-robot-invader.jpg" alt="" /></a> <p> Some text </p> <p> Some text </p> </article> <!-- Pager --> <div class="pager"> <!--<a href="#" class="button previous">Previous Page</a>--> <div class="pages"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <span>…</span> <a href="#">20</a> </div> <a href="#" class="button next">Next Page</a> </div> </div> </div>

Now copy sidebar section to the sidebar.php

<!-- Sidebar --> <div id="sidebar"> <!-- Logo --> <div id="logo"> <h1>STRIPED</h1> </div> <!-- Nav --> <nav id="nav"> <ul> <li class="current_page_item"><a href="#">Latest Post</a></li> <li><a href="#">Archives</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> <!-- Search --> <section class="is-search"> <form method="post" action="#"> <input type="text" class="text" name="search" placeholder="Search" /> </form> </section> <!-- Text --> <section class="is-text-style1"> <div class="inner"> <p> <strong>Striped:</strong> A free and fully responsive HTML5 site template designed by <a rel="nofollow" href="http://n33.co/">AJ</a> for <a rel="nofollow" href="http://html5up.net/">HTML5 up!</a> </p> </div> </section> <!-- Recent Posts --> <section class="is-recent-posts"> <header> <h2>Recent Posts</h2> </header> <ul> <li><a href="#">Nothing happened</a></li> </ul> </section> <!-- Recent Comments --> <section class="is-recent-comments"> <header> <h2>Recent Comments</h2> </header> <ul> <li>case on <a href="#">Now Full Cyborg</a></li> </ul> </section> <!-- Copyright --> <div id="copyright"> <p> © 2013 An Untitled Site.<br /> Images: <a rel="nofollow" href="http://n33.co">n33</a>, <a rel="nofollow" href="http://fotogrph.com">fotogrph</a><br /> Design: <a rel="nofollow" href="http://html5up.net/">HTML5 UP</a> </p> </div> </div>

Add basic functions to WordPress theme

Now let’s write some basic functions in index.php file. As I said, this is the main file of the WordPress theme, for no we add all functions to index.php to display the page header, sidebar, and footer. At the very beginning of the file, insert a function to output header.php:

<?php get_header(); ?>

And at the very end – add functions to display the sidebar and the footer:

<?php get_sidebar(); ?> <?php get_footer(); ?>

If you are working with a different template, it is important to see the order your functions would go in index.php file. Sometimes get_sidebar goes first then content and at the last get_footer.

Now you can make changes in the header.php . for example you can change the font, style etc. by using echo get_template_directory_uri function:

<!DOCTYPE HTML> <!-- Striped 2.5 by HTML5 Up! html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>Striped by HTML5 UP</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700" rel="stylesheet" /> <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/skel-panels.min.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/init.js"></script> <noscript> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/skel-noscript.css" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style-desktop.css" /> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style-wide.css" /> </noscript> <!--[if lte IE 9]><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie9.css" /><![endif]--> <!--[if lte IE 8]><script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]--> <!--[if lte IE 7]><link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie7.css" /><![endif]--> </head> <!-- Note: Set the body element's class to "left-sidebar" to position the sidebar on the left. Set it to "right-sidebar" to, you guessed it, position it on the right. --> <body class="left-sidebar"> <!-- Wrapper --> <div id="wrapper"> <!-- Content --> <div id="content"> <div id="content-inner">

Now add wp_footer to the footer.php file.

</div> <?php wp_footer(); ?> </body> </html>

Setting header.php

Add a specific user language for the theme. Append tag HTML, as shown in the following line:

<html <?php language_attributes(); ?>

Now we set the title tag. We know the content is dynamic and heading will always be different on every page. Therefore, it is necessary to make a dynamic header. To do this, find the line that displays the title:

<title>Striped by HTML5 UP</title>

and replace it with the following code.

<title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'striped' ), max( $paged, $page ) ); ?> </title>

Change

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

with

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

which automatically detect encoding.

Now, before closing the head tag, add a function wp_head, which will load the standard scripts, styles, meta tags and other important information:

<?php wp_head(); ?>

Now Replace

<body class=”left-sidebar” >

with

<body class=”left-sidebar” <?php body_class(); ?>>

for tag body

Adding Blog entries section to the theme

Add the following code right before the opening tag article:

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

and add

<?php endwhile; ?>

after closing tag article.

We have just added a loop that will show number of entries which is configurable in theme settings.

Now add the class to the tag article:

<article class=”is-post is-post-excerpt” <?php post_class(); ?> id=”post-<?php the_ID(); ?>“>

To make the title dynamic and add the permalink every time new entry is referenced add the code in between header tag:

<header> <h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'striped' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?> </a></h2> <!-- <span class="byline">A free, fully responsive HTML5 site template by HTML5 UP</span> --> </header>

Replace the content part with the following code

<?php the_content(); ?>

In WordPress, there are multiple ways to display the date in the post. Replace the below code to show the date-time dynamically.

<span class="date"> <span class="month"><?php the_time('M'); ?></span> <span class="day"><?php the_time('j'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </span>

with

<span class="date"> <span class="month"> Jan<span>uary</span> </span> <span class="day"> 8</span> <span class="year">, 2013</span> </span>

After making changes to index.php file the new file looks like:

<?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <!-- Post Start --> <article class="is-post is-post-excerpt" class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>"> <header> <h2 class="entry-title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'striped' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?> </a></h2> </header> <div class="info"> <span class="date"> <span class="month"><?php the_time('M'); ?></span> <span class="day"><?php the_time('j'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </span> <!-- Note: You can change the number of list items in "stats" to whatever you want. --> <ul class="stats"> <li><a href="#" class="fa fa-comment">16</a></li> <li><a href="#" class="fa fa-heart">32</a></li> <li><a href="#" class="fa fa-twitter">64</a></li> <li><a href="#" class="fa fa-facebook">128</a></li> </ul> </div> <a rel="nofollow" href="#" class="image image-full"><img title="" src="/wp-content/themes/striped/images/n33-robot-invader.jpg" alt="" /></a> <?php the_content(); ?> </article> <!-- Post End --> <?php endwhile; ?> <!-- Pager --> <div class="pager"> <!--<a href="#" class="button previous">Previous Page</a>--> <div class="pages"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <span>…</span> <a href="#">20</a> </div> <a href="#" class="button next">Next Page</a> </div> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

Add thumbnails support in WordPress theme

To add thumbnails support in our WordPress theme, we add some basic functions to function.php file.

<?php if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); } ?>

To use these thumbnails in our blog entries, we need to make changes to index.php file.

Replace

<a rel=”nofollow” href=”#” class=”image image-full”><img title=”” src=”images/n33-robot-invader.jpg” alt=”” /></a>

with

<a href=”#” class=”image image-full”><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?></a>

Add sidebar functions in WordPress

To add widget support to the theme add register_sidebar function in function.php file.

// Register Sidebar function striped_sidebar() { $args = array( 'id' => 'sidebar-left', 'name' => __( 'Sidebar', 'striped' ), 'description' => __( 'Left Sidebar', 'striped' ), 'class' => 'striped-widget', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', ); register_sidebar( $args ); } // Hook into the 'widgets_init' action add_action( 'widgets_init', 'striped_sidebar' );

Now, in order to display a sidebar in a theme, you must call the function in your sidebar.php file.

// after logo <?php if ( ! dynamic_sidebar('sidebar-left') ) : ?> // before content <?php endif; ?>

Add pagination to WordPress theme

Open index.php and replace

<div class="pager"> <!--<a href="#" class="button previous">Previous Page</a>--> <div class="pages"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <span>…</span> <a href="#">20</a> </div> <a href="#" class="button next">Next Page</a> </div>

with

// $ Range - how many pages to display before and after the current page. function oriolo_pagination ($ pages = '', $ range = 3 ) { $ showitems = ($ range * 2 ) +1 ; global $ paged; if (empty ($ paged)) $ paged = 1 ; if ($ pages == '') { global $ wp_query; // $ Pages - the total number of pages z $ pages = $ wp_query-> max_num_pages; if (! $ pages) { $ pages = 1 ; } } // Here comes a conclusion navigation if ( 1 ! = $ pages) { echo "<div class = 'pager'>"; // The procedure for withdrawal of buttons with links to the first page and the previous // Added to the class button previous button with reference to the previous page if ($ paged> 1 && $ showitems <$ pages) echo "<a href = '". get_pagenum_link ($ paged - 1). "' class = 'button previous'>". __ ('Previous Page', 'striped'). "</a>"; // Adds a line with <div class = 'pages'> - within it are buttons with pages echo "<div class = 'pages'>"; // Button first page if ($ paged> 2 && $ paged> $ range + 1 && $ showitems <$ pages) echo "<a href = '". get_pagenum_link (1). "'> 1 </a>"; // Print all the other pages for ($ i = 1; $ i <= $ pages; $ i ++) { if (1! = $ pages && (! ($ i> = $ paged + $ range + 1 || $ i <= $ paged- $ range-1) || $ pages <= $ showitems)) { // Add the current page class active echo ($ paged == $ i)? "<a Class='active'>". $ I. "</a>": "<a Href='".get_pagenum_link($i)."'>". $ I. "</a>"; } } // Before printing the last page of buttons added to <span> ellipsis // Link text will be the total number of pages : $ pages if ($ paged <$ pages- 1 && $ paged + $ range- 1 <$ pages && $ showitems <$ pages) echo "<span> ... </ span> <a href = '". get_pagenum_link ($ pages). " '> $ pages </a> "; // Close the div with pages echo "</ div>"; // Display the button on the next page if ($ paged <$ pages && $ showitems <$ pages) echo "<a href = '". get_pagenum_link ($ paged + 1 ). "' class = 'button next'>". __ ('Next Page', 'striped'). "</a>"; echo "</ div> \ n"; } }

Congratulations, your WordPress theme is created from scratch.