WordPress Theming
Theming Breakdown
- Contain CSS files and PHP files used to generate
requested pages which are output as HTML. - Often calls to template files (things that can be reused throughout a theme)
- Template files are made up of:
- HTML, PHP
- WordPress Template Tags, the Loop
The complete list of template files recognized by WordPress can be found at codex.wordpress.org.
theme pages
WordPress Theming Breakdown
Common Theme Files
- style.css—Required. Contains special code so the theme can be chosen in the Dashboard.
- index.php—Required. Contains the loop which shows a list of recent blog posts. This is the default home page setting of a new WordPress installation.
- header.php—global file that displays headers and navigation, and also the HTML head code
- footer.php—global file that displays footers and also closing #wrapper, body and html tags
- sidebar.php—Optional, if needed. If no file is present but the call is made, WordPress will insert a default template.
Common Theme Files
- home.php—Optional. Used to render the Blog Posts Index.
- page.php—Optional. Controls what static pages look like. If wp is set to display a static home page instead of posts, page.php is used for home, and index.php is used for the posts page.
- single.php—Optional. Controls the display of individual posts.
Custom Template Pages
<?php
/*
* Template Name: Type Name Here
* Description: Type description here
*/
get_header(); ?>
The above is an example of code that pulls in the header template file.
Template Calls
Required Template Calls
- These calls are used (usually in index.php or other primary template pages) to join two or more template files:
-
<? php get_header(); ?>
- contains opening HTML elements through header info and usually nav
-
<? php get_sidebar(); ?>
- if a sidebar is needed
-
<? php get_footer(); ?>
- Contains footer elements and closing HTML tags
-
<? php get_header(); ?>
Required Template Calls
- <? php wp_head(); ?>
- <? php wp_footer(); ?>
The above MUST be included in the wp_header file and the wp_footer file
PHP for Dynamic Elements
Dynamic PHP instead of static URIs
Images:
<img src="images/banner.png" alt="banner" />
becomes
<img src="<?php echo get_template_directory_uri(); ?>/images/
banner.png" alt="banner" />
Dynamic PHP instead of static URIs
Links to CSS:
<link href="style.css" rel=“stylesheet">
becomes
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet" />
Dynamic Page Titles in Browser
<title><?php global $page, $paged; wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
Required CSS
/*
Theme Name: theme_name_here
Author: your_name
Author URI: website_where_to_find_you
Description: This is a theme …
Version: 1.0
*/
The above is required in your CSS file
The Loop
- Displays contents of the main area of a site
- Multiple loops can appear on one page
- Starts with a query (which posts or pages to display), and ends with a PHP “endwhile” statement. In between, all or selected contents of a post are displayed.
The Loop
- Query post or page
- Start Loop
- the_title (outputs the title of the post)
- the_excerpt (outputs the post excerpt)
- the_content (outputs the full post content)
- the_category (outputs the post categories)
- the_author (outputs the post author)
- the_date (outputs the post date)
- other tags (there is a variety of other tags you can use in the loop)
- endwhile;
- Start Loop
- Exit the loop
The Loop
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title();
the_content();
} // end while
} // end if
?>
Custom Queries
- Template tags can call title of the post/page the_title(); the content of the post the_content(); categories or tags associated with the post the_category(); and the_tags(); and so on.
- The Loop can be limited to displaying only certain posts, for example those files in specific categories or with certain tags. The Query is added to the second line of the loop.
Custom Queries
- This query would only show posts filed in the "Spotlight" category:
- $query = new WP_Query( 'category_name=spotlight' );