{"id":3847,"date":"2017-01-24T18:41:05","date_gmt":"2017-01-24T13:11:05","guid":{"rendered":"https:\/\/codeforgeek.com\/?p=3847"},"modified":"2021-06-20T06:15:31","modified_gmt":"2021-06-20T00:45:31","slug":"build-wordpress-theme","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/build-wordpress-theme\/","title":{"rendered":"How to Build WordPress Theme Using Underscores"},"content":{"rendered":"<p>WordPress themes are complex to code. You need to understand the working of WordPress as CMS, WordPress hooks, and functions before you begin to code. There are tons of tutorials on the first page of Google explaining how to build WordPress theme from scratch i.e code each part and module.<\/p>\n<p>In this article, we are going to cover one very easy way to get started with WordPress theme development in a minute!<\/p>\n<h2>Prerequistics<\/h2>\n<p>You will need following to continue with the article.<\/p>\n<ul>\n<li>WordPress running local or live.<\/li>\n<li>PHP knowledge is plus point.<\/li>\n<li>Code editor.<\/li>\n<\/ul>\n<p>Got them? Let&#8217;s build WordPress theme using Underscores.<\/p>\n<h2>Underscores generator<\/h2>\n<p>Underscores is the starter theme generator available for free. You can use this to generate the skeleton of the WordPress theme in a minute and then customize it according to your need. The team behind this project is <strong>Automattic<\/strong> &#8211; the same company which manages and run WordPress.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-generator.png\" alt=\"build WordPress theme\" width=\"1320\" height=\"978\" class=\"aligncenter size-full wp-image-3850\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-generator.png 1320w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-generator-300x222.png 300w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-generator-768x569.png 768w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-generator-1024x759.png 1024w\" sizes=\"(max-width: 1320px) 100vw, 1320px\" \/><\/p>\n<p>It generates modern HTML5 templates based WordPress theme. The code is written in a neat way so that you can easily change it according to your need. In order to understand it more, let&#8217;s generate one. <\/p>\n<p>Go to underscores website, type in a theme name of your choice and click on <strong>Generate<\/strong>.<\/p>\n<p>Refer the image below for help.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/generate-theme.png\" alt=\"build WordPress theme\" width=\"994\" height=\"127\" class=\"aligncenter size-full wp-image-3851\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/generate-theme.png 994w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/generate-theme-300x38.png 300w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/generate-theme-768x98.png 768w\" sizes=\"(max-width: 994px) 100vw, 994px\" \/><\/p>\n<p>After clicking on Generate, Underscores will generate your theme and download will begin containing your theme with a custom name.<\/p>\n<p>Unzip the downloaded file, and you should be seeing following files.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/File-structure-of-theme.png\" alt=\"build WordPress theme\" width=\"205\" height=\"406\" class=\"aligncenter size-full wp-image-3852\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/File-structure-of-theme.png 205w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/File-structure-of-theme-151x300.png 151w\" sizes=\"(max-width: 205px) 100vw, 205px\" \/><\/p>\n<p>Let&#8217;s activate the theme. Open your WordPress admin dashboard and go to themes section, then go to adding new theme section.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Add-theme-WordPress.png\" alt=\"build WordPress theme\" width=\"1202\" height=\"332\" class=\"aligncenter size-full wp-image-3853\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Add-theme-WordPress.png 1202w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Add-theme-WordPress-300x83.png 300w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Add-theme-WordPress-768x212.png 768w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Add-theme-WordPress-1024x283.png 1024w\" sizes=\"(max-width: 1202px) 100vw, 1202px\" \/><\/p>\n<p>Choose the zip file containing theme and upload it. Once uploaded, click on Activate.<\/p>\n<p>Visit your homepage and you should be viewing something similar as shown below.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-themes-generator.png\" alt=\"build WordPress theme\" width=\"1242\" height=\"942\" class=\"aligncenter size-full wp-image-3854\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-themes-generator.png 1242w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-themes-generator-300x228.png 300w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-themes-generator-768x582.png 768w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/Underscores-themes-generator-1024x777.png 1024w\" sizes=\"(max-width: 1242px) 100vw, 1242px\" \/><\/p>\n<p>It is plain, simple and ready to customize. Let&#8217;s learn how to customize it.<\/p>\n<h2>Customizing WordPress theme<\/h2>\n<p>Here is how Underscores WordPress theme loads and execute various files.<\/p>\n<p>The homepage is loaded with <strong>index.php<\/strong> file which in turns load code from following files.<\/p>\n<ul>\n<li>template-parts\/content.php<\/li>\n<li>header.php<\/li>\n<li>footer.php<\/li>\n<li>sidebar.php<\/li>\n<li>functions.php<\/li>\n<\/ul>\n<p>When you open any specific posts, it uses <strong>single.php<\/strong> to load the content.<\/p>\n<p>Let&#8217;s do some customization. First of all, let&#8217;s add <strong>bootstrap<\/strong> to make our theme look better.<\/p>\n<p>Open <strong>functions.php<\/strong> and look for <strong>codeforgeek_scripts<\/strong> function. Add this line before the end of the function.<\/p>\n<p><code lang='php'><br \/>\nwp_enqueue_style(\"bootstrap\", \"\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\");<br \/>\n<\/code><\/p>\n<p>Now visit your homepage, it should look bolder and easy to read.<\/p>\n<p>Now let&#8217;s make homepage little cleaner, we really do not require to load all the content on the homepage. Let&#8217;s remove that. <\/p>\n<p>Open <strong>index.php<\/strong> and add following code in the loop.<\/p>\n<p><code lang='php'><br \/>\n\t\/* Start the Loop *\/<br \/>\n\t\t\twhile ( have_posts() ) : the_post();<\/p>\n<p>\t\t\t\t\/*<br \/>\n\t\t\t\t * Include the Post-Format-specific template for the content.<br \/>\n\t\t\t\t * If you want to override this in a child theme, then include a file<br \/>\n\t\t\t\t * called content-___.php (where ___ is the Post Format name) and that will be used instead.<br \/>\n\t\t\t\t *\/<br \/>\n\t\t\tthe_title( '<\/p>\n<h2 class=\"entry-title\"><a href=\"' . esc_url( get_permalink() ) . '\" rel=\"bookmark\">', '<\/a><\/h2>\n<p>' );<br \/>\n\t\t\tendwhile;<\/p>\n<p>\t\t\tthe_posts_navigation();<\/p>\n<p>\t\telse :<\/p>\n<p>\t\t\tget_template_part( 'template-parts\/content', 'none' );<\/p>\n<p>\t\tendif; ?><br \/>\n<\/code><\/p>\n<p>Now visit your homepage, it should look something like this.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/easy-to-read-wordpress-1.png\" alt=\"build WordPress theme\" width=\"1110\" height=\"694\" class=\"aligncenter size-full wp-image-3856\" srcset=\"https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/easy-to-read-wordpress-1.png 1110w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/easy-to-read-wordpress-1-300x188.png 300w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/easy-to-read-wordpress-1-768x480.png 768w, https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/easy-to-read-wordpress-1-1024x640.png 1024w\" sizes=\"(max-width: 1110px) 100vw, 1110px\" \/><\/p>\n<p>You can also customize the CSS in <strong>style.css<\/strong> file.<\/p>\n<p>While the customization is subjective and depends on your need, let me introduce you a course which I personally took to understand about working with WordPress themes and it&#8217;s development.<\/p>\n<h2>Building WordPress Theme Video Course<\/h2>\n<p>I have took this course to understand and learn about WordPress theme. If you are an aspirant developer who is willing to learn the working of WordPress themes then believe me this is the best thing for you.<\/p>\n<p><center><i class=\"fa fa-github\"><\/i>Click Here to Enroll the WordPress Theme Course<\/center><\/p>\n<p>The biggest advantage of taking this course is that you really don&#8217;t need to know about WordPress, HTML, PHP or anything. It starts with an introduction of each of them followed by resources to learn these technologies and so on. <\/p>\n<p>I got this course for free ( Perks of being a blogger ) to test it out and provide feedback. I am seriously amazed and I highly recommend you this course if you really willing to learn WordPress theme development from scratch.<\/p>\n<h2>Conclusion<\/h2>\n<p>WordPress is used by approx 70 million websites. That&#8217;s a lot. If you learn how to build attractive WordPress theme, I bet you will make 6 figures by working from home without any doubt. Check out the video course and do let me know if this useful to you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress themes are complex to code. You need to understand the working of WordPress as CMS, WordPress hooks, and functions before you begin to code. There are tons of tutorials on the first page of Google explaining how to build WordPress theme from scratch i.e code each part and module. In this article, we are [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_surecart_dashboard_logo_width":"180px","_surecart_dashboard_show_logo":true,"_surecart_dashboard_navigation_orders":true,"_surecart_dashboard_navigation_invoices":true,"_surecart_dashboard_navigation_subscriptions":true,"_surecart_dashboard_navigation_downloads":true,"_surecart_dashboard_navigation_billing":true,"_surecart_dashboard_navigation_account":true,"_uag_custom_page_level_css":"","footnotes":""},"categories":[86,18],"tags":[],"class_list":["post-3847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-tutorial"],"blocksy_meta":[],"uagb_featured_image_src":{"full":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner.png",820,280,false],"thumbnail":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner-150x150.png",150,150,true],"medium":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner-300x102.png",300,102,true],"medium_large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner-768x262.png",768,262,true],"large":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner.png",820,280,false],"1536x1536":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner.png",820,280,false],"2048x2048":["https:\/\/codeforgeek.com\/wp-content\/uploads\/2017\/01\/wordpress-theme-banner.png",820,280,false]},"uagb_author_info":{"display_name":"Shahid","author_link":"https:\/\/codeforgeek.com\/author\/shahid\/"},"uagb_comment_info":0,"uagb_excerpt":"WordPress themes are complex to code. You need to understand the working of WordPress as CMS, WordPress hooks, and functions before you begin to code. There are tons of tutorials on the first page of Google explaining how to build WordPress theme from scratch i.e code each part and module. In this article, we are&hellip;","_links":{"self":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/3847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/comments?post=3847"}],"version-history":[{"count":0,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/posts\/3847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media\/3860"}],"wp:attachment":[{"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/media?parent=3847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/categories?post=3847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeforgeek.com\/wp-json\/wp\/v2\/tags?post=3847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}