{"id":28338,"date":"2021-08-19T08:01:00","date_gmt":"2021-08-19T13:01:00","guid":{"rendered":"https:\/\/www.hostgator.com\/blog\/?p=28338"},"modified":"2021-08-24T09:09:38","modified_gmt":"2021-08-24T14:09:38","slug":"how-build-wordpress-themes","status":"publish","type":"post","link":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/","title":{"rendered":"How (and Why) to Build Your Own WordPress Themes"},"content":{"rendered":"\n<p>Yes, there are&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/best-free-wordpress-themes\/\">thousands of WordPress themes&nbsp;available<\/a>, but what if you can\u2019t find exactly what you want for your own website or for your clients? DIY is always an&nbsp;option and&nbsp;building a custom WordPress theme offers some advantages that ready-made templates don\u2019t always provide.&nbsp;<\/p>\n\n\n\n<p>Building your own WordPress theme means you can include exactly the features your website needs-and only those features. That means you won\u2019t have to sort through a pre-built template\u2019s dozens of features to find the sections you need to work on when it\u2019s update time.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It also means you can create a site that loads faster because it\u2019s not weighed down by features that you\u2019re not using. That\u2019s an important consideration for businesses that want to keep customers from getting impatient and leaving. It can also help you improve your site\u2019s SEO, because Google prioritizes sites with faster page load speeds.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"hgrp\"><h4>You might like&#8230;<\/h4><ul><li><span class=\"prod-icon\"><a href=\"https:\/\/www.hostgator.com\/vps-hosting\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"button\" data-element-label=\"vps_hosting\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/vps-hosting-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/vps-hosting-150x150.png 150w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/vps-hosting-300x300.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/vps-hosting.png 500w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/span><a href=\"https:\/\/www.hostgator.com\/vps-hosting\" class=\"hgrp-link\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"link\" data-element-label=\"vps_hosting\">VPS Hosting<\/a><\/li><li><span class=\"prod-icon\"><a href=\"https:\/\/www.hostgator.com\/managed-wordpress-hosting\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"button\" data-element-label=\"wordpress_hosting\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-150x150.png 150w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting-300x300.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2020\/11\/wp-hosting.png 500w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/span><a href=\"https:\/\/www.hostgator.com\/managed-wordpress-hosting\" class=\"hgrp-link\" data-element-location=\"body.post_content.related_prod_block\" data-element-type=\"link\" data-element-label=\"wordpress_hosting\">WordPress Hosting<\/a><\/li><\/ul><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-skills-and-knowledge-do-you-need-to-build-wordpress-themes\">What skills and knowledge do you need to&nbsp;build WordPress themes?&nbsp;<\/h2>\n\n\n\n<p>It depends, because building a theme for a basic blog site is different from building an eCommerce theme. However, no matter what kind of WordPress theme you want to make, it&nbsp;<strong>helps to know some PHP<\/strong>&nbsp;because you pretty much can\u2019t build without it.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It\u2019s&nbsp;also a good idea to&nbsp;<strong>be familiar with WordPress<\/strong>&nbsp;before you begin, so that you have a sense&nbsp;of which features are standard across&nbsp;WordPress&nbsp;sites.&nbsp;&nbsp;<\/p>\n\n\n\n<p>You\u2019ll also need patience to look things up in the&nbsp;<a href=\"https:\/\/codex.wordpress.org\/Theme_Development\" target=\"_blank\" rel=\"noopener\">theme development section of the WordPress Codex<\/a>&nbsp;as you work, to answer all the little questions that come up as you\u2019re building. Fortunately, finding what you need can be as easy as&nbsp;Googling &#8220;show [component] WordPress codex&#8221;&#8211;for example, &#8220;show featured image WordPress codex&#8221; or &#8220;show date WordPress codex.&#8221;&nbsp;<\/p>\n\n\n\n<p>With some PHP&nbsp;know-how&nbsp;and WordPress knowledge,&nbsp;it\u2019s possible to create simple custom themes&nbsp;even if you don\u2019t know how to code. That\u2019s&nbsp;because there&nbsp;are resources you can use to&nbsp;find code snippets you need to add functionality and features to your theme.&nbsp;&nbsp;<\/p>\n\n\n\n<p>What you may need help with is the process, which is the goal of this post. For example,&nbsp;if&nbsp;you\u2019re brand-new to&nbsp;WordPress&nbsp;developing,&nbsp;you&nbsp;may not know what&nbsp;enqueueing a script is.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Pro tip:<\/strong>&nbsp;Enqueueing is a&nbsp;way to add stylesheets and JavaScript efficiently. That\u2019s because&nbsp;these WordPress functions&nbsp;will cross-check against the core and plugin stylesheets and JavaScript to make sure that you don&#8217;t run into any conflicts. Enqueueing also helps to keep your theme code organized, so it\u2019s easier for you or other developers to update. And these functions&nbsp;allow you to&nbsp;use included WordPress included libraries for faster theme-building.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-long-does-it-take-to-build-a-wordpress-theme\">How long does it take to build&nbsp;a&nbsp;WordPress&nbsp;theme?&nbsp;<\/h2>\n\n\n\n<p>The exact amount of time you\u2019ll need varies, depending on the complexity of your theme idea and your level of skill. Forty to sixty hours is a good ballpark estimate.&nbsp;&nbsp;<\/p>\n\n\n\n<p>For beginners, much of that time will be spent looking up what you need to know. More experienced developers will probably use that much time to create more complex themes and get all the commands right.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-ready-to-build-a-wordpress-theme\">Ready to build a WordPress theme?&nbsp;<\/h2>\n\n\n\n<p>Doing things in the right order will save you a lot of time, especially when you\u2019re new at it. Here\u2019s the process I use.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-plan-and-wireframe-your-theme\">1. Plan and wireframe your theme.&nbsp;<\/h3>\n\n\n\n<p>With any web project, you should figure out what your theme is going to look like and what it\u2019s going to do before you start coding. The main page layouts I wireframe are the home page, post page and a general archive page (for tags or category browsing and search result pages). That should cover you for a basic blog or informational site.&nbsp;<\/p>\n\n\n\n<p>You\u2019ll need a few tools to plan and revise your wireframe:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Sketch pad.<\/strong>&nbsp;Before you start designing digitally, sketch out what you want on paper. I use a dot-grid notebook to figure out what I want on&nbsp;my homepage, for example, and where that content will go. Once I grid those blocks out and have the concept, then it\u2019s time to make a digital wireframe.&nbsp;<\/li><li><strong>Digital wireframing&nbsp;app.<\/strong>&nbsp;Adobe Illustrator&nbsp;is a good choice if you have a design background because it lets you lay things out easily, but there are other wireframing tools out there. You can even use the drawing app on your tablet or phone&nbsp;or&nbsp;Insert &gt; Shapes in Word. If you can&nbsp;use an app to&nbsp;trace boxes, you can use it to make&nbsp;a simple wireframe.&nbsp;&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-create-your-theme-file\">2. Create your theme file.&nbsp;<\/h3>\n\n\n\n<p>You don\u2019t have to start from scratch. One of my favorite tools is&nbsp;Underscores&nbsp;(aka _s),&nbsp;which is built by Automattic, the people that built WordPress. It\u2019s essentially a minimalist boilerplate template that covers the WordPress website basics without styling or extras.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"131\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-1-1024x131.png\" alt=\"underscores template you can use to create wordpress themes\" class=\"wp-image-28339\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-1-1024x131.png 1024w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-1-300x38.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-1-768x98.png 768w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-1.png 1292w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Image: Underscores<\/em>&nbsp;<\/figcaption><\/figure>\n\n\n\n<p>Start by entering the name of your theme-to-be on the&nbsp;<a href=\"https:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores homepage<\/a>&nbsp;and clicking 'Generate.'\u009d The site uses the latest build from the&nbsp;<a href=\"https:\/\/github.com\/Automattic\/_s\" target=\"_blank\" rel=\"noopener\">Underscores GitHub repo<\/a>&nbsp;to create a ZIP file for you.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-set-up-the-standard-wordpress-functions-and-features-you-want-to-use\">3. Set up the standard WordPress functions and features you want to use.&nbsp;<\/h3>\n\n\n\n<p>After you download and unzip your Underscores theme file, you can open&nbsp;functions.php&nbsp;in Microsoft Visual Studio so you can edit code for the theme.&nbsp;&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"549\" src=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-2.png\" alt=\"use microsoft visual studio to edit wordpress theme code\" class=\"wp-image-28341\" srcset=\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-2.png 924w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-2-300x178.png 300w, https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/image-2-768x456.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><figcaption>Image: GitHub&nbsp;<\/figcaption><\/figure>\n\n\n\n<p>First, check to see which functions are already turned on. For example, search forms, comments and galleries are already activated in Underscores, so you don\u2019t need to add anything to get those features. One menu and one sidebar are also already registered through the functions file in your theme, which you can copy, paste, and edit to fit your needs.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-pull-all-the-dependencies-you-want-for-your-theme\">4. Pull all the dependencies you want for your theme.&nbsp;<\/h3>\n\n\n\n<p>If you want to&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/sidebars-and-widgets-wordpress-guide\/\">add sidebars<\/a>, scripts, stylesheets or other functionality, this is where to do it. You can find the enqueue functions here that are required for any libraries you\u2019ll need-like Bootstrap, jQuery, Font Awesome-plus any JavaScript- or CSS-based dependency files.&nbsp;&nbsp;<\/p>\n\n\n\n<p>If your wireframe calls for multiple sidebars, like a social sidebar on your homepage and a 'recent posts'\u009d sidebar on your blog page, you\u2019ll register those different sidebars in the functions file. You\u2019re not done collecting your code resources yet. Google\u2019s jQuery library<strong>&nbsp;<\/strong>gives you the link to hosted JavaScript libraries that you can load on your site. They\u2019re already on&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/what-is-content-delivery-network\/\">a CDN (content delivery network) which helps your site to load faster<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Pro tip:<\/strong>&nbsp;Sometimes you have to download them directly and add them to the folder in _s. For example, if you&#8217;re working with a site that requires PCI compliance (a security must if your site processes card payments), all third-party dependencies must be loaded directly from your web server. You can add these into the \/inc&nbsp;folder.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-build-your-front-end-functionality\">5. Build your front-end functionality.&nbsp;<\/h3>\n\n\n\n<p>What do you want to appear on your site? This step is where you build it.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It\u2019s helpful to start with&nbsp;the content&nbsp;that will appear on every page. For example, I set up the header and footer first. I also usually add a&nbsp;home.php, duplicated from the&nbsp;index.php, so I can build a custom home page where I usually&nbsp;start&nbsp;I create the header and footer code.&nbsp;<\/p>\n\n\n\n<p>Everything between them, like menus and sidebars, may vary depending on the&nbsp;page template. At this point, you can build your main index template (index.php), then the single post template (single.php), then the archives and any additional page templates you need. You can use the&nbsp;<a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\" target=\"_blank\" rel=\"noopener\">WordPress theme template hierarchy<\/a>&nbsp;as a guide.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This&nbsp;stage is when you can expect to send some time referencing the codex, to answer questions like 'How do I call the page title?'\u009d and 'How do I call this list of categories and get it to display?'\u009d WordPress has very good documentation, but you can expect to toggle back and forth a lot as you work.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-style-your-theme-template\">6. Style your theme template.&nbsp;<\/h3>\n\n\n\n<p>Once your code and front-end are all together, it\u2019s style time! It\u2019s most efficient to start your stylesheet with the mobile version of your WordPress theme, because that\u2019s the foundational, minimal amount of styling.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Your next stylesheet step is a small tablet, then a large tablet, then a desktop, progressively adding on more styling as you go.&nbsp;&nbsp;<\/p>\n\n\n\n<p>These are the media queries you&#8217;ll place at the end of your mobile stylesheet to target these progressively larger devices (&#8220;&#8230;&#8221; is where the style code goes):\u00a0<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Small devices (landscape phones, 576px and up)\n@media (min-width: 576px) { ... } \n\n\/\/ Medium devices (tablets, 768px and up)\n@media (min-width: 768px) { ... } \n\n\/\/ Large devices (desktops, 992px and up)\n@media (min-width: 992px) { ... }\n\n\/\/ Extra large devices (large desktops, 1200px and up)\n@media (min-width: 1200px) { ... } <\/code><\/pre>\n\n\n\n<p>Working in this order helps keep your code clean and ensures that your theme&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/what-is-responsive-web-design\/\">looks good on all kinds of devices<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p><strong>Pro tip:<\/strong>&nbsp;If you&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/add-bootstrap-to-wordpress\/\">use Bootstrap<\/a>, you can set some of the positioning while you\u2019re programming out your layout and functionality (step 5). That\u2019s because Bootstrap has classes built into it that you can add to tags for faster formatting. You can also use Bootstrap to block out page elements, so you have to do less styling and spend less time manually positioning all the elements in the template&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-7-test-your-theme-template\">7. Test your theme template.&nbsp;<\/h3>\n\n\n\n<p>You can create test environments by setting up subdomains&nbsp;on your website\u2019s hosting, or you can get&nbsp;<a href=\"https:\/\/www.hostgator.com\/blog\/things-you-can-do-with-vps\/\">VPS hosting&nbsp;<\/a>&nbsp;for a separate, private sandbox.&nbsp;There\u2019s also an&nbsp;<a href=\"https:\/\/github.com\/Varying-Vagrant-Vagrants\/VVV\" target=\"_blank\" rel=\"noopener\">application called VVV<\/a>&nbsp;you can download from GitHub and use to build your test site locally on your computer.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Check your test site on as many different devices and browsers as you can, to make sure your WordPress theme works right everywhere. When you\u2019re satisfied that it looks and works the way you want it to, it\u2019s time to take that last big step.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-8-publish-your-wordpress-theme\">8. Publish your WordPress theme!&nbsp;<\/h3>\n\n\n\n<p>When you\u2019re done testing through VVV, zip up the theme folder like you would any other folder on your computer (right-click &#8220;compress&#8221; or &#8220;archive&#8221;) to create a version of the theme you can upload through the dashboard. If you have FTP access to your server, you can also use an FTP uploader. Then go to the Themes section of your WordPress dashboard, run your live preview, and when you\u2019re ready, save and activate your new theme.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Ready to start making and testing your own WordPress themes? Get the sandbox you need with&nbsp;our&nbsp;<a href=\"https:\/\/www.hostgator.com\/vps-hosting\">VPS hosting plans<\/a>.&nbsp;&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yes, there are&nbsp;thousands of WordPress themes&nbsp;available, but what if you can\u2019t find exactly what you want for your own website&#8230;<\/p>\n","protected":false},"author":190,"featured_media":28344,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[134,125,121],"class_list":["post-28338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-hosting-tips","tag-next-level-wordpress","tag-vps-hosting","tag-wordpress-hosting"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.2 (Yoast SEO v23.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How (and Why) to Build Your Own WordPress Themes - HostGator<\/title>\n<meta name=\"description\" content=\"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here&#039;s your step-by-step guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How (and Why) to Build Your Own WordPress Themes\" \/>\n<meta property=\"og:description\" content=\"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here&#039;s your step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\" \/>\n<meta property=\"og:site_name\" content=\"HostGator\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/HostGator\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/samjeansoper\/\u00c2\u00a0\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-19T13:01:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-24T14:09:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Samantha Soper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@samjeansoper\" \/>\n<meta name=\"twitter:site\" content=\"@HostGator\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Samantha Soper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\"},\"author\":{\"name\":\"Samantha Soper\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/1518b3e081314da91f8fcd8861e56b7c\"},\"headline\":\"How (and Why) to Build Your Own WordPress Themes\",\"datePublished\":\"2021-08-19T13:01:00+00:00\",\"dateModified\":\"2021-08-24T14:09:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\"},\"wordCount\":1876,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg\",\"keywords\":[\"Next Level WordPress\",\"VPS Hosting\",\"WordPress Hosting\"],\"articleSection\":[\"Web Hosting Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\",\"name\":\"How (and Why) to Build Your Own WordPress Themes - HostGator\",\"isPartOf\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg\",\"datePublished\":\"2021-08-19T13:01:00+00:00\",\"dateModified\":\"2021-08-24T14:09:38+00:00\",\"description\":\"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here's your step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg\",\"width\":1200,\"height\":629,\"caption\":\"how to limit a client's ability to change a wordpress theme\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.hostgator.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How (and Why) to Build Your Own WordPress Themes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#website\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"name\":\"HostGtaor\",\"description\":\"Web Hosting and Marketing Tips for Entrepreneurs\",\"publisher\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#organization\",\"name\":\"HostGtaor\",\"url\":\"https:\/\/www.hostgator.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"contentUrl\":\"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png\",\"width\":1092,\"height\":215,\"caption\":\"HostGtaor\"},\"image\":{\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/HostGator\",\"https:\/\/x.com\/HostGator\",\"https:\/\/www.instagram.com\/hostgator\",\"https:\/\/www.linkedin.com\/company\/hostgator-com\",\"https:\/\/www.pinterest.com\/hostgator\/\",\"https:\/\/www.youtube.com\/user\/hostgator\"],\"email\":\"support@gator.com\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/1518b3e081314da91f8fcd8861e56b7c\",\"name\":\"Samantha Soper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5f75036ce61011e6b2490bdc6c92fb9f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5f75036ce61011e6b2490bdc6c92fb9f?s=96&d=mm&r=g\",\"caption\":\"Samantha Soper\"},\"description\":\"Samantha Soper is a freelance UX strategist, front-end developer, and creative consultant, working with businesses and non-profits of all sizes to help manage their online presence and brand experience. She also runs a mural art and illustration\u00c2\u00a0business. Related links at: samsoper.art\/links\/\",\"sameAs\":[\"https:\/\/samanthasoper.com\/\",\"https:\/\/www.facebook.com\/samjeansoper\/\u00c2\u00a0\",\"https:\/\/www.instagram.com\/samsoper.art\/\",\"https:\/\/www.linkedin.com\/in\/samanthasoper\/\",\"https:\/\/x.com\/samjeansoper\",\"https:\/\/www.youtube.com\/channel\/UC9xt-5Jbq3aq24VGCtmYEfg\"],\"url\":\"https:\/\/www.hostgator.com\/blog\/author\/ssoper\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How (and Why) to Build Your Own WordPress Themes - HostGator","description":"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here's your step-by-step guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/","og_locale":"en_US","og_type":"article","og_title":"How (and Why) to Build Your Own WordPress Themes","og_description":"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here's your step-by-step guide.","og_url":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/","og_site_name":"HostGator","article_publisher":"https:\/\/www.facebook.com\/HostGator","article_author":"https:\/\/www.facebook.com\/samjeansoper\/\u00c2\u00a0","article_published_time":"2021-08-19T13:01:00+00:00","article_modified_time":"2021-08-24T14:09:38+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/www.hostgator.com\/blog\/wp-content\/\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg","type":"image\/jpeg"}],"author":"Samantha Soper","twitter_card":"summary_large_image","twitter_creator":"@samjeansoper","twitter_site":"@HostGator","twitter_misc":{"Written by":"Samantha Soper","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#article","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/"},"author":{"name":"Samantha Soper","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/1518b3e081314da91f8fcd8861e56b7c"},"headline":"How (and Why) to Build Your Own WordPress Themes","datePublished":"2021-08-19T13:01:00+00:00","dateModified":"2021-08-24T14:09:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/"},"wordCount":1876,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg","keywords":["Next Level WordPress","VPS Hosting","WordPress Hosting"],"articleSection":["Web Hosting Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/","url":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/","name":"How (and Why) to Build Your Own WordPress Themes - HostGator","isPartOf":{"@id":"https:\/\/www.hostgator.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg","datePublished":"2021-08-19T13:01:00+00:00","dateModified":"2021-08-24T14:09:38+00:00","description":"Sure, there are 1000s of WordPress themes available, but what if you want to build your own? Here's your step-by-step guide.","breadcrumb":{"@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#primaryimage","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2021\/08\/How-to-build-your-own-WordPress-theme.jpg","width":1200,"height":629,"caption":"how to limit a client's ability to change a wordpress theme"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostgator.com\/blog\/how-build-wordpress-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostgator.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How (and Why) to Build Your Own WordPress Themes"}]},{"@type":"WebSite","@id":"https:\/\/www.hostgator.com\/blog\/#website","url":"https:\/\/www.hostgator.com\/blog\/","name":"HostGtaor","description":"Web Hosting and Marketing Tips for Entrepreneurs","publisher":{"@id":"https:\/\/www.hostgator.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostgator.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hostgator.com\/blog\/#organization","name":"HostGtaor","url":"https:\/\/www.hostgator.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","contentUrl":"https:\/\/www.hostgator.com\/blog\/wp-content\/uploads\/2019\/04\/cropped-HG-Logo_default-default.png","width":1092,"height":215,"caption":"HostGtaor"},"image":{"@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/HostGator","https:\/\/x.com\/HostGator","https:\/\/www.instagram.com\/hostgator","https:\/\/www.linkedin.com\/company\/hostgator-com","https:\/\/www.pinterest.com\/hostgator\/","https:\/\/www.youtube.com\/user\/hostgator"],"email":"support@gator.com"},{"@type":"Person","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/1518b3e081314da91f8fcd8861e56b7c","name":"Samantha Soper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hostgator.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5f75036ce61011e6b2490bdc6c92fb9f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5f75036ce61011e6b2490bdc6c92fb9f?s=96&d=mm&r=g","caption":"Samantha Soper"},"description":"Samantha Soper is a freelance UX strategist, front-end developer, and creative consultant, working with businesses and non-profits of all sizes to help manage their online presence and brand experience. She also runs a mural art and illustration\u00c2\u00a0business. Related links at: samsoper.art\/links\/","sameAs":["https:\/\/samanthasoper.com\/","https:\/\/www.facebook.com\/samjeansoper\/\u00c2\u00a0","https:\/\/www.instagram.com\/samsoper.art\/","https:\/\/www.linkedin.com\/in\/samanthasoper\/","https:\/\/x.com\/samjeansoper","https:\/\/www.youtube.com\/channel\/UC9xt-5Jbq3aq24VGCtmYEfg"],"url":"https:\/\/www.hostgator.com\/blog\/author\/ssoper\/"}]}},"_links":{"self":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/28338"}],"collection":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/comments?post=28338"}],"version-history":[{"count":2,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/28338\/revisions"}],"predecessor-version":[{"id":28376,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/posts\/28338\/revisions\/28376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media\/28344"}],"wp:attachment":[{"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/media?parent=28338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/categories?post=28338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostgator.com\/blog\/wp-json\/wp\/v2\/tags?post=28338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}