(720) 728-8931

WordPress for Developers: Custom Themes

WordPress For Developers Custom Theme

Screenshot of the Custom Theme we will Develop in WordPress for Developers

So you have found a theme that almost meets your needs, but you can’t figure out how to make those few adjustments to make it perfect?  Or, you just want to go in and make a custom theme so it is unique and does all the things YOU want it to do?  Then join me for WordPress for Developers: Custom Themes.  After the class you will have a solid understanding how to make edits to an existing theme or create your own custom theme so that it does exactly what you want it to do.  In the class we will explore the inner makings of a theme and create our first custom theme where ALL of the content is dynamic and accessible from the dashboard.  We will develop various templates including a front page, other pages, blog posts, author and archive templates and even multiple sidebars we can specify to display on any given template.

Course Description and Prerequisites

Now that you have a handle on managing your WordPress site, this course will take you behind the scenes and show you how to build a 100% custom WP theme. Using HTML5/CSS3 you will learn how to: develop a custom theme; setup custom loop queries for your blog/pages/archives; add custom post types to manage additional content; create custom page templates; add a site search; familiarize you with the WP codec and more. Leave class with a fully functioning custom theme you can use immediately or easily customize to meet your needs. Prerequisite: Getting Started with WordPress: Content Management or WordPress familiarity; It All Starts with HTML5/CSS3 or equivalent knowledge; Interact with JavaScript is helpful but not required.

Day One: Constructing the Template Files and Making All Content Dynamic

On the first day we will take the HTML template we made in It All Starts with HTML5/CSS3 and chop it up into WordPress template files.  We will start with the style.css file and learn how to communicate with WordPress to name our theme along with other metadata.  We will proceed by breaking our HTML up into templates for our header, sidebar, main content area and the footer. With our new templates created we will learn how to use WordPress PHP function calls to create a highly dynamic website that pulls all of our content from the WordPress dashboard.

