Skip to content

Template files

Jump to bottom Edit New page
retlehs edited this page Jul 30, 2011 · 4 revisions

If you're new to WordPress then you'll want to look at the Template Hierarchy entry from the Codex to understand how and when each of the files are being used.

style.css

style.css is simply used to tell WordPress that we're a theme. The actual stylesheet you need to be editing is located at css/style.css

css/style.css

The Roots style.css has a lot of HTML5 Boilerplate's style along with some helpful additions:

  • all links and input buttons move down 1px by default when :active, see One Pixel Shift Buttons
  • all headings come with a default slight text-shadow
  • .button class that's an inline-block and can be applied to anything you want to look like a button. Comes with a default blue background + CSS3 gradients along with a slight box-shadow and text-shadow. It's also the same class used on post and comment navigation buttons.
  • #nav-main has a default style similar to buttons and has built-in support for dropdown navigation if the parent items have any children
  • #nav-utility is placed at the top right of the header by default
  • built in support for Gravity Forms
  • built in support for jQuery Fancybox

header.php

The Roots header.php is filled with HTML5 Boilerplate goodness.

If you've got Gravity Forms installed then we'll automatically include a link to their stylesheet.

Instead of using add_theme_support('automatic-feed-links'); to automatically put feed links in wp_head (dirty) we manually put a link to /feed/. Remove that line if you don't want people to know your site has a feed.

If you'd like to add additional JavaScript files make sure you add them above the call to scripts.js.

The Google Analytics code is controlled by the Roots theme options page from the WordPress administration.

Body class

<body <?php $page_slug = $post->post_name; body_class($page_slug); ?>>

By extending the WordPress body_class function we can make sure our <body> has all the classes we could ever need.

Here's what the default installation will show on Sample Page:

<body class="page page-id-2 page-template page-template-default sample-page">

and on the default Hello world! post

<body class="single single-post postid-1 single-format-standard hello-world">

sidebar.php

All that's going on in here is adding support for widgets on the sidebar.

footer.php

footer.php contains a widget area and simply shows the default copyright that shows the current year and sitename.

functions.php

See Roots Functions

front-page.php

During Theme Activation we create a page called Home and set it to be the static frontpage in the Reading Settings. front-page.php is the default template for the Home page. If you change your Reading Settings to show your latest posts instead of a static page, then you'll first want to delete front-page.php and then index.php will be used for your homepage.

archive.php

archive.php is used for archives, categories, tags, etc. Refer to the WordPress Template Hierarchy to find out if you need to create other files based on archive.php to handle other areas. archive.php simply calls The Loop or loop.php.

page.php templates

Roots comes with page.php, page-custom.php, page-full.php, page-sitemap.php, and page-subpages.php. By default, only page.php is used until you assign another template to a page. You'll mainly want to edit loop-page.php to change the output.

  • page-custom.php is identical to page.php but is there for you to quickly setup a custom template
  • page-full.php excludes the sidebar
  • page-sitemap.php lists all pages, posts, and archives for your site
  • page-subpages.php will list any children pages

single.php

single.php handles all posts. You'll mainly want to edit loop-single.php to change the output.

loop.php

The Loop is used by WordPress to display posts.

  • loop.php - used by archive.php and index.php
  • loop-page.php used by front-page.php and all of the page.php templates
  • loop-search.php used by search.php
  • loop-single.php used by single.php

search.php and searchform.php

The search results are called from loop-search.php

searchform.php is only slightly modified by the default WordPress search form to be a search input with a default placeholder.

comments.php

The comments will output in HTML5 format within <article>'s rather than the WordPress default.

editor-style.css

Used by the TinyMCE editor.

404.php

Default 404.php output example

Add a custom footer
Add a custom sidebar
Clone this wiki locally