Wordpress Theme And Plugin Development

Tags: WordPress

Everything you need to become a hirable WordPress Developer building custom themes and plugins

Last updated 2022-01-10 | 4.4

- PHP for WordPress - The Loop
- Conditionals
- Hooks and More!
- How to Work with Child and Starter Themes Like Pro
- The Ins and Outs of the Template Hierarchy - Always Know What File to Customize

What you'll learn

PHP for WordPress - The Loop
Conditionals
Hooks and More!
How to Work with Child and Starter Themes Like Pro
The Ins and Outs of the Template Hierarchy - Always Know What File to Customize
How To Enqueue and Work with JavaScript and CSS in Themes
The Complete List of Template Tags To Use When Customizing and Extending Themes
A Deep Understanding of How to Use Action and Filter Hooks to Programmatically Control WordPress
A Solid Starter Template For Building Your Own WordPress Plugins
Common Practices and Techniques for Building Custom WordPress Plugins

* Requirements

* Basic HTML - Know how to build a simple HTML page and work with HTML forms.
* Basic CSS - Know how to responsively style HTML pages with CSS.
* Know how to work with Posts
* Pages and Custom Content in the WordPress admin area

Description

WordPress is the leading Content Management System on the market, powering a large percentage of the Web.  The need for WordPress Developers who can build and customize themes and plugins is ever growing.  Learn from one of the most recognized educators in the WordPress world, Zac Gordon, who has taught thousands of people now employed as WordPress Developers.

If you want to learn everything from customizing existing themes, building custom themes or starting to build plugins, this course is for you.  You will learn in depth how WordPress works under the hood, from template files and tags to hooks and internal APIs.  If you are looking to build bigger and more custom projects with WordPress or just get a good job with a great company building WordPress projects, then this course is for you.  Make sure though you can already build and style a basic web page with HTML and CSS as we assume you already know this and focus more on learning PHP.

When you learn the skills this course contains you will feel incredibly empowered to build almost anything you can imagine with WordPress.  You should also feel confident working professionally in the field as a WordPress Developer.  You will have built a theme and plugin along with the course as well as a theme and plugin of your own.  Follow in the path of thousands of others of Zac's students who learned WordPress Development and went on to do great work in the field.

Who this course is for:

  • Anyone who wants to learn how to build WordPress Themes
  • Anyone who wants to learn how to build WordPress Plugins
  • Anyone with basic HTML and CSS skills who wants to start customizing WordPress Themes
  • Developers who want to learn WordPress Development in more depth
  • Anyone looking to get a job or career in WordPress Development

Course content

7 sections • 183 lectures

Course Introduction Preview 01:59

Welcome!  In this first lesson we go over what we will learn in this course.

This course does not teach, but does use HTML and CSS, so we recommend you learn that first.

Overall the course covers the following topics:

  1. How to setup your local environment
  2. How to setup you hosting environment
  3. PHP for WordPress (The Loop, Conditionals, Tags, Hooks, etc)
  4. How to work with Child Themes and Starter Themes
  5. The Template Hierarchy and Template Tags
  6. Action and Filter Hooks
  7. How to Start Building Plugins
  8. Internal WordPress REST APIs

Throughout the course you will follow along with me as I build a theme and plugin and have the opportunity to build your own theme and plugin as well :)

Next up we'll look at how to setup our local WordPress environment so we can run WordPress on our computer.

Downloading and Using the Course Example Files Preview 00:30

Setting Up WordPress Locally Preview 01:00

Local WordPress Development refers to running WordPress on your computer and editing the files locally, on your computer, rather than using a hosted version of WordPress to develop with.

We look at a few different options for locally running WordPress on our computers:

  • DesktopServer from ServerPress
  • Local from Flywheel

Setting Up Locally

DesktopServer from ServerPress Preview 05:16

In this lesson we look at how to run WordPress locally using DesktopServer from ServerPress.

Local from Flywheel Preview 05:53

In this lesson we look at how to run WordPress locally using Local from Flywheel.

Editing WordPress Files Locally Preview 04:16

In this lesson we look at how to find the WordPress files that you will need to edit when you work with Desktop and Local.

Setting Up Locally

Introduction to Staging Preview 10:34

Pulling from Production to Staging to Local Preview 10:18

Pushing from Local to Staging to Production Preview 09:14

PHP for WordPress Introduction Preview 00:50

In this lesson we introduce this section on PHP for WordPress and go over what we will learn in the coming lessons:

  • Explain what PHP is and how it works
  • Write some PHP and learning the basics of the language
  • Introduce important WordPress specific PHP things that are important to know about, like the Loop, Template Tags, and Hooks