Day One Outline Register CFU Outline PDF
  1. Introductions

    1. A Little About Me
    2. A Little About You
  2. An Overview of the WordPress File System

    1. Use a FTP Client to Access/Upload/Download Your Theme Files
      1. There are Several Free FTP Clients Available for Download
        1. Filezilla (all platforms)
        2. Coffee Cup (Windows)
        3. Cyberduck (Mac)
        4. HTML Text Editors May have a Built-in FTP Client
      2. FTP or File Transfer Protocol Allows Upload/Download Files Between Server & Client
      3. The Left Side is the Client File System and the Left is the Server File System
      4. Can Transfer Files Between Client & Server
      5. You Keep a Backup of Files on Your Computer
    2. The WordPress Root Directory
      1. WordPress Root Directory Folders
        1. wp-admin - The Files of Code that Operate the Dashboard & Login Functionality
        2. wp-includes - WordPress Core Code that Operates the Front-end & Extends the Functionality
        3. wp-content - Your Theme Files, Plugins & Media Uploads
        4. NEVER Alter the Code in the wp-admin or wp-includes Folders
      2. WordPress Root Directory Files
        1. index.php - Executed when a User Visits Your Site, Initiates the WordPress Stack
        2. wp-config.php - Contains the Database Location & Login Credentials
        3. The Other Files are Used by WordPress and None of Them Should EVER be Altered
    3. The WordPress wp-content Folder
      1. This is Where All of Your Site Specific Files Live
      2. The plugins Folder is Where All the Code for Your Plugins Live
      3. The uploads Folder is Where All of Your Media Files are Stored
      4. The upgrade Folder is Used for Temporary Files Needed to Upgrade Plugins or Themes
      5. The themes Folder Contains All of Your Theme Files
  3. An Overview of WordPress Primary Template Files

    1. style.css
      1. The Style Sheet Defines the "Look" of Your Site
      2. Contains Basic Information About Your Theme
        1. Theme Name
        2. Author
        3. Version
        4. Description
      3. This is Not Technically a Template File, but it is Required
    2. functions.php
      1. A List of Functions Used to Customize Your Theme
      2. This File Contains PHP Code Only
      3. This is Not Technically a Template File, but it is Required
    3. index.php
      1. Contains All of the HTML That Defines Your Main Content
      2. The Default Template Used if Other Templates are Not Available
      3. This is a Template Inside the Loop
      4. This is a Required File for Minimal Functionality
    4. header.php
      1. Contains All of the HTML that You Want to Place Before Your Content
      2. Generally Used as a Header on All of Your Templates
      3. You Can Have Multiple Header Files
      4. This is a Template Outside the Loop
    5. footer.php
      1. Contains All of the HTML that You Want to Place After Your Content
      2. Generally Used as a Footer on All of Your Templates
      3. You Can Have Multiple Footer Files
      4. This is a Template Outside the Loop
    6. sidebar.php
      1. Contains All of the Aside Content, Usually a Sidebar
      2. You Can Have Multiple Sidebar Files
      3. This is a Template Outside the Loop
  4. Other Optional WordPress Template Files in the Loop

    1. front-page.php
      1. This Template Will Override the index.php Template if it Exists
      2. Use this Template for a Static Home Page if Not Displaying Your Blog Roll
      3. In Settings » Reading You Must Set to Static Page & Choose the Home Page
      4. Specificity of Home Page Templates
        1. front-page.php
        2. index.php
    2. single.php
      1. Displays Individual 'Posts' Type Pages
      2. Also Displays Attachment Posts & Custom Post Types
        1. You Can Create a Specific Post Type Template in the Form single-[post_type_name].php
        2. You Can Create a Specific Attachment Type Template in the Form attachment.php
        3. You Can Create get More Specific with Attachment Types Using the Form image.php or video.php
      3. Specificity of 'Posts' Page Templates
        1. image.php (or video.php, text.php, etc.)
        2. attachment.php
        3. single-attachment.php
        4. single-[post_type_name].php
        5. single.php
        6. index.php
    3. pages.php
      1. Only Displays Individual 'Pages' Post Type
      2. You Can Create a Template for a Specific Page in the Form
        1. page-[id].php
        2. page-[slug].php
      3. You Can Create Totally Custom Page Templates
        1. You Can Name them Whatever You Want
        2. You Assign Individual Pages to a Custom Template in Drop Down
        3. The Drop Down is in the Page Attributes Card in Pages
      4. Specificity of 'Pages' Post Types
        1. custom template
        2. page-[slug].php
        3. page-[id].php
        4. page.php
        5. index.php
    4. archive.php
      1. Archive Pages Show a List of Posts Pulled from a Specific Group
        1. Author Pages
        2. Category Pages
        3. Tag Pages
        4. Date Pages
        5. Other Meaningfully Grouped Pages
      2. Not a Required File, but Good Idea to Structure Your Lists
      3. Specificity of 'Pages' Post Types
        1. archive.php
        2. index.php
    5. Other Specific Archive Templates
      1. Archives Grouped by Author
        1. author-[nicename].php
        2. author-[id].php
        3. author.php
        4. archive.php
        5. index.php
      2. category.php
        1. category-[slug].php
        2. category-[id].php
        3. category.php
        4. archive.php
        5. index.php
      3. tag.php
        1. tag-[slug].php
        2. tag-[id].php
        3. tag.php
        4. archive.php
        5. index.php
      4. date.php
        1. date-[slug].php
        2. date-[id].php
        3. date.php
        4. archive.php
        5. index.php
    6. Other Templates Used in WordPress
      1. comments.php - Displays the Structure of Your Comments
      2. search.php - Displays the Structure of Search Results
      3. 404.php - Displays the Structure for Pages Not Found
  5. Creating the Primary Theme Templates

    1. Slice Your HTML5 Page
      1. We'll Continue with the Template We Made in It All Starts with HTML5/CSS3
      2. Other Pages You Design May Vary in the HTML5 Structure
      3. The Objective is to Slice Your Document Into the Following Sections
        1. Header & Top Navigation Menu
        2. Sidebar Content
        3. Main Content Section
        4. Footer
      4. Other Pages You Design May Vary in the HTML5 Structure
      5. WordPress Uses These Templates to Create a Single HTML Document
    2. The Header (header.php)
      1. The <!DOCTYPE> & Opening <html> Tags
      2. The Entire <head></head> Tag & It's Content
      3. The Opening <body> Tag
      4. The Entire <header></header> Tag & It's Content
      5. The Entire Top <nav></nav> Tag & It's Content
    3. The Sidebar (sidebar.php)
      1. The Entire <aside> Tag & It's Content
    4. The Main Content Area (index.php)
      1. The Entire <main> Tag & It's Content
    5. The Footer (footer.php)
      1. The Entire <footer> Tag & It's Content
      2. The Closing <body> Tag
      3. The Closing <html> Tag
  6. Making the Content Dynamic

    1. The Objective is to Make ALL Site-Specific Content Dynamic
    2. Some Content Can be Inserted with Direct WordPress Function Calls
    3. Primary Content Can be Inserted Through the Loop
    4. Adding Dynamic Content to header.php
      1. Typical Content Generally Found in the header.php
        1. The Language of the Content
        2. The Character Set Used
        3. The Site Title
        4. The Tagline
        5. The Page Title
        6. The Path to Companion Files (style sheets, JavaScript files, favicon)
        7. Plugin Support Files
        8. Navigation Menu
      2. The bloginfo() Function Call
        1. The bloginfo() Function Prints Information About Your Site
        2. Simply Pass an Appropriate String Parameter for Related Information
        3. Print the Site Language with bloginfo('language')
        4. Print the Character Set with bloginfo('charset')
        5. Print the Site Title with bloginfo('name')
        6. Print the Site Tagline with bloginfo('description')
        7. Print the Site Theme Directory with bloginfo('template_url')
      3. The wp_head() Function Call
        1. This Function Outputs Files Used by Plugins
        2. Always Include this Function Call at the End of Your <head></head> Section
        3. Without this Function Call Your Plugins May Not Work
      4. The register_nav_menus() & wp_nav_menu() Function Calls
        1. Tell WordPress You Want Menus with register_nav_menus() in functions.php
        2. Pass an Array Containing Your Menu Name and Location Name
        3. To Print a Menu Use wp_nav_menu() in the header.php (or any template file)
        4. There are Many Parameters You Can Pass to wp_nav-menu() to Structure the Menu
    5. Adding Dynamic Content to the sidebar.php
      1. Typical Content Generally Found in the Sidebar(s)
        1. Additional Navigation Menus
        2. Site Search Form
        3. Newsletter Signup Form
        4. Recent Blog Related Post, Category and Archive Menus
        5. Social Media Follow and Share Icons
        6. Any Related Information as an Aside
      2. The register_sidebar() Function Call
        1. Tell WordPress You Want a Sidebar Widget Area with register_sidebar() in functions.php
        2. Pass an Array Containing the Name and ID of Your Widget Area
        3. Optionally Define Widget Wrapper Elements and Title Elements
        4. There are no Limits on Quantity of Widget Areas
      3. Use the is_active_sidebar() Function Call to Check if the Widget Area Exists
      4. Use the dynamic_sidebar() Function Call in sidebar.php
        1. This Function Call Will Define the Widget Area
        2. Setup HTML Wrapper Elements to Contain Your Widgets Using the ID Set in functions.php
        3. Once Setup Add Widgets via the WordPress Dashboard
    6. Adding Dynamic Content to the index.php
      1. Default Template to Output Your Primary Content
      2. This is Where You Will Use the WordPress Loop
        1. Use the PHP Conditional If Statement to Check for Posts with have_posts()
        2. The Loop uses the PHP While Loop to Parse the Appropriate Content from the Database
          1. The While Loop Condition also uses have_posts() and will Loop as Long as Posts Exist
          2. In addition, the_post() Stores Each Post's Meta Data
        3. Don't Forget to Close the Loop with the PHP endwhile; Statement
        4. And, Don't Forget to Close the if with the PHP endif; Statement
      3. The index.php Template Specifies the Other Template Parts
        1. Use get_header() at the Top to Include the header.php Template
        2. Use get_sidebar() Before or After the Loop to Include the sidebar.php Template
        3. Use get_footer() at the Bottom to Include the footer.php Template
    7. Adding Dynamic Content to the footer.php
      1. The footer.php Template Caps Off the Document
        1. Generally Includes the Copyright Statement
        2. A Great Place for Additional Widget Areas
        3. Can Include Links to Policy and Terms Pages
        4. Social Media Menus and Other Navigation Menus are Found in the footer.php
      2. The footer.php Template Includes the Following HTML Tags
        1. Wrap Your Footer Content in the <footer> Tag
        2. Close Any Page Content Wrapper Tags
        3. Great Place for Adding JavaScript <script> Tags for Loading After the Content
        4. Always End with the Closing <body> and <html> Tags
      3. The wp_footer() Function Call
        1. This Function Outputs Files Used by Plugins
        2. Always Include this Function Call Before Your Closing </body> Tag
        3. Without this Function Call Your Plugins May Not Work

