Now a days wordpress very familiar with all other developers and even students also, so everyone likes to learn wordpress framework. Many developers are launch lot of themes and makes sell of all themes but its not compatible for all clients. Some students are plan to create new theme but they are struggle to develop new theme because i think they are beginners.

create new wordpress theme for beginners

Here, the best solution for develop new wordpress theme, who still struggling to create new theme. I have some knowledge in develop the wordpress theme in my company and i have develop 10+ wordpress theme & officially launch that.

Create new wordpress theme for beginners

Okay fine lets start the tutorial, First you have basic knowledge about HTML, CSS and JavaScript that’s enough to develop the new wordpress theme. This tutorial will introduce you to the basics of creating a WordPress theme from HTML. You can follow this guide to create your theme from scratch.

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.

Basic assumptions

1. You have your index.html and CSS stylesheet ready. If you don’t have these files, you can download files for illustration purposes.

2.You have a working WordPress installation with at least one theme e.g. Twenty Fourteen

3.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: 4.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:

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>Create new wordpress theme for beginners</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 Style
#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 IE 9]>
	<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 IE 9]>
		<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>

Hereafter add the css

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

anywhere between the tags in the header.php file to link your stylesheet. Remember also to put the and 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.

Add new post

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.

Now, to display your posts in the content section of the index.php template, copy and paste the following code between the

and

tags as shown below:

<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->

That will take care of your posts. Easy as ABC. At this juncture (and using the sample files provided in this tutorial), your header.php should look like this:

<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 IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

Your sidebar.php should look like this:

<?php dynamic_sidebar( 'sidebar' ); ?>

Your footer.php should look like this:

<footer class="footer">
    <p>And this is the footer</p>
</footer>
<?php wp_footer(); // Crucial core hook! ?>
</body>
</html>

Did you notice the closing and tags in the footer? Don’t forget to include those too.

Your style.css should look something like this:

Theme Name: Creating WordPress Theme from HTML
Theme URI: http://www.vetbossel.in
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: vetbossel
Author URI: http://www.vetbossel.in/about
Tags: wpexplorer, custom theme, HTML to WordPress, create WordPress theme
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

And your index.php should look similar to:

<?php get_header(); ?>
<div class="content">
	<?php if ( have_posts() ) : ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="post-header">
					<div class="date"><?php the_time( 'M j y' ); ?></div>
					<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
					<div class="author"><?php the_author(); ?></div>
				</div><!--.post-header-->
				<div class="entry clear">
					<?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
					<?php the_content(); ?>
					<?php edit_post_link(); ?>
					<?php wp_link_pages(); ?>
				</div><!--. entry-->
				<footer class="post-footer">
					<div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
				</footer><!--.post-footer-->
			</div><!-- .post-->
		<?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
			<nav class="navigation index">
				<div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
				<div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
			</nav><!--.navigation-->
		<?php else : ?>
	<?php endif; ?>
</div><!--.content-->
<?php get_sidebar(); ?>
<?php wp_footer(); // Crucial footer hook! ?>
<?php get_footer(); ?>

Again – this is based on a left to right website with a header, content, sidebar, footer layout. Are you following? All the five files should be saved in your theme folder. Name the folder whatever you want and compress it into a ZIP archive using WinRar or an equivalent program. Upload your new theme to your WordPress installation, activate it and see your converted theme in action!

That was easy, right? You can style your theme however you want but most of the features we love in WordPress are still inactive since…this tutorial covers the basics of converting HTML templates into WordPress and should be of great value to you as a beginner. In the next tutorial, we will take things a notch higher and play around with other aspects of WordPress programming (such as Template Files and Template Tags) that will let you turn your HTML templates whichever way you like. Stay tuned!