Next up we answer the question, "What is PHP?"

What is PHP? Preview 01:38

In this lesson we learn the PHP stands for "PHP: Hypertext Preprocessor" and runs before the HTML for a web page is generated.  PHP runs a lot in WordPress and can be used outside of WordPress as well to build sites and applications.

PHP Review:

  • PHP is a programming language
  • It runs on the server before HTML is sent to the browser
  • PHP is used quite a lot in WordPress itself and in WordPress Development
  • PHP can also be used outside of WordPress in other applications and web sites

Next up we practice writing some PHP.

What is PHP?

Writing Some Basic PHP Preview 04:59

In this lesson we start to write some basic PHP.

Covered in this lesson:

  • Opening an index.php file
  • Writing a variable
  • Echoing a variable
  • Echoing a string of text
  • Concatenating or combining variables and strings

Next up we learn some more PHP Programming Basics.

PHP Programming Basics Preview 04:00

In text lesson we outline some of the basics of working with PHP that are important for us to know going forward.  Read through and absorb what you can and in the next lesson we will look at putting some of this into practice.

PRACTICE - PHP Basics Preview 06:44

In this lesson we work on the following practice exercise:

  1. Activate theme 1.4 PHP Basics (Starter)
  2. Create an array of post titles
  3. Loop through the array of posts
  4. Inside of the Loop, call a display_title() function and pass it the title as a parameter
  5. Have the display_title() function echo the title in an <h3> tag

Try practicing this on your own before checking out the completed solution and the walk through in the video.

WordPress PHP Coding Standards Preview 05:56

In this lesson we learn about the WordPress Coding Standards.  

These are guidelines and suggestions for how to write and format your PHP when working with WordPress.

You can access the WordPress PHP Coding Standards here: https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/

The WordPress Coding Standards contain information around the following topics:

  • Single and Double Quotes
  • Indentation
  • Brace Style
  • Use elseif, not else if
  • Regular Expressions
  • No Shorthand PHP Tags
  • Remove Trailing Spaces
  • Space Usage
  • Formatting SQL statements
  • Database Queries
  • Naming Conventions
  • Self-Explanatory Flag Values for Function Arguments
  • Interpolation for Naming Dynamic Hooks
  • Ternary Operator
  • Yoda Conditions
  • Clever Code
  • Error Control Operator @
  • Don’t extract()

Not all of these may make sense to you at this point so try taking a read through these now and check back on them again at different points in the course.


Different Types of PHP Files in WordPress Preview 08:23

In general you will find three general types of PHP files in WordPress:

  1. WordPress Core Files - These control how WordPress works, not edited, but interesting and possibly helpful to read through or study.
  2. WordPress Theme Files - These control how themes work and display content.  When you are building or customizing a child theme you will definitely edit these files.
  3. WordPress Plugin Files - These are used when building plugins.  If you are writing your own plugin or extending another plugin you will edit these files, but you would not generally directly edit the code of another plugin.
  4. Include Files - Small PHP files that are included in larger files appear in Core, Theme and Plugin files.  You will likely come across and write them yourself.

The Loop Preview 04:23

The Loop is a combination of a conditional statement and loop that intelligently gathers and prepares post or page content to display.

It consists of the following:

  1. A PHP If Statement
  2. A PHP While Loop
  3. A special WordPress function call to get the correct post or page (or custom post etc)

A basic loop looks like this:

```

    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

      <h2><?php the_title(); ?></h2>
      <?php the_content(); ?>

    <?php endwhile; else: ?>

      <h2><?php esc_html_e( '404 Error', 'phpforwp' ); ?></h2>
      <p><?php esc_html_e( 'Sorry, content not found.', 'phpforwp' ); ?></p>

    <?php endif; ?>

```

Notice that since the PHP code is inside various self contained PHP blocks, it is also possible to use HTML inside of the Loop.

It is also possible though to have a pure PHP loop without any HTML being included between PHP blocks:

```

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); 

     the_title( ’<h1>', ’</h1>' ); 

     the_content();

endwhile; else: 

     _e( 'Sorry, no pages matched your criteria.', 'textdomain' ); 

endif; ?>

```

It is also possible to customize the Loop, which we will look at late in the course.

What is the Loop?

PRACTICE - The Loop Preview 07:30

Now it's time to practice using PHP Loop on your own:

  1. Activate theme 1.8 – The Loop (Starter) 
  2. Open index.php
  3. Code out The Loop
  4. Use the_title and the_content to display the content
  5. Display a 404 message using _e() if no content available
  6. Open a page or post from WP Admin to test

