{"id":37404,"date":"2023-11-28T07:00:36","date_gmt":"2023-11-28T15:00:36","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=37404"},"modified":"2025-05-21T19:09:32","modified_gmt":"2025-05-22T02:09:32","slug":"guide-to-developing-a-wp-theme","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/","title":{"rendered":"So You Want To Build Your Own Custom WordPress Theme?"},"content":{"rendered":"\n<p>If you want something done a certain way \u2014 well, you just might have to do it yourself. While plenty of great <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-find-wp-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress themes<\/a> are available, finding one that meets your specific requirements may prove difficult. In your search for the perfect solution, you might be tempted to create your own custom WordPress theme.<\/p>\n\n\n\n<p>Fortunately, creating a custom theme for WordPress is a relatively straightforward process. Surprisingly, it doesn\u2019t require a ton of technical knowledge or experience with web development. Plus, building your own theme can be well worth the effort, since you can get your site looking exactly the way you want it.<\/p>\n\n\n\n<h2 id=\"design\" class=\"wp-block-heading\">Designing A Custom WordPress Website<\/h2>\n\n\n\n<p>You want your site to look great and have all the functionality you need, so you check out the <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\">WordPress Theme Directory<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"800\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes.jpg\" alt=\"screenshot of the wordpress themes main view with three theme options displayed \" class=\"wp-image-42452 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-1024x512.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-768x384.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP_Themes-1536x768.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-600x300.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1200x600.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-730x365.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1460x730.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-784x392.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-1568x784.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP_Themes-877x439.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/800;\" \/><\/figure>\n\n\n\n<p>Unfortunately, nothing you see fulfills your requirements, and you don\u2019t want to compromise on your vision. Maybe you want something unique to make your site stand out, but you don\u2019t want to spend the money on a premium theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page Builders<\/h3>\n\n\n\n<p>One option is to use a <a href=\"https:\/\/www.dreamhost.com\/website-builder\/\" target=\"_blank\" rel=\"noopener\">page builder<\/a> plugin. These tools allow you to take an existing theme and rearrange the layout to match your needs. Most popular page builders provide simple drag-and-drop controls with no coding requirements. Certain multipurpose themes come with this feature built-in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Block Themes<\/h3>\n\n\n\n<p>If you decide to try the native WordPress Editor, full site editing is a feature set in WordPress that includes several tools to make the design process more accessible for site owners.<\/p>\n\n\n\n<p>Using this new Site Editor, you can use drag-and-drop blocks to customize most of your site from a single interface, including page templates, without using code. Here is our complete <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener\">guide to Full Site Editing<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Theme Customization<\/h3>\n\n\n\n<p>If you choose a customizable theme, you can also adjust the look of your site without getting technical. Using the WordPress Customizer and the Theme Options panel, you should be able to adjust various design elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Color scheme<\/b>: From the background color of your site to the particular shade of your body text.<\/li>\n\n\n\n<li><b>Typography<\/b>: This covers the fonts used on your site and how text is displayed in various types of content.<\/li>\n\n\n\n<li><b>Layout<\/b>: Certain themes allow you to switch between different layouts and choose how your site should adapt to different screen sizes.<\/li>\n<\/ul>\n\n\n\n<p>The exact choice of options here will depend on the theme you choose and how it coordinates with the rest of your branding assets and <a href=\"https:\/\/www.hubspot.com\/campaign-assistant\" target=\"_blank\" rel=\"noreferrer noopener\">marketing campaigns<\/a>. Premium themes tend to be more generous with customization features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating A Child Theme<\/h3>\n\n\n\n<p>If you want more control, you could consider <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">creating a child theme<\/a>.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Child Theme<\/h3>\n    <p>A \u2018child theme\u2019 is a WordPress theme with the same appearance and functionality as its \u2018parent theme\u2019. However, you can customize its files separately from its parent theme\u2019s files.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/child-theme\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<p>Given the amount of choices in the WordPress Themes Directory,&nbsp; you will likely find a theme that meets some (if not all) of your needs. Rather than starting from a very basic template, you can adapt the existing theme to meet your vision.<\/p>\n\n\n\n<p>On the surface, a WordPress child theme works like any other theme. The key difference is that a child theme inherits attributes from a parent theme (the original theme you chose to use).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes.jpg\" alt=\"Four parent theme options displayed around an option to &quot;add your theme&quot; \" class=\"wp-image-42453 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/WP-child-themes-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/WP-child-themes-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>This relationship allows the child theme to override specific portions of the parent theme while retaining most of the parent&#8217;s appearance and functionality.<\/p>\n\n\n\n<p>Child themes provide an efficient method to customize an existing theme without modifying the parent theme files. Updating the parent and child themes for security and bug fixes is essential. Most often, only the parent theme will need to be updated.<\/p>\n\n\n\n<p>As such, using a child theme is an effective way of creating a unique online presence without diving too far into the world of development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Complete Control<\/h3>\n\n\n\n<p>Sometimes, even this isn&#8217;t enough. When you want to build something truly unique, it&#8217;s time to consider creating your own theme.<\/p>\n\n\n\n<p>Fortunately, developing a theme for WordPress is easier than you might think. Thanks to the platform\u2019s user-friendly interface and the numerous tools available, almost anyone can create a custom theme.<\/p>\n\n\n\n<p>We\u2019re going to take you through the process of creating your first theme. To get started, you\u2019ll need two things:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Your own <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-site-cost\/\" target=\"_blank\" rel=\"noopener\">WordPress website<\/a><\/li>\n\n\n\n<li>A <a href=\"https:\/\/www.dreamhost.com\/wordpress\/\" target=\"_blank\" rel=\"noopener\">quality hosting plan<\/a><\/li>\n<\/ul>\n\n\n\n<p>You\u2019ll also benefit from having experience with local <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">staging environments<\/a>, as you\u2019ll be using one to create your theme. Having some understanding of <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> and <a href=\"https:\/\/www.dreamhost.com\/blog\/learn-php\/\" target=\"_blank\" rel=\"noopener\">PHP<\/a> will also be helpful (although not strictly necessary).<\/p>\n\n\n\n<p>Finally, there\u2019s one important tool you\u2019ll want to have, which will make the process much easier: a starter theme.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"starter\" class=\"wp-block-heading\">What Is A Starter Theme? (And Why You Should Use One)<\/h2>\n\n\n\n<p>A starter theme is a bare-bones WordPress theme that you can use as a foundation to create your own. This enables you to build on a solid framework without worrying about the complexities of coding a theme from scratch. It will also help you understand how WordPress works by showing you the basic structure of a theme and how all its parts work together.<\/p>\n\n\n\n<p>There are plenty of excellent starter themes out there, including <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>, <a href=\"https:\/\/understrap.com\/\" target=\"_blank\" rel=\"noopener\">UnderStrap<\/a>, and <a href=\"https:\/\/themble.com\/bones\/\" target=\"_blank\" rel=\"noopener\">Bones<\/a> (to name just a few).<\/p>\n\n\n\n<p>We\u2019ll be using Underscores for our tutorial. It\u2019s a solid choice for beginners because it only contains the basics. Plus, this starter theme was developed by Automattic (the team behind WordPress.com), which means it\u2019s more likely to be safe, compatible, and well-supported in the long run.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>WordPress.com<\/h3>\n    <p>WordPress.com is the hosted version of WordPress. Since it provides a completely free plan option, WordPress.com is a popular platform for blogging and personal websites.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/wordpress-com\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Read More                    <\/a>\n\n<\/div>\n\n\n\n<h2 id=\"develop\" class=\"wp-block-heading\">How To Develop Your First WordPress Theme (In 5 Steps)<\/h2>\n\n\n\n<p>With the preparation out of the way, you\u2019re finally ready to start creating your first theme. As we mentioned earlier, we\u2019ll be using a starter theme for this walkthrough.<\/p>\n\n\n\n<p>However, if you want to try creating everything yourself with no template, you can do so, but that approach will require a lot more coding proficiency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Set Up A Local Environment<\/h3>\n\n\n\n<p>The first thing you\u2019ll need to do is to <a href=\"https:\/\/www.dreamhost.com\/blog\/website-staging-beginners-guide\/\" target=\"_blank\" rel=\"noopener\">create a local development environment<\/a>. This is effectively a server that you install on your computer, which you can use to develop and manage local WordPress sites. A local site is a safe way to develop a theme without impacting your live site.<\/p>\n\n\n\n<p>There are many ways you can create a local environment, but we\u2019ll be using <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local<\/a>. This is a fast, easy way to install a local version of WordPress for free and is compatible with both Mac and Windows:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"875\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local.jpg\" alt=\"Screenshot of Local's homepage declaring it &quot;The #1 local WordPress development tool&quot; \" class=\"wp-image-42454 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-300x164.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-1024x560.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-768x420.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Local-1536x840.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-600x328.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1200x656.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-730x399.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1460x798.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-784x429.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-1568x858.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Local-877x480.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/875;\" \/><\/figure>\n\n\n\n<p>To get started, select the free version of Local, choose your platform, add your details, and download the installer. When the installation has been completed, you can open the program on your computer.<\/p>\n\n\n\n<p>Here, you\u2019ll be asked to configure your new local environment:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP.jpg\" alt=\"Screenshot of the &quot;Set up WordPress&quot; step on local asking for the user's wordpress username, password, and email \" class=\"wp-image-42455 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Set-up-WP-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Set-up-WP-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>This is <a href=\"https:\/\/wpengine.com\/resources\/local-wordpress-development-environment-how-to\/\" target=\"_blank\" rel=\"noopener\">a straightforward process<\/a>, and you\u2019ll have your local WordPress site ready in a few minutes. Once set up, your new site will look and work exactly like a live WordPress website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Download And Install Your Starter Theme<\/h3>\n\n\n\n<p>Like most starter themes, <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a> is very easy to get started with. In fact, all you need to do is go to the website and name your theme:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1050\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores.jpg\" alt=\"screenshot of the initial Underscores theme declaring &quot;Create your underscores based theme&quot; with a &quot;theme name&quot; text box next to a &quot;generate&quot; button \" class=\"wp-image-42456 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-300x197.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-1024x672.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-768x504.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Underscores-1536x1008.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-600x394.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1200x788.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-730x479.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1460x958.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-784x515.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-1568x1029.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Underscores-877x576.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1050;\" \/><\/figure>\n\n\n\n<p>If you want, you can click on <i>Advanced Options<\/i> to customize the base theme further:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"550\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option.jpg\" alt=\"Close up of the &quot;Theme name&quot; text box with &quot;Advanced Options&quot; displayed directly underneath \" class=\"wp-image-42457 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-300x103.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-1024x352.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-768x264.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/Advanced-Option-1536x528.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-600x206.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1200x413.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-730x251.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1460x502.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-784x270.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-1568x539.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/Advanced-Option-877x301.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/550;\" \/><\/figure>\n\n\n\n<p>Here, you can fill out more information, such as the author\u2019s name, and give the theme a description:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author.jpg\" alt=\"The same theme name text box now showing additional text boxes: theme slug, author, author URL, and description as well as checkboxes for &quot;WooCommerce boilerplate&quot; and &quot;_sassify!&quot; \" class=\"wp-image-42458 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-name-slug-author-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-name-slug-author-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>There\u2019s also the <i>_sassify!<\/i> option, which will add Syntactically Awesome StyleSheets (SASS) files to your theme. SASS is a preprocessing language for CSS which enables you to use variables, nesting, math operators, and more.<\/p>\n\n\n\n<p>When you\u2019ve made your choices, you can click on <i>Generate<\/i>, which will download a <i>.zip<\/i> file containing your starter theme. This is the core file around which you\u2019ll develop your own theme, so you\u2019ll need to <a href=\"https:\/\/www.dreamhost.com\/blog\/tutorial-how-to-install-a-wp-theme\/\" target=\"_blank\" rel=\"noopener\">install it on your local site<\/a>.<\/p>\n\n\n\n<p>Once you\u2019ve installed your theme, you can preview your site to see how it looks. It\u2019s very basic right now, but that won\u2019t be the case for long!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Learn About The Different Components Of A WordPress Theme<\/h3>\n\n\n\n<p>Before you can customize your theme, you\u2019ll need to understand the purpose of its components and how they fit together.<\/p>\n\n\n\n<p>First, let\u2019s discuss <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-files\/\" target=\"_blank\" rel=\"noopener\">template files<\/a>, which are the main building blocks of a WordPress theme. These files determine the layout and look of the content on your site.<\/p>\n\n\n\n<p>For example, <i>header.php<\/i> is used to create a header, while <i>comments.php<\/i> enables you to display comments.<\/p>\n\n\n\n<p>WordPress determines which template files to use on each page by going through the <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\" target=\"_blank\" rel=\"noopener\">template hierarchy<\/a>. This is <a href=\"https:\/\/wphierarchy.com\/\" target=\"_blank\" rel=\"noopener\">the order<\/a> in which WordPress will look for the matching template files every time a page on your site is loaded.<\/p>\n\n\n\n<p>For example, if you visit the URL <i>http:\/\/example.com\/post\/this-post<\/i>, WordPress will look for the following template files in this order:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Files that match the slug, such as <i>this-post<\/i><\/li>\n\n\n\n<li>Files that match the post ID<\/li>\n\n\n\n<li>A generic single post file, such as <i>single.php<\/i><\/li>\n\n\n\n<li>An archive file, such as <i>archive.php<\/i><\/li>\n\n\n\n<li>The <i>index.php<\/i> file<\/li>\n<\/ol>\n\n\n\n<p>Since the <i>index.php<\/i> file is required by all themes, it\u2019s the default option if no other file can be found. Underscores contains the most common theme files, which will work right out of the box. However, you can experiment <a href=\"https:\/\/www.designbombs.com\/working-with-underscores-theme-beginner-developer\/\" target=\"_blank\" rel=\"noopener\">with editing them<\/a> if you want to get a feel for how they work together.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Key Theme Files<\/h4>\n\n\n\n<p>In addition to the <i>index.php<\/i> file, you will find the following files in most WordPress themes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>header.php<\/b>: This contains the HTML for your custom header template, including metadata and links to stylesheets. Note that menus are usually handled by the WordPress custom menu feature.<\/li>\n\n\n\n<li><b>footer.php<\/b>: This file holds the HTML for your website&#8217;s footer template.<\/li>\n\n\n\n<li><b>sidebar.php<\/b>: If you want your website to have a sidebar, the code will come from here. Bear in mind that this is simply the structure; <a href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/widget\/\" target=\"_blank\" rel=\"noopener\">widgets<\/a> are controlled from the admin area.<\/li>\n\n\n\n<li><b>single.php<\/b>: This is the template file for single blog posts. If you want to support different post types, you can create more than one file.<\/li>\n\n\n\n<li><b>page.php:<\/b> The default layout of individual pages comes from this file. Again, you can create more than one template \u2014 for instance, you could create a product page design for an online store.<\/li>\n\n\n\n<li><b>comments.php<\/b>: This file controls the display of comments under your blog posts and on pages.<\/li>\n\n\n\n<li><b>search.php<\/b>: When someone uses the search functionality on your website, this template defines how the search results will appear.<\/li>\n<\/ul>\n\n\n\n<p>In general, you will only need to edit these files if you want to add content or drastically change the layout of your site. Most other adjustments can be made using custom CSS in your stylesheet file.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Loop<\/h4>\n\n\n\n<p>Another important element you need to grasp is the Loop. WordPress uses this code to display content, so in many ways, it\u2019s the beating heart of your site. It appears in all template files that display post content, such as <i>index.php<\/i> or <i>sidebar.php<\/i>.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\" target=\"_blank\" rel=\"noopener\">The Loop<\/a> is a complex subject that we recommend you read more about if you want to understand how WordPress displays post content. Fortunately, the Loop will already be integrated into your theme thanks to Underscores, so there\u2019s no need to worry about it for now.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Configure Your Theme<\/h3>\n\n\n\n<p>It\u2019s easy to think that themes are purely for cosmetic purposes, but they actually have a huge impact on your site\u2019s functionality. Let\u2019s look at how you can make a few basic customizations.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add Functionality With Hooks<\/h4>\n\n\n\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/plugin-api-hooks\/\" target=\"_blank\" rel=\"noopener\">Hooks<\/a> are code snippets inserted into template files, which enable you to run PHP actions on different areas of a site, insert styling, and display other information. Most hooks are implemented directly into the WordPress core software, but some are useful for theme developers as well.<\/p>\n\n\n\n<p>Let\u2019s take a look at some of the most common hooks and what they can be used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>wp_head()<\/b>: Added to the &lt;head&gt; element in <i>header.php<\/i>. It enables styles, scripts, and other information that runs as soon as the site loads. This is often used to insert <a href=\"https:\/\/support.google.com\/analytics\/answer\/1008080?hl=en&amp;utm_medium=et&amp;utm_campaign=en_us&amp;utm_source=SetupChecklist#GA&amp;zippy=%2Cin-this-article%2Cstatic-website\" target=\"_blank\" rel=\"noopener\">Google Analytics code<\/a>.<\/li>\n\n\n\n<li><b>wp_footer()<\/b>: Added to <i>footer.php<\/i> right before the &lt;\/body&gt; tag.<\/li>\n\n\n\n<li><b>wp_meta()<\/b>: This usually appears in <i>sidebar.php<\/i> to include additional scripts (such as a tag cloud).<\/li>\n\n\n\n<li><b>comment_form()<\/b>: Added to <i>comments.php<\/i> directly before the file\u2019s closing &lt;\/div&gt; tag to display comment data.<\/li>\n<\/ul>\n\n\n\n<p>These hooks will already be included in your Underscores theme. However, we still recommend visiting the <a href=\"https:\/\/adambrown.info\/p\/wp_hooks\" target=\"_blank\" rel=\"noopener\">Hooks Database<\/a> to see all available hooks and <a href=\"https:\/\/codex.wordpress.org\/Plugin_API#Hooks:_Actions_and_Filters\" target=\"_blank\" rel=\"noopener\">learn more<\/a> about them.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add Styles With CSS<\/h4>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/support\/article\/css\/\" target=\"_blank\" rel=\"noopener\">Cascading Style Sheets (CSS)<\/a> define the appearance of all content on your site. In WordPress, this is accomplished using the <i>style.css<\/i> file. You\u2019ll already have this file included in your theme, but at the moment, it only contains the basic, default styling:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet.jpg\" alt=\"editing the CSS stylesheet of a new custom WordPress theme\" class=\"wp-image-42459 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/test-theme-stylesheet-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/test-theme-stylesheet-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>If you want a quick example of how CSS works, you can edit any of the styles here and save the file to see the effects. For example, you can find the following code (usually on line 485):<\/p>\n\n\n\n<p><code>a {<\/code><br><code>color: royalblue;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>This code controls the color of unvisited hyperlinks, which appear royal blue by default:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue.jpg\" alt=\"Theme Test Site showing blue hyperlinks on the page including &quot;Hello word&quot; and &quot;theme-tester&quot; \" class=\"wp-image-42460 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-blue-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-blue-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>Let\u2019s see what happens if we try to change that by replacing it with the following code:<\/p>\n\n\n\n<p><code>a {<\/code><br><code>color: red;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>Save the file and check out your local site. As you might expect, all unvisited links will now appear bright red:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red.jpg\" alt=\"the same Theme Test Site now showing &quot;Hello World&quot; and &quot;theme-tester&quot; hyperlinks in red \" class=\"wp-image-42461 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/theme-test-site-red-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/theme-test-site-red-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>You may notice that the visited link at the top has not changed color. That\u2019s because it\u2019s actually governed by the next section in the stylesheet:<\/p>\n\n\n\n<p><code>a:visited {<\/code><br><code>color: purple;<\/code><br><code>}<\/code><\/p>\n\n\n\n<p>This is a very basic example of how editing <i>style.css<\/i> will affect the look of your site. CSS is a massive topic that we recommend you explore further if you want to learn more about creating web designs. There are plenty of <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener\">resources on the topic<\/a> for beginners.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Export The Theme And Upload It To Your Site<\/h3>\n\n\n\n<p>When you\u2019ve finished tinkering with your theme, it\u2019s time to make sure it works properly. To do this, you can use the <a href=\"https:\/\/codex.wordpress.org\/Theme_Unit_Test\" target=\"_blank\" rel=\"noopener\">Theme Unit Test<\/a> data.<\/p>\n\n\n\n<p>This is a set of dummy data that you can upload to your site. It contains many different variations of styles and content, and it will enable you to see how your theme copes with unpredictable data.<\/p>\n\n\n\n<p>When you\u2019ve thoroughly tested your theme and are convinced that it meets the <a href=\"https:\/\/make.wordpress.org\/themes\/handbook\/review\/\" target=\"_blank\" rel=\"noopener\">required standards<\/a>, all that remains now is to export it.<\/p>\n\n\n\n<p>First, you\u2019ll need to find the location of your website on your local machine. You\u2019ll likely find it in a folder called <i>Websites,<\/i> inside your default <i>Documents<\/i> directory.<\/p>\n\n\n\n<p>Open the website\u2019s folder and access <i>\/wp-content\/themes\/<\/i>, where you\u2019ll find your theme:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes.jpg\" alt=\"WordPress wp-content themes folder in FTP client\" class=\"wp-image-42462 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/wp-content-themes-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/wp-content-themes-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>You can now use a compression tool, such as <a href=\"https:\/\/www.rarlab.com\/download.htm\" target=\"_blank\" rel=\"noopener\">WinRAR<\/a>, to create a <i>.zip<\/i> file based on the folder. Simply right-click on the folder and select the option that enables you to zip it, such as <i>Compress \u201cfolder.\u201d<\/i><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"984\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme.jpg\" alt=\"compressing custom WordPress theme to prepare for upload\" class=\"wp-image-42463 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-1024x630.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-768x472.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/11\/compress-test-theme-1536x945.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-600x369.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1200x738.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-730x449.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1460x898.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-784x482.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-1568x964.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/11\/compress-test-theme-877x539.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/984;\" \/><\/figure>\n\n\n\n<p>When the folder has been zipped, it\u2019s ready to be uploaded and installed on any WordPress site, just as you installed your Underscores theme at the start.<\/p>\n\n\n\n<h2 id=\"tips\" class=\"wp-block-heading\">Tips For Developing Your First Custom Theme<\/h2>\n\n\n\n<p>When you start messing around with code for the first time, it&#8217;s always possible to make a few mistakes. For this reason, it&#8217;s a good idea to take your time in developing your first theme, and experiment within your local environment.<\/p>\n\n\n\n<p>Here are a few additional measures you can take to ensure that your theme will thrive in the wild:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Use version control<\/b>: Systems like Git help you to track changes in your code over time, and revert bugs.<\/li>\n\n\n\n<li><b>Validate your code<\/b>: Use tools like Theme Check and the W3C Validator to find errors in your code. Running frequent checks can help you to catch problems early.<\/li>\n\n\n\n<li><b>Test your theme<\/b>: Try to load your theme on different browsers and devices to identify layout or rendering issues. A design that works perfectly on your own computer can fall apart on a different platform.<\/li>\n\n\n\n<li><b>Use code comments<\/b>: Leaving yourself notes that explain what everything does can help you to fix problems at a later date.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"create\" class=\"wp-block-heading\">Create A Custom WordPress Theme<\/h2>\n\n\n\n<p>Creating a custom WordPress theme from scratch is no small feat. However, the process might not be as difficult as you think.<\/p>\n\n\n\n<p>To recap, here\u2019s how to develop a WordPress theme in five simple steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Set up a local environment, using <a href=\"https:\/\/localwp.com\/\" target=\"_blank\" rel=\"noopener\">Local<\/a>.<\/li>\n\n\n\n<li>Download and install a starter theme, like <a href=\"http:\/\/underscores.me\/\" target=\"_blank\" rel=\"noopener\">Underscores<\/a>.<\/li>\n\n\n\n<li>Learn about the different components of a WordPress theme.<\/li>\n\n\n\n<li>Configure your theme.<\/li>\n\n\n\n<li>Export the theme and upload it to your site.<\/li>\n<\/ol>\n\n\n\n<p>By following the guidelines in the <a href=\"https:\/\/codex.wordpress.org\/\" target=\"_blank\" rel=\"noopener\">Codex documentation site<\/a>, you can develop a theme that meets quality standards. You might even consider submitting it to the WordPress Theme Directory!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Launch Your Unique WordPress Site With DreamPress<\/h3>\n\n\n\n<p>Building a great theme is the first step towards creating a successful website. We have the tools to help you fill in the rest.<\/p>\n\n\n\n<p>With <a href=\"https:\/\/www.dreamhost.com\/wordpress\/managed\/\" target=\"_blank\" rel=\"noopener\">DreamPress managed hosting<\/a>, you can test any theme or plugin online with one-click staging. We also provide bulletproof backups, so you can roll back changes at any time, and built-in caching for optimum performance.<\/p>\n\n\n\n<p><a href=\"https:\/\/panel.dreamhost.com\/signup\/?lng=en#!\/dreampress\/?plan=standard&amp;term=yearly&amp;p=DPINTRO\" target=\"_blank\" rel=\"noopener\">Sign up today<\/a> to get your WordPress site up and running!<\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      We Make WordPress Easier for You\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Leave migrating your site, installing WordPress, managing security and updates, and optimizing server performance to us. Now you can focus on what matters most: growing your website.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/wordpress\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Check Out Plans                    <\/a>\n\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you want something done a certain way \u2014 well, you just might have to do it yourself. While plenty of great WordPress themes are available, finding one that meets your specific requirements may prove difficult. In your search for the perfect solution, you might be tempted to create your own custom WordPress theme. Fortunately, [&hellip;]<\/p>\n","protected":false},"author":1077,"featured_media":42447,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Developing a theme for WordPress is not as complicated as you might think. In this step-by-step guide, we will show you how to build the perfect site!","toc_headlines":"[[\"design\",\"Designing A Custom WordPress Website\"],[\"starter\",\"What Is A Starter Theme? (And Why You Should Use One)\"],[\"develop\",\"How To Develop Your First WordPress Theme (In 5 Steps)\"],[\"tips\",\"Tips For Developing Your First Custom Theme\"],[\"create\",\"Create A Custom WordPress Theme\"]]","hide_toc":false,"footnotes":""},"categories":[13129,550,696],"tags":[],"class_list":["post-37404","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developer-central","category-tutorials","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Develop a Custom WordPress Theme - DreamHost<\/title>\n<meta name=\"description\" content=\"Developing a theme for WordPress is not as complicated as you might think. In this step-by-step guide, we will show you how to build the perfect site!\" \/>\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-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build A Custom WordPress Theme: A DIY Guide\" \/>\n<meta property=\"og:description\" content=\"Having trouble finding the right vibe for your website? Use this guide to learn how to build your own custom WordPress theme that\u2019s both functional and aesthetically pleasing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-28T15:00:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-22T02:09:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Social-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jos Velasco\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Build A Custom WordPress Theme: A DIY Guide\" \/>\n<meta name=\"twitter:description\" content=\"Having trouble finding the right vibe for your website? Use this guide to learn how to build your own custom WordPress theme that\u2019s both functional and aesthetically pleasing.\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jos Velasco\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Develop a Custom WordPress Theme - DreamHost","description":"Developing a theme for WordPress is not as complicated as you might think. In this step-by-step guide, we will show you how to build the perfect site!","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-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/","og_locale":"en_US","og_type":"article","og_title":"Build A Custom WordPress Theme: A DIY Guide","og_description":"Having trouble finding the right vibe for your website? Use this guide to learn how to build your own custom WordPress theme that\u2019s both functional and aesthetically pleasing.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-11-28T15:00:36+00:00","article_modified_time":"2025-05-22T02:09:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Social-Image.jpg","type":"image\/jpeg"}],"author":"Jos Velasco","twitter_card":"summary_large_image","twitter_title":"Build A Custom WordPress Theme: A DIY Guide","twitter_description":"Having trouble finding the right vibe for your website? Use this guide to learn how to build your own custom WordPress theme that\u2019s both functional and aesthetically pleasing.","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jos Velasco","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/"},"author":{"name":"Jos Velasco","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a"},"headline":"So You Want To Build Your Own Custom WordPress Theme?","datePublished":"2023-11-28T15:00:36+00:00","dateModified":"2025-05-22T02:09:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/"},"wordCount":2879,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","articleSection":["Developer Central","Tutorials","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/","name":"How to Develop a Custom WordPress Theme - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","datePublished":"2023-11-28T15:00:36+00:00","dateModified":"2025-05-22T02:09:32+00:00","description":"Developing a theme for WordPress is not as complicated as you might think. In this step-by-step guide, we will show you how to build the perfect site!","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/10\/Build-A-Custom-WordPress-Theme-Hero-Image.jpg","width":1460,"height":1095,"caption":"man working at a computer looking and smiling at a woman who is explaining something on the computer to him"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/guide-to-developing-a-wp-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"So You Want To Build Your Own Custom WordPress Theme?"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/33a01bfa83e29abbe21403d23dd8ea1a","name":"Jos Velasco","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/08\/jos-velasco-150x150.png","caption":"Jos Velasco"},"description":"Jos Velasco is a WordPress Professional Consultant at DreamHost. His responsibilities include helping with advanced WordPress cases, creating training material, and identifying trends impacting the WordPress community. In his free time, he enjoys climbing mountains, eating healthy, and watching drama movies. Follow Jos on LinkedIn: https:\/\/www.linkedin.com\/in\/josvelasco\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/josvelasco\/"}]}},"lang":"en","translations":{"en":37404,"es":37426,"de":51667,"uk":56663,"pt":56684,"pl":56690,"ru":56693,"it":68277,"fr":70137,"nl":70166},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1077"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=37404"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37404\/revisions"}],"predecessor-version":[{"id":61429,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/37404\/revisions\/61429"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/42447"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=37404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=37404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=37404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}