WordPress Workshop

Day Two

Link to slides

With LeeAnn Kinney / leeann.a.kinney@gmail.com

Schedule/Time frame for Day 1

  • Quick review & questions from last week
  • Theme structure
  • Building child themes
  • Coffee break apx 15 min
  • Building child themes cont.
  • Break for lunch apx 30 - 45 min
  • Child theme cont
  • Starter themes
  • Other file modifications

Review last week

Questions from last week?

Themes

  • Determine how the site looks
  • Adds functionality
  • Free vs. Paid

WordPress file structure

  • wp-admin & wp-includes: WP core files *do not touch*
  • wp-content: Theme, plugin & uploaded files (media, etc.)

Editing themes

Never edit the WP core files; things can easily get broken and will be overwritten with any updates.

3 ways of custom theme building

  • Child Themes
  • Bare bones starter theme
  • Custom theme from scratch

Child theme

  • Allows you to overwrite certain parts of parent
  • Anything not specified will default to parent styles/functionality
  • Pro: Easy to get started, can do a ton with just CSS changes
  • Con: Some themes will not allow for a child

Bare bones starter theme

  • Allows you to start with a clean slate
  • No need to overwrite styles
  • Pro: PHP knowledge isn't necessary
  • Con: Might take a little longer to get started

Custom theme from scratch

  • Requires writing all files
  • Pro: A completely custom theme
  • Con: Requires a lot more time and knowledge of PHP; room for error

Child themes

With just a few lines of code we can get up and running with a child theme.

WordPress looks for files in the child theme folder first, anything it can't find, it defaults back to the parent theme.

Child themes

Child themes are a safe option because if you break anything it can be undone or deleted without effecting functionality of the site.

Break?

What a child theme needs

One - a CSS file

/*
Theme Name: Your theme name here
Theme URI: url for the theme, if you have one
Description: A description for your theme.
Author: Your name here
Author URI: Your website here
Template: folder name of parent theme (can find this by looking at wp-content folder)
Version: version number, start with 1 then goes up with points, i.e.1.1
*/

What a child theme needs

Two - a functions.php file

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

What a child theme needs

Three - a screen shot (optional)

Below is an example of a child theme missing a screen shot

wordpress theme page showing a child theme with no image

A screen shot should be 880px by 660px and be named “screenshot.png”

Adding your child theme

  • Create a folder under > wp-content > themes
  • Name the theme with no spaces
  • Example: twentyfifteen-child
  • Add style.css, functions.php and screenshot.png to folder
  • Activate your theme through Appearance > Themes

Let's build a child theme!

Use your theme from last week or start fresh with one of the WordPress default themes, twentyfourteen, twentythirteen, etc.

Let's build a child theme!

See if you can change the following

  • The font size of all h1 tags
  • Text link color
  • The font family of all p tags
  • What else?

Changing other theme files

Sometimes you might want to change other parts of a themes functionality, this can be done by copying the template files of the parent theme and overwriting in the child theme.

More common template files include:

  • header.php: The global header of the site
  • footer.php: The global footer of your site (where you'll find “Powered by WordPress”
  • index.php: This is the posts (blog) page
  • page.php: Controls the static pages of the site
  • sidebar.php: The sidebar widgets
  • single.php: Your single posts
  • 404.php: Allows you to edit your 404 page

Let's build it!

Modify the footer.php file and remove “Powered by WordPress”

Creating more templates

  • You can make additional templates in your child theme
  • They will show up in the template drop-down menu on page/post edit screen

Creating a template file

First give it a name


<?php
/*
Template Name: *template name goes here*
*/
?>

Then include at least the following tags


<?php get_header(); ?>

<?php get_footer(); ?>

Let's build it

  1. Copy page.php into your child theme and rename it
  2. Save
  3. Add template name
  4. Adjust css

Side note: WP adds classes to your body tag; this can be used to style pages

Include tags

Include tags execute the HTML & PHP found in another template

WordPress Codex

Function tags

Functions defined for use in WordPress Themes

More from the WordPress Codex


Copyright © <?php echo date('Y'); ?> <a href="<?php echo home_url( '/' ); ?>"><?php bloginfo( 'name' ); ?></a>

Conditional tags

Displays content based on page and conditions it matches.

More from WordPress Codex


<?php
	if(is_front_page()){
		echo "<p>*This will only show up on the home page*</p>";
	}
?>


<?php if (is_page() ) {?>
	<div class='footer-page-only'>
		<h1>*this will only show up on pages, not posts*</h1>
	</div>
<?php } ?>

Let's build it!

Let's use some template tags to customize our themes even more.

Use at least one include tag, one function tag and one conditional tag

Template hierarchy

This is how WordPress determines which files to use on individual pages

diagram of WordPress template hierarchy

Child theme plugins

Child themes can also be created via a plugin which can be handy if you don't have ftp access.

Let's build it

Let's install a child theme plugin to see the difference.

Bare bones starter themes

Starter themes are not meant to be used like parent themes. The developers have created these themes so you can hack them and make it your own.

Some popular starter themes

Underscores

A few highlights...

  • Custom 404 page
  • Sample custom headers
  • Toggle responsive navigation built in
  • 2 sample CSS files

Some popular starter themes

Bones

A few highlights...

  • Mobile-first
  • Uses Sass
  • Custom post types & custom dashboard functions preloaded

Some popular starter themes

Quark

A few highlights...

  • Based off of underscores & TwentyTwelve
  • Default media queries built in
  • WooCommerce compatible
  • Multilingual ready

Let's build it!

Download a starter theme of your choice (doesn't have to be one of the 3 mentioned) and update the screenshot along with some CSS.

What are some other common modifications?

  • Tags
  • Search
  • Categories

Tag Templates

After clicking on a tag link, a user is taken to a page listing those posts. There are many different ways to display these posts, controlled by the tag templates.

Search

Used to create a custom search page.

Categories

Similarly to tags, you may want to display categories differently.

Resources