WordPress Architecture

WordPress is free, open source software.

You can download it at http://wordpress.com and install it manually onto your server or, if your hosting company makes the option available, through a couple of clicks from your cPanel (Fantastico is one program that facilitates this). Each installation of WordPress allows for one website, and will use one MYSQL database.

Once installed, you will see the following folders in your public_html folder:

wp-admin
wp-content
wp-includes

For the purposes of installing or modifying themes and plugins, you will only need to go into the wp-content folder, where additional folders for your theme and plugin files are located.

Don’t panic. If you just want to install a nice theme and start building a website, and never want to get under the hood to customize your site, you can stop here. You don’t need to ever modify your CSS or PHP files (much less your database) unless you need that extra layer of control over your site.

Within the themes folder are a number of different PHP and CSS files that are theme-specific.

All themes must have at minimum an index.php and a style.css file. Most themes will also have a header.php, footer.php, sidebar.php, comments.php, author.php, 404.php, page.php and a few others. You will likely also have a functions.php file that adds additional functionality. (See Template Hierarchy for an explanation of these pages).

WordPress itself runs on PHP code, and dynamically generates HTML by referring to your theme files, your CSS, and the content within your database. WordPress call a number of these files in a specific order to build a single HTML file. For a blog page, the files that would be called might be:

header.php
sidebar.php
index.php
comments.php
footer.php

As the browser renders the page, it would call index.php, which would in turn include calls to get the content of the other files with template tags:

<?php get_header(); ?>

and

<?php get_sidebar(); ?>

Another way to think of it is to imagine it as building a house. Header.php is the roof, index.php (or page.php, or archives.php) are the structure itself, sidebar.php is a column, comments.php are the windows, and footer.php is the foundation. All of the pieces need to be included for the house to look like a house. Otherwise it’s just a pile of wood.

Various PHP files in your theme will contain their own template tags that generate content, such as displaying the title, menubar, etc.

It’s important to note that the header contains the and <head> HTML tags, and usually opens the <body> tag. If you want to put in a language declaration, change your meta tags, add a skip navigation link, or other things traditionally done at the beginning of an HTML file, you’ll need to modify the header.php file. </p> <p>Other files include the HTML code necessary to produce the different sections of a single page.</p> <p>This is just an introduction to WordPress architecture. Each theme will include different files, so the best way to understand how a theme works is to review the files that came with it, and see what each one is doing. </p> <p>Read more about how WordPress themes and template files work:</p> <p><a href="http://codex.wordpress.org/Stepping_Into_Templates">Stepping into Templates</a> (highly recommended)<br /> <a href="http://codex.wordpress.org/Templates">Templates</a><br /> <a href="http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-a-custom-wordpress-theme-from-scratch">How to Build a Custom WordPress Theme from Scratch</a></p> </div><!-- .entry-content --> </div><!-- #post-## --> <div id="comments"> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/using-wordpress/beyond-the-basics/wordpress-architecture/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="http://gettingdirtydesigns.com/using-wordpress/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30" aria-required='true' /></p> <p class="comment-form-url"><label for="url">Website</label><input id="url" name="url" type="text" value="" size="30" /></p> <p class="comment-form-comment"><label for="comment">Comment</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-allowed-tags">You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </code></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='34' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="ea6fa2549b" /></p> </form> </div><!-- #respond --> </div><!-- #comments --> </div><!-- #content --> </div><!-- #container --> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="pages-3" class="widget-container widget_pages"><h3 class="widget-title">Pages</h3> <ul> <li class="page_item page-item-2"><a href="http://gettingdirtydesigns.com/using-wordpress/">About</a></li> <li class="page_item page-item-4"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/">Basics</a> <ul class='children'> <li class="page_item page-item-16"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/why-wordpress/">Why WordPress?</a></li> <li class="page_item page-item-8"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/admin-panel/">Admin Panel</a></li> <li class="page_item page-item-14"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/themes/">Themes</a></li> <li class="page_item page-item-18"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/widgets/">Widgets</a></li> <li class="page_item page-item-73"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/pages-and-posts/">Pages & Posts</a></li> <li class="page_item page-item-11"><a href="http://gettingdirtydesigns.com/using-wordpress/basics/plugins/">Plugins</a></li> </ul> </li> <li class="page_item page-item-20 current_page_ancestor current_page_parent"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/">Beyond the Basics</a> <ul class='children'> <li class="page_item page-item-34 current_page_item"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/wordpress-architecture/">WordPress Architecture</a></li> <li class="page_item page-item-26"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/template-hierarchy/">Template Hierarchy</a></li> <li class="page_item page-item-24"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/dashboard-editor/">Dashboard Editor</a></li> <li class="page_item page-item-228"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/228-2/">WordPress Hooks</a></li> <li class="page_item page-item-30"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/the-loop/">The ‘Loop’</a></li> <li class="page_item page-item-22"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/child-theming/">Child Theming</a></li> <li class="page_item page-item-32"><a href="http://gettingdirtydesigns.com/using-wordpress/beyond-the-basics/themes-for-development/">Themes for Development</a></li> </ul> </li> <li class="page_item page-item-6"><a href="http://gettingdirtydesigns.com/using-wordpress/accessibility/">Web Accessibility</a></li> </ul> </li><li id="linkcat-5" class="widget-container widget_links"><h3 class="widget-title">WordPress resources</h3> <ul class='xoxo blogroll'> <li><a href="http://wpaustin.com/" title="Local WordPress enthusiasts">WordPress Austin</a></li> <li><a href="http://codex.wordpress.org" title="Everything you could ever want to know about WordPress">WordPress Codex</a></li> <li><a href="http://wordpress.org/extend/plugins">WordPress Plugins</a></li> <li><a href="http://wordpress.org/support/">WordPress Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">WordPress Themes</a></li> <li><a href="http://wordpress.tv/" title="Videos on using WordPress">WordPress TV</a></li> </ul> </li> <li id="search-2" class="widget-container widget_search"><form role="search" method="get" id="searchform" action="http://gettingdirtydesigns.com/using-wordpress/" > <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></li> </ul> </div><!-- #primary .widget-area --> </div><!-- #main --> <div id="footer" role="contentinfo"> <div id="colophon"> <div id="site-info"> <a href="http://gettingdirtydesigns.com/using-wordpress/" title="Using WordPress" rel="home"> Using WordPress </a> </div><!-- #site-info --> <div id="site-generator"> <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress.</a> </div><!-- #site-generator --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html>