SlideShare a Scribd company logo
WordPress templates
How the content you put into wp-admin gets
          turned into web pages
What are WordPress
templates?

• Individual PHP files in a theme that
  you can modify

• Any given page request selects a
  particular template

• A child theme inherits (and overrides)
  the templates of its parent
A basic template
<?php

// Includes header.php
get_header();

// Content goes here

// Includes sidebar.php
get_sidebar();

// Includes footer.php
get_footer();

?>
header.php


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type"
          content="text/html; charset=utf-8" />
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
  </head>
  <body>
footer.php



    <?php wp_footer(); ?>
  </body>
</html>
functions.php


<?php

// This is where helper functions and miscellaneous
// theme settings go

// We can leave this empty for now

?>
sidebar.php


<?php

// This can also be empty

?>
What kind of content?


• Group of posts
• Single post or page
• Media attachment
Groups of posts


• Most recent posts (index.php)
• Posts in a specific category
  (category.php)

• Search results (search.php)
The loop

“ The Loop is used by WordPress to display each
  of your posts. Using The Loop, WordPress
  processes each of the posts to be displayed on
  the current page and formats them according to
  how they match specified criteria within The
  Loop tags. Any HTML or PHP code placed in
  the Loop will be repeated on each post.”
 —WordPress Codex
A basic WordPress loop

<?php

while (have_posts()) {
  the_post();
  // Display post content
}

?>
A more sophisticated loop,
with error checking
<?php

if (have_posts()) {
  while (have_posts()) {
    the_post();
    // Display post content
  }
} else {
  echo "Sorry, no posts were found.n";
}

?>
How do you display post
content?

• Template Tags are pre-written helper
  functions you can use in your theme

• For example the_title() which
  prints out the current post’s title

• They are documented extensively
Using template tags
<?php

