{"id":322,"date":"2012-01-09T01:08:53","date_gmt":"2012-01-08T16:08:53","guid":{"rendered":"http:\/\/www.santoshkori.com\/blog\/?p=322"},"modified":"2012-08-23T17:30:34","modified_gmt":"2012-08-23T08:30:34","slug":"how-to-create-a-wordpress-theme-from-scratch","status":"publish","type":"post","link":"https:\/\/www.santoshkori.com\/blog\/how-to-create-a-wordpress-theme-from-scratch\/","title":{"rendered":"How to Create a WordPress Theme from Scratch"},"content":{"rendered":"

Following on from the recent article on \u201cPSD to HTML\u201d, this tutorial will look at taking a HTML\/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn\u2019t nearly cover it all. So, we\u2019re going to look at how themes are structured, creation of the core files and splitting up that index.html file.<\/p>\n

Overview \u2013 The Structure Of A WordPress Theme<\/h2>\n

The structure of a WordPress theme is fairly simple, I like to start with the CSS file. It details everything about the theme for WordPress to use. You then have index.php<\/code> \u2013 it\u2019s simply the template file you\u2019re using with the PHP template tags included. Included with that is header.php<\/code> & footer.php<\/code>, files that are used across the whole site. Now most themes don\u2019t use just four files and that\u2019s because WordPress allows you to use template files to layout different content. There are the defined layout files, such as archives.php<\/code> and single.php<\/code>. However you can also create your own, say, if you wanted to make a page that had a totally different layout to the default.<\/p>\n

Because this is such a large topic we\u2019re splitting it into a two part series \u2013 this part making a simple but functioning theme from a standard HTML & CSS template, and the second part will look at adding more of the advanced features.<\/p>\n

I will be working on turning the great template \u201cTypography Paramount\u201d by Six Shooter Media<\/a> into a simple WordPress theme.<\/p>\n

Step 1 – style.css<\/h2>\n

The style sheet is the defining file of the theme for WordPress. There are a few simple things you need to do. The first is renaming the main (if you have more that one) file to style.css<\/code>, next you need to add a bit of commenting to the file.<\/p>\n

\r\n\/*\r\nTheme Name: Typography Paramount\r\nTheme URI: http:\/\/www.sixshootermedia.com\/\r\nDescription: An image-less template focusing on Typography.\r\nAuthor: Sam Parkinson\r\nAuthor URI: http:\/\/xseria.com\r\nVersion: 1.0\r\n.\r\nGeneral comments\/License Statement if any.\r\n.\r\n*\/\r\n\r\n<\/pre>\n
The code above is all contained in a comment, so it won\u2019t affect the  style definitions.    Now I filled it out with a few details, these  will be used by WordPress to display    the details of the theme to  admins. Make sure you add it to the top of the file    with no  white-spaces before it.<\/p>\n
I\u2019ve gone and renamed the style sheet file from the template, it was called 1.css<\/code>.    I have also made a new folder called typography-paramount<\/code> which will    be what I upload to the WordPress theme folder. Put the  style sheet in this folder,    but not under another directory otherwise  it cannot be seen by WordPress.<\/p>\n
\"\"<\/a><\/p>\n
Step 2 – The Header and Footer<\/h2>\n
In this step, we\u2019re going to create the two files: header.php<\/code> and footer.php<\/code>.    Although they are optional both are used in most themes, they\u2019re not exactly hard    to use either.<\/p>\n
header.php<\/h4>\n
Starting with the header, create a new file in the theme folder called header.php<\/code>,    then open up index.html<\/code> from the template and copy the following from    it. This will become  the header and will be displayed on every page of the site,    bear that  in mind when making other templates.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.1\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en">\r\n<head>\r\n<title>-<\/title>\r\n<meta http-equiv="content-type" content="text\/html; charset=utf-8" \/>\r\n<link rel="stylesheet" href="css\/1.css" type="text\/css" media="screen,projection" \/>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id="wrapper">\r\n\r\n\t<div id="header">\r\n\r\n\t<p class="description">\r\n\r\n\tAn imageless template focusing on Typography.\r\n\r\n\t<\/p>\r\n\r\n\t<h1><a href="#">Typography Paramount<\/a><\/h1>\r\n\r\n\t<ul id="nav">\r\n\r\n\t<li><a href="#">Link Here<\/a><\/li>\r\n\r\n\t<li><a href="#" class="active">Link Here<\/a><\/li>\r\n\r\n\t<li><a href="#">Link Here<\/a><\/li>\r\n\r\n\t<li><a href="#">Link Here<\/a><\/li>\r\n\r\n\t<li><a href="#">Link Here<\/a><\/li>\r\n\r\n\t<\/ul>\r\n\r\n\t<\/div>\r\n\r\n<\/pre>\n
We\u2019re now going to add the WordPress template tags to header.php, these tell WordPress where to inject the various content into the theme. Also remember to change that link to the stylesheet.<\/p>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.1\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml11\/DTD\/xhtml11.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" <?php language_attributes() ?>>\r\n<head profile="http:\/\/gmpg.org\/xfn\/11">\r\n<title><?php bloginfo('name'); ?> <?php wp_title(); ?><\/title>\r\n<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" \/>\r\n<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text\/css" media="screen,projection" \/>\r\n\r\n<?php wp_head(); ?>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id="wrapper">\r\n\r\n\t<div id="header">\r\n\r\n\t<p class="description"><?php bloginfo('description'); ?><\/p>\r\n\r\n\t<h1><a href="<?php echo get_option('home'); ?>\/"><?php bloginfo('name'); ?><\/a><\/h1>\r\n\r\n\t<ul id="nav">\r\n\t<?php wp_list_pages('sort_column=menu_order&title_li='); ?>\r\n\t<\/ul>\r\n\r\n\t<\/div>\r\n\r\n<\/pre>\n
There\u2019s quite a lot that\u2019s been added but it\u2019s all fairly simple when  you look through    it. All the tags above are well documented in the  WordPress Codex<\/a>. I\u2019m just going to go through what each of the functions    do.<\/p>\n","protected":false},"excerpt":{"rendered":"
Following on from the recent article on \u201cPSD to HTML\u201d, this tutorial will look at taking a HTML\/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn\u2019t nearly cover it all. So, we\u2019re going to look at how themes are structured, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[168,170,169,725],"class_list":["post-322","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-create-a-wordpress-theme-from-scratch","tag-how-to-create-a-wordpress-theme","tag-how-to-create-a-wordpress-theme-from-scratch","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":10,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":698,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions\/698"}],"wp:attachment":[{"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.santoshkori.com\/blog\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}