{"id":403,"date":"2017-03-06T12:26:47","date_gmt":"2017-03-06T12:26:47","guid":{"rendered":"https:\/\/www.vibidsoft.com\/blog\/?p=403"},"modified":"2025-04-18T11:01:13","modified_gmt":"2025-04-18T11:01:13","slug":"how-to-build-a-custom-wordpress-theme-from-scratch","status":"publish","type":"post","link":"https:\/\/www.vibidsoft.com\/blog\/how-to-build-a-custom-wordpress-theme-from-scratch\/","title":{"rendered":"How to Build a Custom WordPress Theme from Scratch"},"content":{"rendered":"<h4>There are around 12 core files. Here is Overview of the main files you will be working with:<\/h4>\n<p>\u2022 Header.php &#8211; Contains everything you\u2019d want to appear at the top of your site.<br \/>\n\u2022 Index.php \u2013 The core file that load your theme, also act as the homepage.<br \/>\n\u2022 Functions.php \u2013 A file that can be used to configure the wordpress core,<br \/>\nWithout editing core files.<br \/>\n\u2022 Sidebar.php \u2013 Contains everything you\u2019d want to appear in sidebar.<br \/>\n\u2022 Footer.php \u2013 Contains everything you\u2019d want to appear at the bottom of your site.<br \/>\n\u2022 Archive.php \u2013 The template file used when viewing categories, dates, posts by author,etc.<br \/>\n\u2022 Single.php \u2013 The template file used when viewing the individual post.<br \/>\n\u2022 Comments.php \u2013 Called at the bottom of single.php file to enable the comments section.<br \/>\n\u2022 Page.php \u2013 Similar to single.php<br \/>\n\u2022 Search.php \u2013 The template file used to search display search results.<br \/>\n\u2022 404.php \u2013 The template file that display when a 404 error occurs.<br \/>\n\u2022 Style.css &#8211; All the styling goes here.<\/p>\n<p>Each of these files contains series of php template tag. By using these tags we can insert dynamic content.<\/p>\n<h4>\u2022 Configuring the stylesheet<\/h4>\n<p>All the details of a WordPress theme are contained within the stylesheet. At the top of your style.css add the following code.<\/p>\n<pre>\/*\nTheme Name: Vibidsoft\nTheme URI: http:\/\/www.vibidsoft.in\/\nDescription: Vibidsoft WordPress theme\nVersion: 1\nAuthor: Vibidsoft\nAuthor URI: http:\/\/www.vibidsoft.in\/\t\t\n*\/\n<\/pre>\n<h4>index.php<\/h4>\n<h5>Open the index.php, add this piece of code and save the file:<\/h5>\n<pre>&lt;?php get_header(); ?&gt;\n\n&lt;div id=\"container\"&gt;\n\n  &lt;?php if(have_posts()) : ?&gt;&lt;?php while(have_posts()) : the_post(); ?&gt;\n\n     &lt;div class=\"post\" id=\"post-&lt;?php the_ID(); ?&gt;\"&gt;\n\n&lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\"&gt;\n          &lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n\n&lt;div class=\"entry\"&gt;\n\n &lt;?php the_content(); ?&gt;\n\n&lt;p class=\"postmetadata\"&gt;\n&lt;?php _e('Filed under&amp;#58;'); ?&gt; &lt;?php the_category(', ') ?&gt; &lt;?php _e('by'); ?&gt; \n&lt;?php  the_author(); ?&gt;&lt;br \/&gt;\n&lt;?php comments_popup_link('No Comments &amp;#187;', '1 Comment &amp;#187;', '% Comments &amp;#187;'); ?&gt; \n&lt;?php edit_post_link('Edit', ' &amp;#124; ', ''); ?&gt;\n&lt;\/p&gt;\n\n&lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;?php endwhile; ?&gt;\n\n&lt;div class=\"navigation\"&gt;\n&lt;?php posts_nav_link(); ?&gt;\n&lt;\/div&gt;\n\n\n&lt;?php endif; ?&gt;\n\n&lt;\/div&gt;\n\n&lt;?php get_sidebar(); ?&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n<p>The index-file now contains the code that calls to the header, sidebar and footer template files<\/p>\n<h4>header.php<\/h4>\n<h5>Open the header.php, add this piece of code and save the file:<\/h5>\n<pre>&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \n\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n&lt;head profile=\"http:\/\/gmpg.org\/xfn\/11\"&gt;\n\n     &lt;title&gt;&lt;?php bloginfo('name'); ?&gt;&lt;?php wp_title(); ?&gt;&lt;\/title&gt;\n\n     &lt;meta http-equiv=\"Content-Type\" content=\"&lt;?php bloginfo('html_type'); ?&gt;; \n     charset=&lt;?php bloginfo('charset'); ?&gt;\" \/&gt;\t\n     &lt;meta name=\"generator\" content=\"WordPress &lt;?php bloginfo('version'); ?&gt;\" \/&gt; \n     &lt;!-- leave this for stats please --&gt;\n\n     &lt;link rel=\"stylesheet\" href=\"&lt;?php bloginfo('stylesheet_url'); ?&gt;\" \n     type=\"text\/css\" media=\"screen\" \/&gt;\n\n     &lt;?php wp_get_archives('type=monthly&amp;format=link'); ?&gt;\n     &lt;?php \/\/comments_popup_script(); \/\/ off by default ?&gt;\n     &lt;?php wp_head(); ?&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div id=\"wrapper\"&gt;\n\n&lt;div id=\"header\"&gt;\n\n&lt;h1&gt;&lt;a href=\"&lt;?php bloginfo('url'); ?&gt;\"&gt;&lt;?php bloginfo('name'); ?&gt;&lt;\/a&gt;&lt;\/h1&gt;\n&lt;?php bloginfo('description'); ?&gt;\n\n&lt;\/div&gt;<\/pre>\n<h4>footer.php<\/h4>\n<h5>Open the footer.php, add this piece of code and save the file:<\/h5>\n<pre>&lt;div id=\"footer\"&gt;\n&lt;p&gt;\nCopyright 2007 &lt;a href=\"&lt;?php bloginfo('url'); ?&gt;\"&gt;&lt;?php bloginfo('name'); ?&gt;&lt;\/a&gt;\n&lt;\/p&gt;\n&lt;\/div&gt;\n\n&lt;\/div&gt;&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h4>sidebar.php<\/h4>\n<h5>Open the sidebar.php, add this piece of code and save the file:<\/h5>\n<pre>&lt;div class=\"sidebar\"&gt;\n\n&lt;ul&gt;\n\n&lt;?php if ( function_exists('dynamic_sidebar') &amp;&amp; dynamic_sidebar() ) : else : ?&gt;\n\n\t&lt;?php wp_list_pages('depth=3&amp;title_li=&lt;h2&gt;Pages&lt;\/h2&gt;'); ?&gt;\n\n\t&lt;li&gt;&lt;h2&gt;&lt;?php _e('Categories'); ?&gt;&lt;\/h2&gt;\n&lt;ul&gt;\n&lt;?php wp_list_cats('sort_column=name&amp;optioncount=1&amp;hierarchical=0'); ?&gt;\n&lt;\/ul&gt;\n\t&lt;\/li&gt;\n\n\t&lt;li&gt;&lt;h2&gt;&lt;?php _e('Archives'); ?&gt;&lt;\/h2&gt;\n&lt;ul&gt;\n&lt;?php wp_get_archives('type=monthly'); ?&gt;\n&lt;\/ul&gt;\n&lt;\/li&gt;\n\n&lt;?php get_links_list(); ?&gt;\n\n&lt;?php endif; ?&gt;\n\n&lt;\/ul&gt;\n\n&lt;\/div&gt;<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>There are around 12 core files. Here is Overview of the main files you will be working with: \u2022 Header.php &#8211; Contains everything you\u2019d want to appear at the top of your site. \u2022 Index.php \u2013 The core file that&#8230; <a class=\"more-link\" href=\"https:\/\/www.vibidsoft.com\/blog\/how-to-build-a-custom-wordpress-theme-from-scratch\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[103,1,120],"tags":[111,134,73,121,122],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/403"}],"collection":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":40,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"predecessor-version":[{"id":2308,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/posts\/403\/revisions\/2308"}],"wp:attachment":[{"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vibidsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}