Click me
Transcribed

Anatomy of a Wordpress Theme

Anatomy Of A WordPress Theme The cheat sheet for how your blog works header.php Global file that displays headers and navigation. Also contains HTML head code. Joe's Website! home about cat pictures The Loop The display of contents of the main area of your site are controlled by individual template files using what's called "the loop." ............... 1ilene i he keatine sidebar.php Sidebar display is controlled in this file. Multiple sidebars o in functions.php, and contents of sidebar widgets are set up from the WordPress wp-admin panel. be set up footer.php Contains instructions for global Pored by Ward, dwpott ........ footer and closes HTML tags. WordPress themes are made up of a folder of template files, each of which controls a specific piece of your theme. Parts of your site that remain static no matter what page you're on are controlled by header, sidebar, and footer files. You can hack these files so they detect what page you are on and serve different content accordingly, such as displaying different navigation on posts than on pages; however, it is most common for these sections to look the same throughout the site. home index.php The index file controls what the home page looks like. By default it contains a loop that queries and then displays the most recent blog posts, with a link at the bottom to view previous posts. Joe's Websitel home about cat pictures Alternately, you can specify in wp-admin>settings>read to have the home page be a page you created yourself in WordPress. In that case, you specify a different page/URL for the regular blog posts to appear on, and that page is generated by index.php posts single.php The display of individual posts is controlled by a little file called single.php. It contains a loop that queries just one post and displays it. Joe's Website! home about cat pictures You can specify if you want sidebars (and which you want), if you want it to look different than other pages on the site. .page.php Page.php controls what WordPress pages look like. You can choose to eliminate sidebars or other elements, or add other unique elements for pages alone. pages Joe's Websitel home about cat picrures WordPress also allows you to create different page templates for different types of pages. To create a page template simply copy page.php, rename it to whatever you want, then add this code to the top: archives ยท archive.php, category.php, tag.php You can control the look and feel of different archives using template files also. If there is no archive file, the archives will look like index.php; however, you can create an archive.php to override that. If you create a file called category.php, it will override archives.php for categories only. If you create a tag.php, you can override it for tag archives only. Joe's Websitel home about cat pictres The Loop The Loop is perhaps the most powerful part of your WordPress theme. It starts with a query (which determines which posts or pages to grab), and ends with a php "endwhile" statement. Everything in between is up to you. You can specify the output of titles, post content, metadata, custom fields, and commenting all within the loop, and each element is output for each post or page until the query is done. You can set up multiple loops and queries on a single page; for example: on a single.php you could have the loop showing the entire content of a single post, with a loop outputting just titles and thumbnails for related posts below it. Query Posts or Page Start loop (Everything the title (Outputs the title of the post) between this and Endwhile the endwhile gets repeated until all posts are output) (start loop over or exit if all queried posts have been output) the excerpt (Outputs the post excerpt) other tags (There are a variety of other template tags you can also insert in the loop) the content (Outputs the post content) the date (Outputs the post date) the author (Outputs the post author) the_category (Outputs the post categories) Exit Behind The Scenes In order for a WordPress theme to work, it needs a few essential background files. These files can be modified to your needs, and can quite powerfully affect the custom look and functionality of your site. comments.php functions.php style.css . This controls the output of comments, which can be included in the loop if you desire comments on your theme. Comments.php can be overridden by plugins such as Disqus, which then take over comment Functions.php allows you to put your own custom php code in order to modify core elements of your theme. It is often used to specify multiple sidebars, change the This is the main CSS stylesheet for your theme. It also contains text at the top which tells WordPress what your theme name is, who the author is, and what the URL of your site is, number of characters in functionality for your site. the excerpt, or add custom admin panel options from wp-admin. The Extras Beyond the core functionality of Wordpress, extras like plugins, custom fields, and widgets allow you to further customize your site. Plugins A massive community of open source developers has built a plethora of plugins that you can add on to your theme for free, including e-commerce, slideshow, cacheing, and social media plugins. Custom Fields Widgets Widgets are little modules that go in your Custom fields are special boxes below the main post box in the wp-admin when you are creating a post. They let you create your own options, which can then be displayed sidebars. From within the wp-admin, you can mix and match preset widgets, and add your own via plugins or php code. Widgets inlcude things like search forms, popular posts lists, and advertising blocks. the theme. Common uses include thumbnail images and javascript includes. Qyoast tweaking websites

Anatomy of a Wordpress Theme

shared by Shane Snow on Jul 19
1,302 views
3 shares
0 comments
An explainergraphic showing the nuts and bolts of Wordpress theme files and how they work together.

Publisher

Yoast

Designer


Source

Unknown. Add a source

Category

Computers
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size