while (have_posts() {
  the_post();

?>
<div id="<?php the_ID(); ?>">
   <h1><?php the_title(); ?></h1>
   <div class="content"><?php the_content(); ?></div>
   Posted on <?php the_data(); ?>
   at <?php the_time(); ?>
</div>
<?php

}

?>
Word press templates
Word press templates
Template hierarchy
index.php       home.php         date.php

                front-page.php   author.php

                404.php          category.php

header.php      search.php       tag.php

footer.php      archive.php      taxonomy.php

functions.php   single.php       attachment.php

                page.php         custom.php

More Related Content

PDF
WordPress Theme Development for Designers
elliotjaystocks
 
PPTX
Custom WordPress theme development
Tammy Hart
 
PPTX
WordPress Theme Development: Part 2
Josh Lee
 
PPTX
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
Chandra Prakash Thapa
 
PPTX
Rebrand WordPress Admin
Chandra Prakash Thapa
 
PPTX
Introduction to Custom WordPress Themeing
Jamie Schmid
 
PDF
WordPress Theme Structure
keithdevon
 
PPT
Custom Menu Support for WordPress Themes
DaisyOlsen
 
WordPress Theme Development for Designers
elliotjaystocks
 
Custom WordPress theme development
Tammy Hart
 
WordPress Theme Development: Part 2
Josh Lee
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
Chandra Prakash Thapa
 
Rebrand WordPress Admin
Chandra Prakash Thapa
 
Introduction to Custom WordPress Themeing
Jamie Schmid
 
WordPress Theme Structure
keithdevon
 
Custom Menu Support for WordPress Themes
DaisyOlsen
 

What's hot (20)

ODP
Meetup child-themes
DaisyOlsen
 
PPTX
Customizing WordPress Themes
Laura Hartwig
 
PDF
WCLV - Introduction to child themes
vegasgeek
 
ODP
Drupal 7 Theming - what's new
Marek Sotak
 
ODP
Drupal
tnhomestead
 
PDF
D7 theming what's new - London
Marek Sotak
 
ODP
Choosing Themes
DaisyOlsen
 
PDF
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
PDF
Theme like a monster #ddceu
Marek Sotak
 
PDF
WordPress Theme Workshop: Part 3
David Bisset
 
PDF
Atomicant Drupal 6 Theming
Marek Sotak
 
PDF
Arizona WP - Building a WordPress Theme
certainstrings
 
PDF
Streamlining Your Template Structures When Building Themes
Cameron Jones
 
ODP
Meetup child-themes
DaisyOlsen
 
PPTX
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
Sudeep Balchhaudi
 
KEY
WordPress Developers Israel Meetup #1
Yoav Farhi
 
PPTX
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
PDF
Theming 101
WinnipegWordcamp
 
PDF
Installing And Configuration for your Wordpress blog
igorgentry
 
PDF
Cms & wordpress theme development 2011
Dave Wallace
 
Meetup child-themes
DaisyOlsen
 
Customizing WordPress Themes
Laura Hartwig
 
WCLV - Introduction to child themes
vegasgeek
 
Drupal 7 Theming - what's new
Marek Sotak
 
Drupal
tnhomestead
 
D7 theming what's new - London
Marek Sotak
 
Choosing Themes
DaisyOlsen
 
Adopt or hack - how to hack a theme in a Drupal way
Marek Sotak
 
Theme like a monster #ddceu
Marek Sotak
 
WordPress Theme Workshop: Part 3
David Bisset
 
Atomicant Drupal 6 Theming
Marek Sotak
 
Arizona WP - Building a WordPress Theme
certainstrings
 
Streamlining Your Template Structures When Building Themes
Cameron Jones
 
Meetup child-themes
DaisyOlsen
 
"Ensuring chances of theme acceptance in wordpress.org directory" on WordCamp...
Sudeep Balchhaudi
 
WordPress Developers Israel Meetup #1
Yoav Farhi
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
Theming 101
WinnipegWordcamp
 
Installing And Configuration for your Wordpress blog
igorgentry
 
Cms & wordpress theme development 2011
Dave Wallace
 
Ad

Similar to Word press templates (20)

PDF
Builing a WordPress Theme
certainstrings
 
PPTX
PSD to WordPress
Nile Flores
 
DOC
Wordpress(css,php,js,ajax)
SARAVANAN RAMAOORTHY
 
PPTX
The Way to Theme Enlightenment
Amanda Giles
 
PPTX
The Way to Theme Enlightenment 2017
Amanda Giles
 
ODP
Creating Themes
DaisyOlsen
 
PDF
How does get template part works in twenty ten theme
mohd rozani abd ghani
 
PPTX
Wordpress Custom Child theme
YouSaf HasSan
 
PDF
Introduction to WordPress Theme Development
Sitdhibong Laokok
 
PDF
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
LinnAlexandra
 
PDF
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
 
PDF
WordPress Theme Workshop: Part 4
David Bisset
 
PDF
How to make a WordPress theme
Hardeep Asrani
 
PDF
Various Ways of Using WordPress
Nick La
 
PDF
Intro to WordPress theme development
Thad Allender
 
PPT
WordPress Theme Design - Rich Media Institute Workshop
Brendan Sera-Shriar
 
PPTX
WordPress Structure and Best Practices
markparolisi
 
PDF
WordPress Theming 101
Zero Point Development
 
DOC
20110820 header new style
AgentiadeturismInvenio
 
PPTX
Your First Wordpress Theme
sayed fathey
 
Builing a WordPress Theme
certainstrings
 
PSD to WordPress
Nile Flores
 
Wordpress(css,php,js,ajax)
SARAVANAN RAMAOORTHY
 
The Way to Theme Enlightenment
Amanda Giles
 
The Way to Theme Enlightenment 2017
Amanda Giles
 
Creating Themes
DaisyOlsen
 
How does get template part works in twenty ten theme
mohd rozani abd ghani
 
Wordpress Custom Child theme
YouSaf HasSan
 
Introduction to WordPress Theme Development
Sitdhibong Laokok
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
LinnAlexandra
 
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
 
WordPress Theme Workshop: Part 4
David Bisset
 
How to make a WordPress theme
Hardeep Asrani
 
Various Ways of Using WordPress
Nick La
 
Intro to WordPress theme development
Thad Allender
 
WordPress Theme Design - Rich Media Institute Workshop
Brendan Sera-Shriar
 
WordPress Structure and Best Practices
markparolisi
 
WordPress Theming 101
Zero Point Development
 
20110820 header new style
AgentiadeturismInvenio
 
Your First Wordpress Theme
sayed fathey
 
Ad

More from Dan Phiffer (7)

PDF
Occupy.here
Dan Phiffer
 
PDF
Intro to JavaScript
Dan Phiffer
 
PDF
Static layouts with css
Dan Phiffer
 
PDF
Intro to word press
Dan Phiffer
 
PDF
Diving into php
Dan Phiffer
 
PDF
The web context
Dan Phiffer
 
PDF
Web tech 101
Dan Phiffer
 
Occupy.here
Dan Phiffer
 
Intro to JavaScript
Dan Phiffer
 
Static layouts with css
Dan Phiffer
 
Intro to word press
Dan Phiffer
 
Diving into php
Dan Phiffer
 
The web context
Dan Phiffer
 
Web tech 101
Dan Phiffer
 

Word press templates

  • 1. WordPress templates How the content you put into wp-admin gets turned into web pages
  • 2. What are WordPress templates? • Individual PHP files in a theme that you can modify • Any given page request selects a particular template • A child theme inherits (and overrides) the templates of its parent
  • 3. A basic template <?php // Includes header.php get_header(); // Content goes here // Includes sidebar.php get_sidebar(); // Includes footer.php get_footer(); ?>
  • 4. header.php <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title><?php bloginfo('name'); ?></title> <?php wp_head(); ?> </head> <body>
  • 5. footer.php <?php wp_footer(); ?> </body> </html>
  • 6. functions.php <?php // This is where helper functions and miscellaneous // theme settings go // We can leave this empty for now ?>
  • 7. sidebar.php <?php // This can also be empty ?>
  • 8. What kind of content? • Group of posts • Single post or page • Media attachment
  • 9. Groups of posts • Most recent posts (index.php) • Posts in a specific category (category.php) • Search results (search.php)
  • 10. The loop “ The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post.” —WordPress Codex
  • 11. A basic WordPress loop <?php while (have_posts()) { the_post(); // Display post content } ?>
  • 12. A more sophisticated loop, with error checking <?php if (have_posts()) { while (have_posts()) { the_post(); // Display post content } } else { echo "Sorry, no posts were found.n"; } ?>
  • 13. How do you display post content? • Template Tags are pre-written helper functions you can use in your theme • For example the_title() which prints out the current post’s title • They are documented extensively
  • 14. Using template tags <?php while (have_posts() { the_post(); ?> <div id="<?php the_ID(); ?>"> <h1><?php the_title(); ?></h1> <div class="content"><?php the_content(); ?></div> Posted on <?php the_data(); ?> at <?php the_time(); ?> </div> <?php } ?>
  • 17. Template hierarchy index.php home.php date.php front-page.php author.php 404.php category.php header.php search.php tag.php footer.php archive.php taxonomy.php functions.php single.php attachment.php page.php custom.php