{"id":139645,"date":"2015-06-04T11:00:55","date_gmt":"2015-06-04T16:00:55","guid":{"rendered":"https:\/\/getflywheel.com\/?p=10152"},"modified":"2023-03-10T14:16:25","modified_gmt":"2023-03-10T20:16:25","slug":"anatomy-wordpress-theme","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/","title":{"rendered":"Anatomy of a WordPress Theme"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>This is a chapter from &#8220;Up and Running: A Practical Guide to WordPress Development,&#8221; a multimedia guide to WordPress development. The complete package includes a full-length e-book, 50+ theme and plugin development tutorial videos, and code walkthrough interviews with 13 expert WordPress developers. Available now at <a href=\"https:\/\/courses.wpshout.com\/up-and-running\/\" target=\"_blank\" rel=\"noreferrer noopener\">upandrunningwp.com<\/a>.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Takeaways:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A WordPress theme is made of a set of consistent parts. The crucial parts of a non-child-theme include <code>style.css<\/code>, <code>functions.php<\/code>, and several kinds of PHP template file (such as <code>header.php<\/code>, <code>footer.php<\/code>, and <code>index.php<\/code>).<\/li>\n\n\n\n<li>As the theme&#8217;s main source of CSS styling, <code>style.css<\/code> dictates the theme&#8217;s visual appearance. A comment section at the top of <code>style.css<\/code> is also where the theme name, author, etc., are registered.<\/li>\n\n\n\n<li><code>functions.php<\/code> is where you add presentational functionality to your theme. Through <code>functions.php<\/code>, you&#8217;ll add CSS stylesheets, <a href=\"https:\/\/wpengine.com\/resources\/how-to-add-jquery-wordpress-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">JavaScript files<\/a>, nav menus, widget areas, and other functionality.<\/li>\n\n\n\n<li>Template files can be informally divided into: &#8220;always-used&#8221; template files (<code>header.php<\/code> and <code>footer.php<\/code>, and <code>sidebar.php<\/code> if applicable); files in the WordPress template hierarchy (such as <code>index.php<\/code>, <code>single.php<\/code>, and <code>page.php<\/code>); and &#8220;template parts&#8221; (incomplete snippets pulled from other template files to reduce repetition).<\/li>\n\n\n\n<li>Themes can be arbitrarily large and complex; but these are the pieces that are most important and predictably there.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This short chapter revolves around a big diagram. Why wait? Here it is:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/Anatomy-of-a-WordPress-Theme.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/Anatomy-of-a-WordPress-Theme-1024x591.png\" alt=\"Anatomy of a WordPress Theme\" class=\"wp-image-10153\" \/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Don&#8217;t panic! You&#8217;ll understand this soon enough. In the rest of this chapter, we&#8217;ll be explaining each part of the diagram in more depth.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What&#8217;s in a Name?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress decides how to treat theme files based on their name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing to notice is that every file in the diagram has a special name. <code>functions.php<\/code>, <code>style.css<\/code>, <code>index.php<\/code>\u2014none of these files are named by accident, and none of their names are arbitrary.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress decides how to treat theme files based on their name. It has a special treatment written out for <code>functions.php<\/code>, but none at all for <code>functionz.php<\/code>. So if you upload a set of instructions as <code>functions.php<\/code>, WordPress will interpret them; but if you upload those same instructions as <code>functionz.php<\/code>, WordPress will, by default, just ignore that file and its instructions completely.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">style.css<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>style.css<\/code> is the main source of the theme&#8217;s visual appearance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>style.css<\/code> is the theme&#8217;s main source of CSS styling. As such, it is the main source of the theme&#8217;s visual appearance\u2014everything from the choice of fonts and colors to whether the theme operates on a responsive grid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, for example, if you enter the following CSS into your theme&#8217;s <code>style.css<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\ncolor: blue;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u2026then anything that&#8217;s in a paragraph, <em>anywhere on your site<\/em> while it&#8217;s running your theme, will turn blue. Really cool, right?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>style.css<\/code> is where you&#8217;ll be doing the bulk of your work to make your themes look the way you want.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This kind of visual control means that there&#8217;s lots of work to do in <code>style.css<\/code>\u2014it&#8217;s where you&#8217;ll be doing the bulk of your work to make your themes look the way you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">style.css is Also how you Register Your Theme<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>style.css<\/code> also houses a comment section in its header, which is where theme data\u2014the theme name, author, parent theme if any, and so on\u2014are registered. That looks as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*\nTheme Name: Pretend Theme\nAuthor: WPShout\nAuthor URI: http:\/\/wpshout.com\/\nVersion: 0.1\nDescription: A very pretend theme for WordPress learners\n&#091;Other comment-block information goes here, too]\n*\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress reads these comments to get its information about your theme. So the little comment block above\u2014and nothing fancier or more technical\u2014is what causes your theme to appear in your site&#8217;s list of themes in <em>Appearance<\/em> &gt; <em>Themes<\/em> in the WordPress admin area:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/06\/themeAnatomy1.jpg\" alt=\"A screenshot of a theme titled Pretend Theme by WPShout. The description reads: A very pretend theme for WordPress learners\" class=\"wp-image-10158\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can see an example of a theme&#8217;s real registration data on lines 1 through 6 of <code>style.css<\/code> in that large graphic, Anatomy of a WordPress Theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">functions.php<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>functions.php<\/code> is where you add custom functionality to your theme. This could be an awful lot, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Adding CSS stylesheets (including <code>style.css<\/code> itself) and JavaScript files<\/li>\n\n\n\n<li>Registering nav menu areas and widget areas<\/li>\n\n\n\n<li>Defining which custom image sizes you want to be available on your site<\/li>\n\n\n\n<li>Filtering your page content<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><code>functions.php<\/code> &#8220;talks to&#8221; the rest of WordPress primarily through WordPress hooks (also called action and filter hooks), which let it add functionality at just the right places. We get deeper into the workings of <code>functions.php<\/code> in Core Concepts of WordPress Themes: 3. Adding Functionality with <code>functions.php<\/code>, and we get way more into hooks in WordPress Hooks (Actions and Filters): What They Do and How They Work.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PHP Template Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A WordPress site&#8217;s template files determine the site&#8217;s markup. Without them, there&#8217;s literally nothing on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main bulk of a theme&#8217;s files are its PHP template files. If <code>functions.php<\/code> is a theme&#8217;s brain, and <code>style.css<\/code> is its clothes, and template files are its actual body.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Template files are ,code&gt;.php files that contain a mix of HTML markup and PHP code. (Check that graphic and you&#8217;ll see how they look.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Template Files Create Markup in Two Ways<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Together, these files determine the site&#8217;s <em>markup<\/em>: the actual HTML that the browser displays when it visits your site. They do that in two ways.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. HTML<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, template files do print HTML directly to the browser, just like a regular <code>.html<\/code> file would. Anything not inside <code>&lt;!--?php?--&gt;<\/code> isn&#8217;t PHP: it&#8217;s just plain HTML that goes straight onto the page. So if a theme&#8217;s <code>header.php<\/code> includes a bit of HTML such as the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;lt;body class=&amp;amp;quot;site-body&amp;amp;quot;&amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s exactly what a browser will see on every WordPress webpage that includes <code>header.php<\/code>, which should be all of them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. PHP<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Template files really work their magic using PHP, which <em>compiles<\/em> to, or turns into, HTML. As a simple example, our same <code>header.php<\/code> file could instead contain the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;amp;lt;body class=&amp;amp;quot;&amp;amp;lt;?php echo 'site-body'; ?&amp;amp;gt;&amp;amp;quot;&amp;amp;gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The added PHP simply echoes (prints) the string <code>site-body<\/code> right onto the page. So the server did extra PHP processing on its end, but the browser still sees the same old HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you can imagine, a theme&#8217;s template files are utterly crucial: without them, there&#8217;s quite literally nothing on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#8220;Always-Used&#8221; Template Files<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code>header.php<\/code> and <code>footer.php<\/code> are usually used everywhere in a theme, because most sites want a consistent header and footer across different pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Some template files are used on every webpage on a site. The major examples are <code>header.php<\/code> and <code>footer.php<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These files are used so often that WordPress has special functions for including them in other template files: <code>get_header()<\/code> and <code>get_footer()<\/code>. Called this way, without parameters, those functions simply grab <code>header.php<\/code> and <code>footer.php<\/code>, and drop them in where the function was called.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why are these files used everywhere? It&#8217;s because most sites want a consistent header and footer across different pages. If one page has your company&#8217;s logo and primary nav menu, it&#8217;s a good bet that you&#8217;ll want other pages to do the same. The same is true for your footer at the bottom of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a note, <code>sidebar.php<\/code> is also sort of this kind of file, because it&#8217;s often the case that most types of webpages on a site will share a single sidebar\u2014maybe with the exception of full-width pages dedicated to displaying Page-type posts. <code>sidebar.php<\/code> has its own function as well, <code>get_sidebar()<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Files in the WordPress Template Hierarchy<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The real excitement happens in files like <code>index.php<\/code>, <code>single.php<\/code>, and <code>page.php<\/code>. These files dictate what markup will appear for <em>different kinds of post data<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To rephrase that, <em>WordPress knows<\/em> which page to use for which kind of post data. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If the webpage being requested involves a Page-type post (for example, your About page), WordPress will likely use <code>page.php<\/code> to build that webpage.<\/li>\n\n\n\n<li>If the requested webpage is an individual Post-type post (for example, you&#8217;re viewing a particular blog post), WordPress will likely use <code>single.php<\/code> to build it.<\/li>\n\n\n\n<li>If you&#8217;re looking through all the Post-type posts you wrote in 2014, WordPress will likely use <code>archive.php<\/code> to build that webpage.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is the magic of the <em>WordPress template hierarchy<\/em>, which we cover in depth in Core Concepts of WordPress Themes: 1. The Template Hierarchy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">These Template Files are Based Around the Loop<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These &#8220;in-the-template-hierarchy&#8221; template files all share something very important: They&#8217;re build around The Loop, one of the absolute core principles of WordPress development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We go deep into The Loop in Core Concepts of WordPress Themes: 2. Processing Posts with The Loop. The Loop is <em>really<\/em> cool, so if you&#8217;re new to it, hold onto your socks so The Loop doesn&#8217;t blow them off!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Template Parts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s say there&#8217;s a section of both <code>index.php<\/code> and <code>page.php<\/code> that&#8217;s exactly the same. Should we repeat that code in both those files?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Actually, DRY\u2014&#8221;Don&#8217;t Repeat Yourself!&#8221;\u2014is a battle cry for good programmers. Repetition causes all kinds of problems. What if you want to change something about the repeated section? Now you&#8217;ve got to change it in two places. What if you forget to change it in one place, or make a mistake in one file but not another? Now your code is out-of-sync and your site is buggy. (Now: what if you repeat the same code twenty times? You&#8217;ve got to repeat every change you make times twenty, and hope that you &#8220;caught them all.&#8221;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Template parts take a likely-to-be-repeated part of a template file, and move them out into a new file. This way, both <code>index.php<\/code> and <code>page.php<\/code> can both simply refer to the same template part, rather than individually writing it twice; and if you want to change that section you only change it once.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Now you Know Your Theme Anatomy<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">These are the things to really understand about a WordPress theme. Even a way-too-big ThemeForest theme will be built around this core skeleton, so understand how these pieces interlock and you&#8217;ll have a lot of power to understand WordPress themes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With that anatomy lesson concluded, the next three chapters dive into four of the crucial programming principles that explain how a theme does its work:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The WordPress template hierarchy<\/li>\n\n\n\n<li>The Loop<\/li>\n\n\n\n<li>functions.php<\/li>\n\n\n\n<li>WordPress hooks<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This is a chapter from &#8220;Up and Running: A Practical Guide to WordPress Development,&#8221; a multimedia guide to WordPress development. The complete package includes a full-length e-book, 50+ theme and plugin development tutorial videos, and code walkthrough interviews with 13 expert WordPress developers. Available now at upandrunningwp.com. Key Takeaways: This short chapter revolves around a<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":141367,"template":"","resource-topic":[901],"resource-role":[1397,896,897],"resource-type":[916],"class_list":["post-139645","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Anatomy of a WordPress Theme<\/title>\n<meta name=\"description\" content=\"This is a chapter from &quot;Up and Running: A Practical Guide to WordPress Development,&quot; which covers the anatomy of a WordPress theme.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Anatomy of a WordPress Theme\" \/>\n<meta property=\"og:description\" content=\"This is a chapter from &quot;Up and Running: A Practical Guide to WordPress Development,&quot; which covers the anatomy of a WordPress theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-10T20:16:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/06\/anatomy-header.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Anatomy of a WordPress Theme\" \/>\n<meta name=\"twitter:description\" content=\"This is a chapter from &quot;Up and Running: A Practical Guide to WordPress Development,&quot; which covers the anatomy of a WordPress theme.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/06\/anatomy-header.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/\",\"name\":\"Anatomy of a WordPress Theme\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2015-06-04T16:00:55+00:00\",\"dateModified\":\"2023-03-10T20:16:25+00:00\",\"description\":\"This is a chapter from \\\"Up and Running: A Practical Guide to WordPress Development,\\\" which covers the anatomy of a WordPress theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Anatomy of a WordPress Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Anatomy of a WordPress Theme","description":"This is a chapter from \"Up and Running: A Practical Guide to WordPress Development,\" which covers the anatomy of a WordPress theme.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Anatomy of a WordPress Theme","og_description":"This is a chapter from \"Up and Running: A Practical Guide to WordPress Development,\" which covers the anatomy of a WordPress theme.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-03-10T20:16:25+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/06\/anatomy-header.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"Anatomy of a WordPress Theme","twitter_description":"This is a chapter from \"Up and Running: A Practical Guide to WordPress Development,\" which covers the anatomy of a WordPress theme.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/06\/anatomy-header.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/","name":"Anatomy of a WordPress Theme","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2015-06-04T16:00:55+00:00","dateModified":"2023-03-10T20:16:25+00:00","description":"This is a chapter from \"Up and Running: A Practical Guide to WordPress Development,\" which covers the anatomy of a WordPress theme.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/anatomy-wordpress-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"Anatomy of a WordPress Theme"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2015\/06\/anatomy-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Designer, Developer, Freelancer","topic":"<strong>Topics:<\/strong> WordPress","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/141367"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139645"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139645"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139645"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}