Try tackling this on your own then follow along with me as I show you the approach I took.

Template Tags Preview 02:52

Template tags are special functions that allow us to easily get information and content from WordPress.

Some popular template tags include:

  • get_header()
  • get_footer()
  • get_sidebar()
  • get_template_part()
  • wp_login_form()
  • bloginfo()
  • the_title()
  • get_the_title()
  • the_content()
  • the_author()
  • the_category()
  • the_tags()
  • comment_author()
  • the_post_thumbnail()
  • the_permalink()
  • edit_post_link()
  • site_url()
  • wp_nav_menu()

PRACTICE - Template Tags Preview 11:46

Now that we've learned about template tags, it's time for you to tackle some practice on your own:

  1. Activate theme 1.10 – Template Tags (Starter) 
  2. Open index.php
  3. Add template tags inside The Loop
  4. Add template tags outside The Loop
  5. See how many different template tags you can get working!

After you take a stab on your own, you can follow along with my solution :)

WordPress Conditionals Preview 01:42

Conditional Tags are WordPress functions that return true when certain conditions are met.

Some common conditional tags include:

  • is_front_page()
  • is_home()
  • is_admin()
  • is_single()
  • is_single( 'slug' )
  • is_single( [ 'slug-1', 'slug-2', 'slug-3' ] )
  • is_singular()
  • get_post_type()
  • has_excerpt()
  • is_page()
  • is_page( 'slug' )
  • is_page( [ 'slug-1', 'slug-2', 'slug-3' ] )
  • is_page_template( 'custom.php' )
  • comments_open()
  • is_category()
  • is_tag()
  • is_archive()
  • in_the_loop()

PRACTICE - Conditional Tags Preview 12:27

Now that you've learned about Conditional Tags, let's try practicing writing some:

  1. Activate theme 1.12 – Conditional Tags (Starter) 
  2. Open index.php
  3. Try adding conditional tags
  4. Open page from admin or visit site.dev/category site.dev/tag url directly
  5. Might need && || !

WordPress Hooks Preview 06:28

Hooks allow you to add custom code into existing software.

Two types of hooks exist in WordPress:

  1. Action Hooks let you run your own code when certain events take place in the WordPress run cycle.
  2. Filter Hooks let you modify how content is displayed on a page or saved to the database.

Here is an example of an Action Hook in use:

```

<?php 

function my_theme_styles() { 

     wp_enqueue_style( 'main-css', get_stylesheet_uri() );

}

add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

?> 

```

Here is an example of a Filter Hook in use:

```

<?php 

function my_read_more_link( $excerpt ) { 

     return $excerpt . '<a href="' . get_permalink() . '">Read more</a>'; 

add_filter( 'get_the_excerpt', 'my_read_more_link', 10 );

?> 

```


Intro to Hooks Quiz

PRACTICE - WordPress Hooks Preview 11:35

Now it's time to practice writing some hooks on your own. 

Try the following:

  1. Activate 1.14 – WordPress Hooks (Starter)
  2. Open the functions.php
  3. Try enqueueing the theme CSS via an Action Hook
  4. Try adding a Read More link to the_excerpt() with a filter



PHP for WordPress Review Preview 00:36

Some important points for review:

  • PHP is a server side programming language.
  • Many Core, Plugin and Theme
    files in WordPress are PHP.
  • Some basic PHP is required for WordPress Development.
  • WordPress provides The Loop, Template Tags and Conditionals to make writing PHP easier.
  • Action and Filter Hooks let us run our own code and modify data in WordPress programmatically.

Chlid Themes v Starter Themes Preview 01:58

A Child Theme allows you to override another theme (parent theme) without making direct changes that are lost during updates.

A Starter Theme includes helpful files and functions for building themes from scratch.  You usually edit starter themes directly, not using child themes.

Here is when to use each:

  • Child Theme - Customizing an existing  theme
  • Starter Theme - Building sites from scratch

Child and Starter Theme Quiz

Child Theme Basics Preview 03:42

Child Theme

  1. Reference to parent theme in style.css file
  2. Include parent style in functions.php file
  3. Copies of any templates from Parent Theme you want to modify

Parent Theme

  1. Keeps all original files unedited
  2. Before loading a file, WordPress looks to see if exists in Child Theme
  3. Can be updated without affecting code in Child Theme

DEMO - Child Theme Preview 05:26

In this lesson we take a look at a child theme in action.

PRACTICE - Child Themes Preview 02:44