Day Two: The Blog Template Files

In the second day we will build out the basic WordPress blog templates for the blog roll and individual blog posts.  There are a plethora of templates one can develop for a WordPress blog.  We will focus on the blog roll and the individual post templates primarily, but if time allows we will build an archive template. We will discuss the archive templates in some detail after completing the two primary files.

Day Two Outline Register CFU Outline PDF
  1. Creating WordPress Page Templates

    1. The Front Page or Home Template (for website vs blog)
      1. For a Website Home Page Make the front-page.php Template
        1. Start by Copying the index.php Template
        2. Save it as front-page.php
        3. Customize front-page.php for the Needs of Your Home Page
      2. You Can Also Use the home.php Template Instead
      3. Be Sure to Set the Static Front Page in the Dashboard
        1. Located in the Dashboard Under Settings»Reading
        2. Set Your Home Page as the Static Page
        3. Set Your Blog Page for the Blog Roll
    2. The Standard Page Template
      1. The Standard Page Template is page.php
      2. Start by Copying the index.php Template
      3. Customize page.php to Display Your General Page Content
    3. Custom Page Templates
      1. Some Pages May Have Special Output Needs that Differ from the Standard Page Template
      2. You Can Make as Many as You Need
      3. Start by Copying the page.php Template
      4. Customize the Code to Output Your Content
      5. Save it as page-[pagename].php
  2. Defining Multiple Sidebar Templates

    1. Similar to Pages You Can Have Multiple Sidebar Templates
    2. Start by Copying the sidebar.php Template
    3. Change the ID of Your Widget Area to Match the Sidebar Registration from the functions.php File
    4. Change the Sidebar Name in the is_active_sidebar() and dynamic_sidebar() Function Calls
    5. Add Any Other Custom Code if Necessary
    6. Save it as sidebar-[sidebarname].php
  3. Developing the Blog Templates

    1. The Standard Blog Roll Template
      1. The index.php Serves as the Template for Your Blog Roll
      2. You Can Use the_ID() Function Call to Create a Unique ID in the <article> Tag
      3. Add the Title of Each Post in the Role so They Link to it's Individual Blog Page
        1. In a Blog Roll, the Blog Titles Should Link to the Full Post
        2. Add an <a> tag Around the_title() Function Call
        3. Use the_permalink() Function Call in the href Attribute
        4. Use the_title() Function Call in the title Attribute
      4. Add the Publish Date with the_date() Function Call
        1. Pass PHP Date Codes to the_date()
        2. Always Pass as a String Using Single Quotes
        3. Passing the String 'M d, Y' Outputs "Month-Name Day, Four-Digit-Year"
      5. Add the Post's Author's Information and/or Author's Archive Link
        1. To Display the Author's Name Use the_author() Function Call
        2. To Display the Author's Name and Link to Archive Use the_author_posts_link() Function Call
      6. Add Categories and Tags Metadata for Each Post
        1. Use the_category() Function Call to Output the Post's Categories
        2. Use the_tags() Function Call to Output the Post's Tags
        3. Both Methods Will Link to the Blog Archive for the Corresponding Category or Tag
      7. Adding the Featured Image to Each Blog in the Roll
        1. First Check to See if the Post has an Image Attached Using the has_post_thumbnail() Function Call
        2. Output the Featured Image Using the the_post_thumbnail() Function Call
        3. Pass the Image Display Size Using Size Keywords or an Array with ('w,h')
      8. Using the_excerpt() Function Call vs the_content()
        1. For the Blog Roll You May Only Want to Display an Excerpt Rather than the Full Content
        2. With an Excerpt a Read More Link is Printed that Goes to the Full Post
        3. You Can Override the Default Excerpt Length by Adding Code Snippets to the functions.php
        4. You Can Customize the Read More Link by Adding Code Snippets to the functions.php
      9. You Can Add Pagination for Long Blog Rolls
        1. Once the Number of Posts Reaches a Certain Point You May Want to Paginate
        2. You Can Use the pagination_bar() Function Call to do the Work
    2. The Individual Blog Post Template
      1. Individual Blog Posts Use the single.php Template
      2. Most of the Work for the single.php Template is Already Done
        1. Copy the index.php Code to a New File and Save as single.php
        2. Change the_excerpt() Function Call Back to the_content() Function Call
        3. Remove the pagination_bar() Function Call from This Template
        4. Add Next/Previous Post Links for Easy Blog Navigation
          1. Use the previous_post_link() Function Call to Link to the Previous Post
          2. Use the next_post_link() Function Call to Link to the Next Post
        5. You Can Make Other HTML Structural Changes or Add Other Pieces of Metadata in this Template if Necessary
      3. Comments Can be Added to Your single.php Template
        1. Use the comments_template() Function Call to Display The Comments and Comment Form
        2. This Function Will Display the Default WordPress Commenting Template
        3. You Can Create a Custom Template for Comments Using the comments.php Template
    3. Other Common Blog Templates
      1. You Can Create Many of the Additional Blog Templates by First Copying the single.php Template
      2. Then Save As Any One of the Following Templates
        1. The Author Archives Template author.php
        2. The Date Archives Templates of date.php or archive.php
        3. The Category Template category.php
        4. The Tags Template tags.php
      3. Once Saved You Can Customize the Template to Your Needs

What Former Students Have Said

Handouts would have been helpful.

Amy B. - August, 2015

Thank you for your patience with me!!

Olga O. - November, 2014

A presentation would be very useful. Slower pace with entering code.

Paul R. - November, 2014