Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

WordPress Tutorial: How To Create A WordPress Theme from HTML (Part 1)

Last updated on:
  1. 1. Currently Reading: WordPress Tutorial: How To Create A WordPress Theme from HTML (Part 1)
  2. 2. WordPress Tutorial: How To Create A WordPress Theme From HTML (Part 2)
  3. 3. An Intro to the Anatomy of a WordPress Theme

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. You can follow this guide to create your theme from scratch or you can head over to Github and download the WPExplorer starter themeย which provides an “empty canvas” to create your theme with all the necessary template files and code to get started. So if you are one of those people that rather learn by reading through code then download the starter theme, skip the guide and see how things work…Otherwise,ย get a code editor (I use and recommend Notepad++, orย SublimeText) 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.
  • 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
*/

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 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 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>

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.

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.

Now, to display your posts in the content section of the index.php template, copy and paste the following codeย between the <div class=”content”> and </div> 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 </body> and </html> 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://wpexplorer.com
Description: This theme shows you how to create WordPress themes from HTML
Version: 1.0
Author: Freddy for @WPExplorer
Author URI: http://WPExplorer.com/create-wordpress-theme-html-1/
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!

Article by Freddy WPExplorer.com guest author
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

132 Comments

  1. Peter Baylies

    Also don’t forget to add wp_footer() immediately before the tag in your footer.php.

    • AJ Clarke

      Yep, very important will update the post now!

  2. Hann

    Great Tutorial, I still have to try it though but great work guys.

    • Freddy

      Thank you for your comment Hann. Please do try and let us know ๐Ÿ™‚

  3. Manoj Yadav

    Hi this is a nice tutorial regarding wordpress theme development

    • Freddy

      Glad you liked it Manoj!

    • Placidius

      This is a great tutorial..i am new to wordpress and i am sure with this site i will become an expert. Thank you very much.
      Placidius

  4. Premo

    I have really got something here. This is nice Freddy. But, will my theme that has the php code for “POSTS” embedded in the html template work when converted into a wordpress theme?

    • Freddy

      Thank you for your comment Premo! If you can, import your posts after converting the template into a theme. WordPress supports different formats when importing, so you ought to be covered. Hope that helps ๐Ÿ™‚

  5. Knight

    Great post, but please use some white space next time. That code can blind you trying to read it.

    • AJ Clarke

      Ha you are correct, these snippets need to be properly formatted, thanks for the heads up! I will keep a closer eye on that.

  6. Tech Vidhya

    great post about wordPress. I would like to thank to the author for such a nice post

    • Freddy

      You’re far too kind Vidhya! Thanks for passing by and sharing ๐Ÿ™‚

    • Zoe

      I so I am very new to wordpress and am finding i prefer html, but have been asked to put my site on wordpress, if i have posts in my side bar do i have to put a loop there too. I am quite confused. Please help

      • AJ Clarke

        Yes, if you want posts on your sidebar the best thing is to create a custom widget and use WP_Query to loop through the posts. But there are already a ton of great recent posts widget plugins out there you could probably use instead of developing your own from scratch.

      • lanima

        great tutorial for beginners…

  7. Eddie Mayan

    Great tutorial, recently I have found another tutorial series in which the author teaches on how to convert any HTML business theme to WordPress. The techniques in this tutorial are applicable on any HTML busienss theme we want to work with. Here is the source: http://www.cloudways.com/blog/convert-html-to-wordpress-business-theme/

    • Kyla

      Thanks for sharing! That’s a great article as well – and it’s by one of our other awesome authors, Ahsan ๐Ÿ™‚

  8. Mike Swan

    From last few days, I am trying to convert my website from HTML to WordPress CMS…But unfortunately, it doesn’t happen yet…After reading your blog, I get to learn more about the conversion and found that its the simplest method mentioned in a easiest way…Thanks for sharing the useful post with us…

    • Freddy

      Thank you Mike for the input. It’s much appreciated. Good luck with the conversion, and if you ever get stuck, I can always help with a few tips ๐Ÿ™‚

  9. parthjani7

    Nice Work.. (y) but please display code in more readable form (by formatting it).

    • AJ Clarke

      Good idea, I will clean up the code right now!

  10. Abdul Rehman Khalid

    Great tutorial

    • Freddy

      Thanks Abdul!

  11. Sanya

    Awesome tutorial for beginners in WP like me. Thanks. ๐Ÿ™‚

    • Freddy

      Thank you Sanya for passing by and the kind words. You’re going to have an awesome time with WordPress ๐Ÿ™‚

  12. Raj

    Just what I was looking for.. Thank you Freddy ๐Ÿ™‚

    • Freddy

      You are welcome Raj. Thank you for contributing…

  13. Luka

    I’m having very simple VCard HTML template and almost zero knowledge about coding.Did it as per tutorial but when i upload to WP,theme is recognized but blank.No content at all.
    Only thing i didn’t add to those files is part about blog posts,as it ain’t blog.
    Any idea what might be the problem?
    Thanx!

    • AJ Clarke

      Try enabling WP_Debug on your server to see if you have any sort of PHP error.

  14. AliyaAli

    Thanks for the nice tutorial. I am new to wordpress.This helped me a lot.

    • Freddy

      Hey Aliya ๐Ÿ™‚ You’re welcome. You will have a great time with WordPress! See you around.

  15. Oscar

    Great Tutorial

    • Freddy

      Glad you loved it Oscar. Thank you for passing by ๐Ÿ™‚

  16. john

    thanks man it has helped me

    • Freddy

      Jambo Mwendwa!

      Thank you for passing by and commenting ๐Ÿ™‚ Your input is much appreciated!

  17. chiragdholariya

    Great Tutorial

  18. chiragdholariya

    Thanks for the nice tutorial. I am new to wordpress.This helped me a newcreate a theme

    • Freddy

      That’s the spirit ๐Ÿ™‚ Thank you for reading and sharing with us ๐Ÿ™‚

  19. biggigg

    hello, thank yo for great tutorial. How to integrate javascript slider on the Homepage ? Like parallax feel to it?

  20. tsurendra

    I have a doubt! Why the css I put for my theme is not applied in internet explorer! It worked in mozilla and chrome. For example the border-radius css not applying in internet explorer. If IE is not compatible for that is there is a way around for it!

    • AJ Clarke

      CSS3 only works on the latest version of Internet Explorer. There isn’t a way around that (not any good way). People need to update their browsers ๐Ÿ˜‰

  21. Deepak

    Nice tutorial this will really help for theme integration

    • Freddy

      Awesome ๐Ÿ™‚

  22. mubashar shehzad

    really great tutorial it help me so much how to make wp-theme

    • Freddy

      Thanks Mubashar ๐Ÿ™‚

  23. mal

    Awesome. I am going to try it out.

  24. sutoro naruto

    THANKS FOR TUTORIAL

  25. Sarim Ahmed

    Great Tutorial.Thanks

  26. Suraj Maurya

    Its a great tutorial! Helped me a lot!
    Thanx man!

    • Freddy

      You’re far too kind. Thanks for passing by!

  27. Adelina Addy

    This is really an informative & useful post. But,I also heard about a software TemplateToaster which is easy to use and compatible with almost all CMSs like wordpress, joomla,drupal etc.I have been used this tool for creating wordpress theme and I am happy to use this tool as it diminished the coding process.

  28. Abhishek Khare

    this is awesome tutorial.thanks alot

  29. Mukesh Joshi

    I was searching for WordPress theme development and got your article there in Google.
    I am a newbie in this development field and will try your method for sure.
    Can i ask my queries direct here in future?

    • Freddy

      You sure can ๐Ÿ™‚ Thanks for contributing!

  30. Navjeet Singh

    Thanks for sharing information about creation Of WordPress theme.

  31. Arun

    It is very helpful post .
    plz tell me my theme does not have widget . and want to ask what is the use of function.php

    • AJ Clarke

      Functions.php is the main file used to add all the main theme functions or to include all the necessary function files for the theme. To add a widget area you will have to use the register_sidebar function.

  32. Hassan

    such a nice tutorial freddy

    • Freddy

      Thanks for the kind words Hassan ๐Ÿ™‚

  33. Piyush Sharma

    THank you soooo much freddy. It was so much usefull.

    • Freddy

      You’re welcome Piyush!

  34. vcamargo

    That’s exactly what I was looking for! Really really helpful! Thank you for writing and sharing! ;D

    • Freddy

      Awesome! I’m so glad the post was helpful ๐Ÿ™‚ Thank you for passing by!

  35. vijay

    Thanks for such easy steps how to make wordpress theme

    • Freddy

      You’re welcome Vijay…thanks for sharing your thoughts ๐Ÿ™‚

  36. arun

    This is a very nice post. You r a good tutor . please brief discribe it on next post

    • Freddy

      You’re far too kind Arun. Thanks for passing by ๐Ÿ™‚ Happy Holidays!

  37. chris

    Great tutorial but the sidebar.php , i think it’s wrong .

  38. plaintips

    Hey Freddy,
    I have been using WordPress for many years but never tried to make even a basic WP theme. I’ll try this tutorial this weekend. I’d appreciate it if you guide me further on putting Two sidebars on WordPress theme. One on the left and One on the right.

    Thanks!

    • Freddy

      Awesome Plaintips…go ahead and give it a shot. I’m sure you’ll love it ๐Ÿ™‚ Thank you for passing by!

  39. I.Avinash

    Good TUtorial and well starter to the begineers sure i will follow those steps

  40. Nikhil

    Just what i was looking for! Thank u Freddy!

    • Freddy

      Thank you Nikhil for contributing!

  41. Mike

    NIce job on this tutorial. I will start converting my html version tot WP now. Thnx!

    • Freddy

      Thank you for the compliment…have fun and don’t forget to share what you learn ๐Ÿ™‚

  42. M Raza Hussain

    Thnx Bro it reall helps me..

  43. freddychick

    Get work Freddy!

    • Freddy

      Thank you for passing by Freddy ๐Ÿ™‚

  44. Faisal

    Great Post! Thanks for sharing great knowledge… Appreciate

    • Freddy

      My pleasure Faisal. Thank you for the kind words and your much appreciated input!

  45. mujahid ul islam

    very simple and great post for the beginners

  46. Ananth

    I am new in wordpress. Nice tutorial. Thank you for sharing nice post. after submitting the registration form i want to store the data to database in wordpress. without plugin how to do it?

    • Freddy

      Hey Ananth, you just need WordPress and a membership plugin. The rest is automatic ๐Ÿ™‚ Hope that helps!

  47. toukir ahmed tonmoy

    Thanks for Your tutorial……… please continue it………… ๐Ÿ™‚

  48. Tarek Raihan

    Very helpful tutorial. Thanks for sharing this important information.

  49. kiran gadhvi

    this is very helpful article!! lerned a lot from it!!Thanks

  50. Gaurav Ghosh

    Thanks to Share useful article i am new too wordpress . I find this post very useful for make my theme .

  51. Bi Hรญp

    I meet the error WordPress: Call to undefined function get_header(),get_header() run in index.php but this not run in amthuc.php
    could you help me?

    • AJ Clarke

      If you get the error undefined function get_header() this means your WordPress installation isn’t installed, or not installed correctly, or missing core files. This function is a core function so it should definately be defined.

    • AJ Clarke

      If you get the error undefined function get_header() this means your WordPress installation isn’t installed, or not installed correctly, or missing core files. This function is a core function so it should definitely be defined.

  52. Daniel Keith

    Hi there,
    Great tutorial. It helped me a lot in learning the basic website building and designing tips.

    • Freddy

      Oh yeah! I like that you learned something Daniel. Keep it rocking, and thank you for the compliment ๐Ÿ™‚

  53. Justin Spencer

    Amazing steps shared.I didnt know that wordpress theme can be created in such easy steps and following this.

    • Freddy

      That’s the beauty of WordPress Spencer…it’s easy, easy ….eaaasy Thank you for passing by ๐Ÿ™‚

  54. pavankmr501pavan

    THANK YOU FOR yOUR TUTORIAL.
    This is a great tutorial.
    If there are any more tutorials by you on wordpress please inform me ——– Freddy.
    Freddy Thank you for your great support.

    • Freddy

      You’re welcome Pavan! Keep it WPExplorer for more WordPress tutorials, tips and much much more.

  55. berteldk

    What about the navigation?

  56. Amit Singh

    hey thank you for sharing this post. Nice one.

    • Freddy

      Thank you for your comment Amit. Much appreciated ๐Ÿ™‚

  57. Ulises Calvo

    You are a HERO Freddy, THANK YOU SO MUCH, over simplify is an art that most developers lack when it comes to teach absolute beginners what they already know, and you mastered that skill.

    • Freddy

      This is a great comment Ulises Calvo! Means a lot to yours truly; the compliment is much appreciated. Thank you for taking the time.

  58. amr

    good collections

    • Freddy

      Awesome ๐Ÿ™‚ Thanks for the comment!

  59. salmankhan

    great post till now i avoiding to make wordpress theme, right now i m making it great!!

    • Freddy

      Isn’t that just awesome Salmankhan? I’m glad you’re having fun making WordPress themes. I wish you all the best in your future endeavors! Thank you for contributing ๐Ÿ™‚

  60. mirte

    Thanks for the step-by-step tutorial. even though it seems really clear, im having problems with uploading my newly created theme as zip file.

    I get the following warning when adding my new theme:

    Warning: Invalid argument supplied for foreach() in /Applications/XAMPP/xamppfiles/htdocs/wordpress_sterre_carron/wp-includes/update.php on line 311

    Warning: Invalid argument supplied for foreach() in /Applications/XAMPP/xamppfiles/htdocs/wordpress_sterre_carron/wp-includes/update.php on line 315
    Unable to create directory wp-content/uploads/2015/11. Is its parent directory writable by the server?

    I’ve already put an extra line to debug since im using localhost but i don’t see what im doing wrong in here.. Maybe someone can help me?

    thanks in advance!

    • mirte

      Ok i already fixed it by placing the style.css directly in my new theme folder.
      But now there’s a likely problem; when i want to install a new plugin i get the error unable to create directory..
      Maybe someone can help me to fix this? Ive already searched through different fora but there wasn’t a right solution

      • AJ Clarke

        This error is actually server related. You have to fix server permissions for this, I would suggest contacting your webhost for assistance, in most cases they will help you out. We use WPEngine which doesn’t have these problems by default, but some shared hosts will require you to chown down or chmod permissions on your server after installing WordPress.

  61. Brijesh

    Great Tutorial Buddy… It helps me a lot.. But something I want to know that.. As we create header.php, index.php, sidebar.php, footer.php there are lots of other pages also in those three pre themes. I want to know about all pages which are in twenty-twelve theme, like function.php, search.php and all other…. please help me out.. thanks

  62. shailendra(Front-end Developer)

    Hi Freddy !! Great Tutorial for WordPress Beginners.. Please keep it up for advanced !!

  63. Biplob

    it’s really good thing. i like it.

  64. Marie Thomas

    You have provided quite an informative tutorial on wordpress theme on html.I was having some doubts regarding this.Now I think your post will help me to solve my issues.
    Thanks

  65. Maroos

    You said in the beginning, you have to make a folder, but where has the folder to be?? Inside the wordpress zip or something? Or do you have to but it in filezilla (program I use)???

    • AJ Clarke

      This depends where your WordPress installation is located or if you want to create your theme then upload it. You could add it to your WordPress site at root/wp-content/themes/ and then add your files as you create them for the theme. Or you can simply create the folder on your computer and add all your template files without testing and once finished upload it to WordPress either via FTP or zip it up and install it in WordPress at Appearance > Themes > Add New.

  66. Ash

    The best tutorial so far I have seen ….

  67. cedric

    thanks to tutorials like yours I was able to make the first version for WordPress of my theme generator available on template-creator.com
    So thank you!

  68. Jeff Dinglasan

    Wow, thatโ€™s what I was exploring for, what a information! existing here at this website, thanks admin of this site.

  69. Jasa Pembuatan

    nice one, i will try it.

  70. Punascha

    Thanks , nice Article , really helpful .

  71. Emily Brown

    Nice Informative Article.

    You did a great job here. I like the way you represented it.

    Thanks for sharing.

  72. Marita

    Hi Freddy,
    Thanks so much for this tut. I was just trying to figure out how to phrase my question correctly to get the right information when I found it this morning. Have you considered making this a video & putting it up on youtube? A bit of background – I started using WordPress 2 yrs ago, trying to help out a friend build a blog. Fast forward 12 months, after intro to Dreamweaver & loving it, looked back at the blog after steep learning curve on WP and realised it’s a bit of a mess. I want to create my own themes, & while no issue with a ‘normal’ website, wasn’t sure how to tackle the posts side of things – getting them rolling so latest is top etc.
    I’m still plugging away, learning php, etc., but want to get my friends blog happening asap. This is exactly what I needed.
    Thanks again.

  73. Hatta

    is the class like “content” or “post-header” come from wordpress or we can make that as we wish to make ?

    • AJ Clarke

      It can be anything you want. When creating a WordPress theme you can use any classnames you want in your code, however, even though we didn’t do it in this Tutorial it is recommended that you prefix all your classnames. So for example instead of using id=”header” you would use id=”prefix-header” where “prefix” is any prefix you decide, I personally use “wpex” as the prefix for most my themes (short for WPExplorer). By using prefixes you avoid any potential conflicts with 3rd party plugins.

  74. Sagar Mohite

    i am planning to conver my HTMl design for one website to convert it to WordPress using this method can i conver this all and what about images and all you havnt mention here about it.
    please guide I am not expert programmer but it will help me

    • Kyla

      Images used in your design would still be placed in the same location. In the CSS file you would still use relative locations so there is nothing different there. Images that may be used in the design itself (maybe like a banner or logo) you should already have these in some sort of folder in your theme and instead of linking to them manually ore relatively you should be using the get_template_directory_uri to link to your theme folder on the server.

  75. Avinash Kumar

    Hello,
    Thanks for sharing such informative and helpful blog post to create my first theme. You are doing a good job so keep posting such amazing articles for learning WordPress.

  76. William Rojas

    Thank you, very helpful, from the few articles Iโ€™ve read, this is the most easily understood.

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.