Now it is time for you to practice making a child theme:

  1. Pick a WordPress theme
  2. Create a Child Theme for it
  3. Modify the CSS and one of the templates
  4. You don’t need to make it look better, just get it working!
  5. Demo and Practice Child Theme files 


Starter Theme Basics Preview 09:59

Starter Theme Basics:

  1. Include common theme template files
  2. No CSS styles (but some include Bootstrap / Foundation)
  3. Extra functionality in functions.php
  4. Extra hooks in template files
  5. Follow modular file architecture
  6. Some include workflow tools
  7. Usually edited directly, not via child themes

DEMO - Underscore Starter Theme Preview 06:53

PRACTICE - Starter Themes Preview 04:15

In this lesson I encourage you to go practice working with a starter theme on your own:

  1. Choose a starter theme (I recommend JointsWP)
  2. Install and Activate it
  3. Make a CSS change
  4. Make a change to one of the templates
  5. WARNING: Not all starter themes are created equal

Child and Starter Themes Review Preview 02:13

Child Theme Review:

  • When customizing a theme use a Child Theme
  • When starting from scratch use a Starter Theme
  • Also possible to start with no child theme or starter theme!

Child and Starter Theme Quiz

An Introduction to the Template Hierarchy Preview 03:03

Setting up the Theme Content and Files Preview 09:15

Working with the style.css file Preview 06:11

Working with the functions.php file Preview 17:19

Working with the index.php template Preview 02:29

Working with Headers in WordPress Preview 06:57

Working with Footers in WordPress Preview 03:31

Adding Menus and body_class Preview 12:34

Adding Markup to a Theme - Part 1 Preview 08:48

Adding Markup to a Theme - Part 2 Preview 05:39

Adding Markup to a Theme - Part 3 Preview 00:49

Working with Sidebars in WordPress Preview 03:15

Adding Widget Areas in WordPress Preview 12:53

Working with the Loop Preview 07:43

Creating Content Includes Preview 05:15

Working with the singular.php template Preview 05:25

Working with the single.php template Preview 06:07

Adding a single-post.php template Preview 01:58

Working with the comments.php template Preview 07:41

Working with Post Formats in WordPress Preview 13:21

The home.php for the Blog Homepage Preview 12:39

Working with archive.php and Archives in WordPress Preview 03:36

Working with the author.php template Preview 06:08

Working with author-id.php and author-nicename.php templates Preview 01:36

Working with Category Archive Templates Preview 08:36

Working with Date Archive Templates Preview 04:57

Working with Media Attachment Templates Preview 07:34

Mime Type Templates Further Explained Preview 08:26

Working with Page Templates Preview 08:08

Working with the front-page.php Template Preview 08:33

Working with Custom Templates Preview 08:05

Adding a 404.php template Preview 05:34

Working with Search Templates Preview 09:56

Working with Custom Post Type Archives Preview 10:40

Working with Custom Post Type Single Pages - Part 1 Preview 05:56

Working with Custom Post Type Single Pages - Part 2 Preview 03:57

Working with Custom Taxonomy Archives - Part 1 Preview 04:16

Working with Custom Taxonomy Archives - Part 2 Preview 08:02

Working with Multiple CSS Files Preview 06:27

Including JavaScript in Your Themes Preview 10:16

Working with JavaScript Dependencies (like jQuery) Preview 07:20

Template Hierarchy Review Preview 03:44

An Introduction to Template Tags Preview 04:45

General Template Tags - Introduction Preview 01:26

General Tags - Include Tags Preview 06:12

General Tags - Login Tags Preview 13:08

General Tags - bloginfo Preview 05:06

General Tags - Archive Tags - Part 1 Preview 07:59

General Tags - Archive Tags - Part 2 Preview 07:45

General Tags - Calendar Tags Preview 03:34

General Tags - Misc Tags Preview 03:08

PRACTICE - General Template Tags - Part 1 Preview 03:15

PRACTICE - General Template Tags - Part 2 Preview 10:25

Navigation Tags Preview 08:33

Navigation Tags - CSS Classes Preview 04:19

Navigation Tags - Walker Class Preview 05:20

PRACTICE - Navigation Tags - Part 1 Preview 01:11

PRACTICE - Navigation Tags - Part 2 Preview 03:59

Post Tags Preview 04:08

Post Tags - Class Tags Preview 03:48

Post Tags - Common Tags - Part 1 Preview 11:21

Post Tags - Common Tags - Part 2 Preview 07:26

Post Tags - Date Tags Preview 04:36

