With Ruby Sinreich
Based on the amazing work of Tracy Levesque: thetracyl.com/gdi/building-themes/day2.html
The Loop is PHP code used by WordPress to display posts.
The Loop is a set of instructions in a template that grabs content and displays it on a page.
It's called a "loop" because the set of instructions can be repeated multiple times on a page. For example, index.php
.
Check out the WordPress Codex The Loop
Within The Loop are the main parts of a page or post.
<?php the_title(); ?>
<?php the_content(); ?>
You can also grab additional content, aka Metadata, attached to pages or posts. Some function tags will only work if they are placed within The Loop.
Let's check out The Loop in a few different Twentythirteen templates
page.php
index.php
content.php
Use WP_Query
to write your own loops
Check out the WordPress Codex WP_Query
<!-- // The Query -->
<?php $myloop = new WP_Query( $args ); ?>
<ul>
<!-- // The Loop -->
<?php while ($myloop->have_posts()) : $myloop->the_post(); ?>
<li>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</li>
<?php endwhile; ?>
</ul>
Check out the WordPress Codex WP_Query
<!-- // The Query -->
<?php $myloop = new WP_Query( 'author_name=tracy' ); ?>
Check out the WordPress Codex WP_Query Author Parameters
<!-- // The Query -->
<?php $myloop = new WP_Query( 'cat=4' ); ?>
Check out the WordPress Codex WP_Query Category Parameters
<!-- // The Query -->
<?php $myloop = new WP_Query( 'tag=cats' ); ?>
Check out the WordPress Codex WP_Query Tag Parameters
<!-- // The Query -->
<?php $myloop = new WP_Query( 'posts_per_page=5' ); ?>
Check out the WordPress Codex WP_Query Pagination Parameters
<!-- // The Query -->
<?php $myloop = new WP_Query( 'orderby=title' ); ?>
Check out the WordPress Codex WP_Query Orderby Parameters
<!-- // The Query -->
<?php $myloop = new WP_Query( array( 'cat' => 'cooking', 'posts_per_page' => '5', 'orderby' => 'date', 'order' => 'DESC' ) ); ?>
<ul>
<!-- // The Loop -->
<?php while ($myloop->have_posts()) : $myloop->the_post(); ?>
<li>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</li>
<?php endwhile; ?>
<!-- // The end of The Loop -->
</ul>
functions.php
functions.php is a special file that acts like a plugin to add functionality to your theme. If you're using a child theme you can use it modify and add functionality to the parent theme.
Check out the WordPress Codex Functions File Explained
functions.php
in a child theme
functions.php
works like style.css
in a child theme. It adds to and modifies the parent's functions.php
. You don't make a copy of it in your child theme folder like you do with template files, you start a new one.
<?php
/**
* My theme functions and definitions
*/
(all your functions go here)
?>
functions.php
You can tell your theme to load external files in functions.php
. It helps you keep functions.php
from being overloaded with too much code.
// Load a file from the inc folder
require_once 'inc/my-file.php';
It's important to keep theme files organized.
inc
folder)inc
folder)inc
folder)Hooks are provided by WordPress to allow your plugin to 'hook into' the rest of WordPress...There are 2 kinds of hooks:
- Actions: A custom PHP function defined in your plugin (or theme) and hooked, i.e. set to respond, to specific events that take place in WordPress.
- Filters: Functions that WordPress passes data through, at certain points in execution, just before taking some action with the data
Hooks, Actions and Filters allow you to change core WordPress functionality without breaking it.
Hooks - Points at which WordPress allows you to tap into a function and safely modify it.
Some examples are:
Actions - A hook that makes something new happen when a WordPress function is triggered.
Filters - A hook that modifies a WordPress function when it is triggered.
From my talk at WordCamp San Francisco.
19 minutes in.
The following is an overview of some handy WordPress functions you can hook into to enrich your themes.
Check out the WordPress Codex Entire Function Reference
You can add custom images sizes (in addition to the default thumb, medium, large and original).
add_image_size( 'my-img', 400, 400 ); // soft proportional crop mode
add_image_size( 'other-img', 200, 269, true ); // hard crop mode
Check out the WordPress Codex add image size
In your template you can use a tag to load your custom version of featured images.
<?php echo get_the_post_thumbnail($page->ID, 'my-img'); ?>
Tip! Adding custom thumbnail sizes to functions.php will not affect images previously uploaded, only images uploaded from that point on. You will need to regenerate older images.
You can use the handy Regenerate Thumbnails plugin to create the custom sizes of your previously uploaded images.
You may want to add css and js files to your theme, for instance jQuery, or a framework like Bootstrap. A common beginner mistake is to hard code these into header.php
. The correct way to add files to <head>
is to enqueue it in your functions.php
file.
Check out the WordPress Codex wp enqueue style and
wp enqueue script
Load WordPress' core copy of jQuery. If you're using jQuery with your theme you should always use WP's copy vs. an external version.
function my_scripts() {
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Load a script that depends on jQuery. Bootstrap is a framework that needs jQuery to run. The code below will load both jQuery and Bootstrap JS.
function add_bootstrap() {
wp_enqueue_script(
'add-bootstrap-script',
get_stylesheet_directory_uri() . '/inc/bootstrap/js/bootstrap.min.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'add_bootstrap' );
Load a stylesheet and a script.
function add_bootstrap() {
wp_enqueue_script(
'add-bootstrap-script',
get_stylesheet_directory_uri() . '/inc/bootstrap/js/bootstrap.min.js',
array( 'jquery' )
);
wp_enqueue_style(
'add-bootstrap-style',
get_template_directory_uri() . '/inc/bootstrap/css/bootstrap.min.css',
array(), 'all' );
}
add_action( 'wp_enqueue_scripts', 'add_bootstrap' );
If you have used custom menus in WordPress sites before (Appearance > Menus in the admin) you know a theme can have specific menu locations.
Check out the WordPress Codex register nav menus
Use register_nav_menus
to register your menus.
register_nav_menus( array(
'footer-nav' => 'Footer Menu',
) );
Use the wp_nav_menu
tag to assign a menu to a location in your theme.
<?php wp_nav_menu( array( 'theme_location' => 'footer-nav' ) ); ?>
Check out the WordPress Codex wp nav menu
You can also use wp_nav_menu
to load any custom menu you've created in Appearance > Menus. You can use the menu's ID, slug, or name.
<?php wp_nav_menu( array('menu' => '2' )); ?>
Most themes come with specific widgetized areas -- locations in the sidebar, footer, header, etc. that you can drag and drop widgets into. You can use register_sidebar
to create widgetized areas in your theme.
Check out the WordPress Codex register sidebar
Use register_sidebar
to register your widgetized areas.
register_sidebar(array(
'name' => __( 'Header Widget Area' ),
'id' => 'headerwidget',
'description' => __( 'The header widget area.' ),
'before_widget' => '<div id="%1$s" class="headerwidget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="headerwidgettitle">',
'after_title' => '</h4>',
));
Use the dynamic_sidebar
tag to assign a widgetized area to a location in your theme.
<?php dynamic_sidebar( 'headerwidget' ); ?>
Check out the WordPress Codex dynamic sidebar
Use the dynamic_sidebar
tag along with conditional tags to load certain widget areas on certain pages.
if(is_page( 'about' )){
dynamic_sidebar( 'aboutsidebar' );
}
if(is_page( 'contact' )){
dynamic_sidebar( 'contactsidebar' );
}
Try to use any of the functions we learned today.
Try to do it yourself (if you're stuck download functions.php off Github).
Not only can you create widgetized areas, you can create widgets to drag and drop into those areas.
Check out the WordPress Codex Widgets API
Note: You should put the widget code in its own file. If your widget is breaking the site you can easily turn it "on" and "off" while you troubleshoot code. Add a line of code to functions.php
to load the file.
"On"
/* load my widget */
require_once 'inc/my-widget.php';
"Off"
/* load my widget */
//require_once 'inc/my-widget.php';
We'll go through all the code for My Awesome Widget
We'll be here to help.
A Custom Type is a Post Type you define.
Check out the WordPress Codex Post Types
They both
You can create your own post type that has its own fields, admin in the back-end and layout on the front-end. This is perfect for any type of repeating content you want to manage easily from the WordPress admin.
Custom Post Types can also have their own custom taxonomies. That just means they can have their own ways to group posts together.
Categories and Tags are taxonomies for Posts and Pages.
If we made a custom post type "Movies."
We could make custom taxonomies this post type
Using The WordPress Template Hierarchy we can make templates for the archive pages for these taxonomies.
Front end and admin tour of the custom post type "Kittens."
You can also watch a video of my presentation: Custom Post Types for Right-Brained folks on WordPress.tv
(Alt link, start at 17 minutes in.)
Note: Just like with widgets, CPT code should be put in its own file. You can put a line of code in functions.php
to load the file.
require_once 'inc/kittens.php';
inc/kittens.php
inc/kittens.php
is the file that defines all the details for our Custom Post Type and Custom Taxonomies.
Check out the WordPress Codex register post type
inc/kittens.php
Register your custom post type and custom taxonomies. We'll go through all the code for our Kittens CPT
Naming Best Practices While it's convenient to name your custom post type a simple name like "product," it is better if you prefix your name with a short "namespace" that identifies your theme.
Also CPT names have a max. of 20 characters and can not contain capital letters or spaces.
page-kittens.php
Make the template file that contains the loop for our Kittens CPT. We are going to use our template making and WP_Query skills to make a page to display our kittens.
single-wcp_kittens.php
Remember The WordPress Template Hierarchy?
It works for CPTs, too.
single-wcp_kittens.php
Make the template file for a single Kitten post. We'll throw in a custom thumbnail.
Have you named everything correctly and you're getting a 404 when you click on your CPT? Before Googling, reading support forums and going out of your mind refresh your permalinks. That will do the trick.
The WTH also works for custom taxonomies.
taxonomy.php
and taxonomy-custom_cat_color.php
Make a template for all custom taxonomy archive pages and for a specific term.
View the code on Github: taxonomy.php and taxonomy-custom_cat_color.php
And please take the GDI survey