{"id":171505,"date":"2018-04-04T13:00:47","date_gmt":"2018-04-04T13:00:47","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=171505"},"modified":"2018-03-26T19:31:27","modified_gmt":"2018-03-26T19:31:27","slug":"html-to-wordpress-theme-tutorial-step-2-creating-theme-template-files","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/html-to-wordpress-theme-tutorial-step-2-creating-theme-template-files\/","title":{"rendered":"HTML to WordPress Theme Tutorial: Step 2 &#8211; Creating Theme Template Files"},"content":{"rendered":"<p>Welcome back to this series showing you how to create your first WordPress theme from static HTML.<\/p>\n<p>In the first part of this series, you took your static <em>index.html<\/em> file and converted it to a PHP file. You added some template tags and a loop. In this second part your file will start to look more like a proper theme &#8211; you&#8217;ll split it up into multiple files and start creating template files for different types of content.<\/p>\n<p>Specifically, we&#8217;ll:<\/p>\n<ul>\n<li>Split our <em>index.php<\/em> file into multiple files, creating a separate file for the header, sidebar and footer.<\/li>\n<li>Create a file for the loop.<\/li>\n<li>Create new template files for static pages, archive pages and single posts.<\/li>\n<\/ul>\n<p>So let&#8217;s get started!<\/p>\n<h3>What You&#8217;ll Need<\/h3>\n<p>To follow along with this post, you&#8217;ll need a few tools:<\/p>\n<ul>\n<li>A development installation of WordPress, preferably on your local machine.<\/li>\n<li>A code editor.<\/li>\n<li>The code you created in part one of this series &#8211; if you don&#8217;t have that, you can <a href=\"https:\/\/github.com\/rachelmccollin\/WPMU-DEV-Theme-Development-Series-Files\" target=\"_blank\">download the files I&#8217;m using<\/a>.<\/li>\n<\/ul>\n<p>Make sure you do this work on a development site, not a live site &#8211; you don&#8217;t want the world to see your theme until it&#8217;s ready.<\/p>\n<h3>Splitting up the index.php File<\/h3>\n<p>First we&#8217;re going to split up the file we created in part one, creating new files for the header, sidebar and footer.<\/p>\n<h4>Creating a Header File<\/h4>\n<p>Open up your theme folder if you haven&#8217;t already done so. Start by creating three new empty files:<\/p>\n<ul>\n<li><em>header.php<\/em><\/li>\n<li><em>sidebar.php<\/em><\/li>\n<li><em>footer.php<\/em><\/li>\n<\/ul>\n<p>Now open your <em>index.php<\/em> file. Find all the code from the beginning of the file to the close of the navigation menu:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"0248a3aa0030f3ff6adaa7e0ba101867\" data-gist-file=\"header.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/0248a3aa0030f3ff6adaa7e0ba101867.js?file=header.php\">Loading gist 0248a3aa0030f3ff6adaa7e0ba101867<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Copy that code and paste it into your new <em>header.php<\/em> file. Then delete it from <em>index.php<\/em>.<\/p>\n<p>In its place, I like to include some comments at the top of each template file to remind me what the file is. Here&#8217;s mine for <em>index.php<\/em>:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"c42d635b67bf689dcbb01e4563dcffac\" data-gist-file=\"index-comments.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/c42d635b67bf689dcbb01e4563dcffac.js?file=index-comments.php\">Loading gist c42d635b67bf689dcbb01e4563dcffac<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Below that, you need to add a call to the header file. Add this above everything else in your <em>index.php<\/em> file (apart from those comments):<\/p>\n<div class=\"gist\" data-gist=\"11c7e4709e22ee6dedb8be559b8e4bf2\" data-gist-file=\"get-header.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/11c7e4709e22ee6dedb8be559b8e4bf2.js?file=get-header.php\">Loading gist 11c7e4709e22ee6dedb8be559b8e4bf2<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Now save both your <em>index.php<\/em> and <em>header.php<\/em> files.<\/p>\n<h4>Creating a Sidebar File<\/h4>\n<p>Now for the sidebar. Find all of the code in your <em>index.php<\/em> file for the sidebar:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"caf991f507ff6de617ef00f029a63b6d\" data-gist-file=\"sidebar.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/caf991f507ff6de617ef00f029a63b6d.js?file=sidebar.php\">Loading gist caf991f507ff6de617ef00f029a63b6d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Copy that into your blank <em>sidebar.php<\/em> file and delete it from <em>index.php<\/em>.<\/p>\n<p><em>Note: In the next part of this series, you&#8217;ll replace the static content here with a widget area.<\/em><\/p>\n<p>Once again, you need to add a call to the sidebar. So in the spot where you deleted the sidebar code, add this to your <em>index.php<\/em> file:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"37d605a4ec40edf997a0b28c812c4eb0\" data-gist-file=\"get-sidebar.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/37d605a4ec40edf997a0b28c812c4eb0.js?file=get-sidebar.php\">Loading gist 37d605a4ec40edf997a0b28c812c4eb0<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<h4>Creating a Footer File<\/h4>\n<p>Last but not least, we&#8217;ll create a footer file. Find all of the code in <em>index.php<\/em> for the footer:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"d5b363cdb8070c18f173f668d0b48488\" data-gist-file=\"footer.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/d5b363cdb8070c18f173f668d0b48488.js?file=footer.php\">Loading gist d5b363cdb8070c18f173f668d0b48488<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Note that this includes not only the footer element but the close of the <code>main<\/code> div, the closing <code>body<\/code> and <code>html<\/code> tags and the <code>wp_footer<\/code> hook &#8211; everything up to the end of the file.<\/p>\n<p>Copy this into the new <em>footer.php<\/em> file and delete it from <em>index.php<\/em>. Then add the call to the footer right at the end of <em>index.php<\/em>:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"81d58f3e322d0aa3ce67491cf7158b79\" data-gist-file=\"footer.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/81d58f3e322d0aa3ce67491cf7158b79.js?file=footer.php\">Loading gist 81d58f3e322d0aa3ce67491cf7158b79<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Our file is now split into the main template file (<em>index.php<\/em>) and the three include files. This is a more efficient way to code your theme as it means that when we add new template files, you won&#8217;t need to add all that code for the header, sidebar and footer each time &#8211; and if you need to change those, you only do it once.<\/p>\n<h3>Creating a Loop File<\/h3>\n<p>Another piece of the code which appears in multiple files is the loop. Let&#8217;s separate that into its own file.<\/p>\n<p>Create a new folder called <em>includes<\/em>, and inside that, create an\u00a0empty file called <em>loop.php<\/em>. In your <em>index.php<\/em> file, find the code for the loop:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"ea98ba460a27ac7eeb203e30f3c701ee\" data-gist-file=\"loop.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/ea98ba460a27ac7eeb203e30f3c701ee.js?file=loop.php\">Loading gist ea98ba460a27ac7eeb203e30f3c701ee<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Copy that into your new empty file and replace it in <em>index.php<\/em> with this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"cfe2c0955bf687c01e8e9e37f303e9df\" data-gist-file=\"get-loop.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/cfe2c0955bf687c01e8e9e37f303e9df.js?file=get-loop.php\">Loading gist cfe2c0955bf687c01e8e9e37f303e9df<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>This will call the loop. Note that it&#8217;s a good idea to put your loop file into a subfolder as that helps keep things organised. We&#8217;ll be creating more loop files as we go along, all in that folder.<\/p>\n<p>Our index file is now much smaller. It should look like this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"650726407db98c0a46c577084689f771\" data-gist-file=\"index2.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/650726407db98c0a46c577084689f771.js?file=index2.php\">Loading gist 650726407db98c0a46c577084689f771<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Note that it may look a bit odd because you&#8217;ve got some elements (e.g. the <code>body<\/code> and the <code>main<\/code> div) that open in one file and close in another. Don&#8217;t worry about this &#8211; you&#8217;ll get used to it once you&#8217;ve been working with theme files for a while!<\/p>\n<h3>Creating More Template Files<\/h3>\n<p>At present, our theme has only one template file &#8211; <em>index.php<\/em>. While that is sufficient for our theme to function, it will work better if we have some more. So let&#8217;s add them.<\/p>\n<h4>Creating a Template File for Static Pages<\/h4>\n<p>Make a duplicate of your <em>index.php<\/em> file and call it <em>page.php<\/em>. This will now be the template file that WordPress uses to display static pages. But right now, it&#8217;s identical. The changes we want to make are in the loop, so we&#8217;ll also need to create a new version of that.<\/p>\n<p>Duplicate your <em>loop.php<\/em> file (inside the <em>includes<\/em> folder) and call it <em>loop-page.php<\/em>.<\/p>\n<p>Now open your <em>page.php<\/em> file and find this line:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"3bfd78a5965d9abc0faac1bd53a0cc2d\" data-gist-file=\"get-loop.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/3bfd78a5965d9abc0faac1bd53a0cc2d.js?file=get-loop.php\">Loading gist 3bfd78a5965d9abc0faac1bd53a0cc2d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Edit it so it reads like this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"dd0bdb7dc8246122272ef4e42c50a53c\" data-gist-file=\"get-loop-page.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/dd0bdb7dc8246122272ef4e42c50a53c.js?file=get-loop-page.php\">Loading gist dd0bdb7dc8246122272ef4e42c50a53c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>This uses the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\"><code>get_template_part()<\/code><\/a> function to fetch the <em>loop-page.php<\/em> file. If that doesn&#8217;t exist, it&#8217;ll load <em>loop.php<\/em>.<\/p>\n<p>It&#8217;s also a good idea to edit the comments at the top of your <em>page.php<\/em> file:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"8931a1fc507e431a40ceb130b1155aef\" data-gist-file=\"page-comments.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/8931a1fc507e431a40ceb130b1155aef.js?file=page-comments.php\">Loading gist 8931a1fc507e431a40ceb130b1155aef<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Now close <em>page.php<\/em> and open <em>loop-page.php<\/em>.<\/p>\n<p>Delete the <code>entry-meta<\/code> div:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"c9a08f5f470500230a6594961e321049\" data-gist-file=\"entry-meta.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/c9a08f5f470500230a6594961e321049.js?file=entry-meta.php\">Loading gist c9a08f5f470500230a6594961e321049<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Now, in the page title, remove the link to the page &#8211; you don&#8217;t need this as anyone looking at content output by this file will already be on the page that it links to. Edit the title code so it looks like this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"80c01663f7378fc116b11d4888953b41\" data-gist-file=\"page-title.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/80c01663f7378fc116b11d4888953b41.js?file=page-title.php\">Loading gist 80c01663f7378fc116b11d4888953b41<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Now save your <em>loop-page.php<\/em> file.<\/p>\n<h4>Creating a Template File for Archive Pages<\/h4>\n<p>Now make a copy of your <em>index.php<\/em> file and call it <em>archive.php<\/em>. This will display any archive pages including your main blog page and any category or tag archives as well as date archives.<\/p>\n<p>Open the <em>archive.php<\/em> file to give it a title. Add that above an edited call for the loop file:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"022c33c299bc7ffc58086976d6ff0870\" data-gist-file=\"archive-edits.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/022c33c299bc7ffc58086976d6ff0870.js?file=archive-edits.php\">Loading gist 022c33c299bc7ffc58086976d6ff0870<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>If you&#8217;ve been following along, you&#8217;ll know that means we need to create a new version of <em>loop.php<\/em> called <em>loop-archive.php<\/em>. Create that now, open it and edit it to change the <code>h2<\/code> tags to <code>h3<\/code> tags. Take out the comments section too. Your <em>loop-archive.php<\/em> file will look like this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"cf3624b4464ef7a1473aac944132ad54\" data-gist-file=\"loop-archive.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/cf3624b4464ef7a1473aac944132ad54.js?file=loop-archive.php\">Loading gist cf3624b4464ef7a1473aac944132ad54<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>That will output your posts in archive pages using the correct hierarchy for your headings in HTML and without comments, which you don&#8217;t want in archive pages.<\/p>\n<h4>Creating a Template File for Single Posts<\/h4>\n<p>Finally, let&#8217;s create a template file for single posts. Duplicate <em>index.php<\/em> and call it <em>single.php<\/em>. Duplicate <em>loop.php<\/em> and call it <em>loop-single.php<\/em>.<\/p>\n<p>Edit your new <em>single.php<\/em> file so it looks like this:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"39565fb82c95a520a7ed102097662f98\" data-gist-file=\"single.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/39565fb82c95a520a7ed102097662f98.js?file=single.php\">Loading gist 39565fb82c95a520a7ed102097662f98<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Then in the <em>loop-single.php<\/em> file, edit just the title to remove the link:<\/p>\n<div>\n<div class=\"gist\" data-gist=\"829248c388ca82b58af0dc009bad167d\" data-gist-file=\"single-title.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/829248c388ca82b58af0dc009bad167d.js?file=single-title.php\">Loading gist 829248c388ca82b58af0dc009bad167d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<\/div>\n<p>Now save all your files.<\/p>\n<h3>Now Our Theme Has Template Files<\/h3>\n<p>Our theme now has a number of template files and include files and is properly structured. If you want you can add additional template files according to the <a href=\"https:\/\/wpmudev.com\/blog\/guide-wordpress-template-hierarchy\/\" target=\"_blank\">WordPress template hierarchy<\/a>. You&#8217;ll find that you have all the loop files you need now, so if you add new template files, you can use those loop files. For example if you added a <em>category.php<\/em> file, you could call <em>loop-archive.php<\/em>.<\/p>\n<p>In the next part we&#8217;ll move on to adding a navigation menu and widget areas, and get the functions file working properly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome back to this series showing you how to create your first WordPress theme from static HTML. In the first part of this series, you took your static index.html file and converted it to a PHP file. You added some template tags and a loop. In this second part your file will start to look [&hellip;]<\/p>\n","protected":false},"author":347011,"featured_media":171539,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[200,10039,10865],"tutorials_categories":[],"class_list":["post-171505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-html","tag-wordpress-themes","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/171505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/347011"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=171505"}],"version-history":[{"count":10,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/171505\/revisions"}],"predecessor-version":[{"id":171541,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/171505\/revisions\/171541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/171539"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=171505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=171505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=171505"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=171505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}