Post Tags - Attachment Tags Preview 05:05

Post Tags - Misc Tags Preview 14:40

Post Tags - get_ Tags Preview 03:33

PRACTICE - Post Tags - Part 1 Preview 03:00

PRACTICE - Post Tags - Part 2 Preview 02:37

Thumbnail Tags Preview 08:51

PRACTICE - Thumbnail Tags - Part 1 Preview 01:36

PRACTICE - Thumbnail Tags - Part 2 Preview 03:33

Link Tags Preview 06:18

PRACTICE - Link Tags - Part 1 Preview 01:34

PRACTICE - Link Tags - Part 2 Preview 02:24

Introduction to Comment Tags Preview 13:59

Common Comment Tags Preview 08:41

PRACTICE - Comment Tags - Part 1 Preview 02:22

PRACTICE - Comment Tags - Part 2 Preview 02:28

Author Tags Preview 07:24

PRACTICE - Author Tags - Part 1 Preview 02:09

PRACTICE - Author Tags - Part 2 Preview 03:25

Conditional Tags Preview 05:09

Sanitization, Escaping & Localization Preview 03:51

DEMO - Sanitization Tags Preview 03:36

DEMO - Escaping Tags Preview 05:13

DEMO - Localization Tags Preview 05:08

A Review of Template Tags Preview 01:01

An Introduction to Hooks in WordPress Preview 03:38

do_action add_action remove_action Preview 06:04

Action Hooks in WordPress Core Preview 08:37

The WordPress Action Runtime Lifecycle Preview 06:28

Exploring Action Hooks with wp_actions and wp_filter Preview 06:48

Exploring Action Hooks with R Debug Preview 02:55

Exploring Action Hooks with Debug Bar Plugins Preview 03:41

Exploring Action Hooks with Simply Show Hooks Plugin Preview 01:21

Exploring Action Hook DEMOs Preview 01:20

DEMO - WordPress Action Hook - do_action Preview 04:25

DEMO - WordPress Action Hook - enqueue_scripts Preview 03:11

DEMO - WordPress Action Hook - widget_init Preview 04:40

DEMO - WordPress Action Hook - loop_end() Preview 04:59

DEMO - WordPress Action Hook - template_redirect() Preview 04:34

DEMO - WordPress Action Hook - save_post() Preview 06:00

PRACTICE - WordPress Action Hooks - Part 1 Preview 01:24

PRACTICE - WordPress Action Hooks - Part 2 Preview 10:58

Filter Hooks in WordPress Preview 00:52

apply_filters(), add_filter(), remove_filter() Preview 06:22

apply_filter() in WordPress Core Preview 08:54

Exploring Filter Hooks with $wp_filter Preview 02:31

Exploring Filter Hooks with R Debug Preview 02:46

Exploring Filter Hooks with Debug Bar Plugin Preview 00:57

Exploring Filter Hooks with Simply Show Hooks Plugin Preview 02:06

Exploring Filter Hook DEMOs Preview 02:22

DEMO - WordPress Filter Hook - apply_filters Preview 04:23

DEMO - WordPress Filter Hook - the_title Preview 05:41

DEMO - WordPress Filter Hook - the_content Preview 06:13

DEMO - WordPress Filter Hook - excerpt_more Preview 04:14

DEMO - WordPress Filter Hook - body_class Preview 02:43

DEMO - WordPress Filter Hook - manage_posts_columns Preview 03:02

PRACTICE - WordPress Filter Hooks - Part 1 Preview 00:47

PRACTICE - WordPress Filter Hooks - Part 2 Preview 07:01

Hooks in WordPress Review Preview 01:13

Introduction to Plugin Development Preview 01:42

Setting Up the Files Preview 02:44

Plugin Header Preview 06:53

Settings Pages Preview 06:43

Settings Sub Pages Preview 06:44

Link to Settings Preview 03:03

Plugin File Paths Preview 05:58

Enqueuing CSS Preview 03:26

Enqueuing JS Preview 03:16

Enqueuing Conditionally Preview 04:32

PRACTICE - Setup - Part 1 Preview 02:47

PRACTICE - Setup - Part 2 Preview 02:43

The Options API Preview 09:56

Saving Array Options Preview 07:52

PRACTICE Options - Part 1 Preview 01:04

PRACTICE Options - Part 2 Preview 03:40

Settings API Preview 03:30

Settings Sections Preview 06:32

Settings Fields Preview 14:17

More Settings Fields Preview 12:01

Adding Fields to Existing Sections Preview 03:45

An Introduction to Plugins Review Preview 01:12