{"id":14839,"date":"2020-06-12T14:12:34","date_gmt":"2020-06-12T14:12:34","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=14839"},"modified":"2020-06-13T04:49:12","modified_gmt":"2020-06-13T04:49:12","slug":"how-to-create-a-wordpress-custom-theme-part-4","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-create-a-wordpress-custom-theme-part-4\/","title":{"rendered":"How to create a WordPress custom theme? Part-4"},"content":{"rendered":"\n<p>How to create a WordPress custom theme?<\/p>\n\n\n\n<p>It&#8217;s looking improper yet, therefore we have to set the path of <strong>CSS and JavaScript<\/strong> to make it on proper website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62-1024x576.png\" alt=\"\" class=\"wp-image-14840\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-62.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li>So, go to your downloaded HTML theme and copy that files which consist of CSS and JavaScript files.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64-1024x576.png\" alt=\"\" class=\"wp-image-14842\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-64.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>2. Go to your WordPress customtheme folder and paste here that files.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65-1024x576.png\" alt=\"\" class=\"wp-image-14843\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-65.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>3. Linking by this<strong> get_bloginfo();<\/strong> function to set the directory.  Retrieves information about the current site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75-1024x576.png\" alt=\"\" class=\"wp-image-14853\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-75.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73-1024x576.png\" alt=\"\" class=\"wp-image-14851\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-73.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>4. If you refresh your website url, you&#8217;ll see a progress bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67-1024x576.png\" alt=\"\" class=\"wp-image-14845\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-67.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>5. In footer.php file, pass this function within <strong>src=&#8221;&#8221;  path. <\/strong>JavaScript file will be linked to the<strong> <\/strong>localhost.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68-1024x576.png\" alt=\"\" class=\"wp-image-14846\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-68.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>6. Now, CSS files have been linked to our root path of customtheme and looking awesome. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69-1024x576.png\" alt=\"\" class=\"wp-image-14847\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-69.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>7. Just right click on your website theme and click view page source.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71-1024x576.png\" alt=\"\" class=\"wp-image-14849\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-71.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>8. The CSS files has been linked to your localhost root.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72-1024x576.png\" alt=\"\" class=\"wp-image-14850\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72-1024x576.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72-300x169.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72-768x432.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72-355x199.png 355w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/06\/image-72.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create a WordPress custom theme? It&#8217;s looking improper yet, therefore we have to set the path of CSS and JavaScript to make it on proper website. So, go&#8230; <\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5150],"tags":[],"class_list":["post-14839","post","type-post","status-publish","format-standard","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=14839"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14839\/revisions"}],"predecessor-version":[{"id":14863,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/14839\/revisions\/14863"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=14839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=14839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=14839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}