Professional WordPress Theme & Plugin Development

Learn how to create your own WordPress Themes & Plugins with code from Scratch, Create Amazing Dynamic WordPress Sites!

Created byJuan Pablo De la torre Valdez

Last updated 10/2019

English

English [Auto],

What you'll learn

Create a WordPress Theme with Twitter Bootstrap
Create 4 Different WordPress Themes
Convert 26 PSD files into WordPress Templates
Learn how to transform any PSD file into a WordPress Theme
Learn Good Practices in WordPress Theme Development
Learn some advanced Features like Custom fields and Custom Post Types
Understand WordPress Theme Development
Create Mobile First WordPress Themes
Learn how to Write Secure WordPress Code
Learn how to create Options Pages in WordPress

Course content

39 sections • 403 lectures • 34h 45m total length

What you're going to learn in this course & why learn how to code for WordPress!4:10
Let's see a quick intro to WordPress!
The first project - A website for a Gym7:11
This is going to be the first project, let's take a look!
Tour of the Second Theme - A Restaurant Theme8:02
Let's review the first final project!
Photoshop and Image Files for the Second Project3:55
In this video you will find the files for the first Theme
A Preview of the Third Theme5:06
Let´s take a look at the very first WordPress Theme that we´re gonna build in this course, hope you´re excited for this one!
Second Theme - Reviewing the Photoshop Files2:53
Are you excited for this course? let´s review the Photoshop Files for the first theme that we´re gonna build!
A Preview of the Third Theme5:47
The Second theme is a most advanced theme, in this video i´m gonna showcase some functionality that this theme has, so you can start developing this kind of websites when you finish this course!
Third Theme - Reviewing the Photoshop Files3:52
In this video let´s review the Photoshop Files for our Second Theme
A Preview of the Fourth Theme3:12
Here's the 3rd Project for this Course, it will be a Theme using Twitter Bootstrap

Your First PHP Code7:13
Let's create our first PHP File
Printing Values in PHP2:53
Let's see how you can print values with PHP
Creating Variables in PHP3:57
Creating variables in PHP is really easy, let's see some examples
Conditionals in PHP6:33
Let's make or code smarter with conditionals in PHP
Arrays in PHP6:14
An array is a collection of items, they're really powerful and really easy to create and manage
Associative Arrays in PHP and Concatenation3:48
An Associative Array is more readable than indexed array, let's see some examples!
var_dump, print_r and pre in PHP3:59
When working with arrays, var_dump, print_r and pre will be your best friends, let's see some examples
PHP in HTML or HTML in PHP?2:50
There're 2 styles when writing PHP Code, PHP in HTML or HTML in PHP
For loop in PHP4:26
Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, first the For Loop
The foreach loop3:44
Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, let's continue with the foreach loop
The While loop3:20
Loops are great and they're everywhere in PHP, let's review the 3 most populars for WordPress development, the last one but most popular in WordPress, the While loop
PHP Functions - Standard Functions6:37
Every language has a lot of built in functions, let's review some of them in PHP
PHP Functions - User-defined functions3:46
If a function doesn't exist, you can create your own, let's see how you can create a function in PHP and then Call It
PHP Functions - Functions with arguments3:17
Let's see how you can pass arguments into functions to make them more powerful
Template Tags in PHP and WordPress - Example3:59
In WordPress there're a lot of Template Tags, which are functions that print content, they look magical, but let's recreate a small example of what's behind this Template Tags
PHP Functions - Functions that return values6:42
Let's review the functions that return values
Math & Numbers in PHP + Some Examples12:53
Yeah, not everyone loves math, but let's see some examples of Math, Numbers and PHP!

What we're building in the next chapters7:11
Let's review what we're building in this chapters!
The Finished Code & Plugins0:57
Here you can download the finished code in case you run into any problem
Local by Flywheel2:43
Creating the WordPress site with Local by Flywheel4:18
Let's create our first project
Creating our theme5:17
In this video we're going to create our theme
The WordPress Template Hierarchy3:01
Let's review the WordPress Theme Hierarchy
The WordPress Loop and Template Tags4:33
Let's see how to write the WordPress Loop!

First steps with the header (DOWNLOAD FILES FROM HERE)5:18
Build the header and footer files for a WordPress theme. Load styles and assets using the template directory path and WordPress functions to prepare the navigation.
Adding the rest of the markup in the header2:12
Let's add the rest of the HTML!
How to create a new menu in WordPress6:43
Let's see how to add a navigation menu!
How to display a menu in WordPress5:27
Second step is to render the menu, let's see how!
Adding a CSS Stylesheet5:49
Let's add the CSS file to add our styles!
Adding Google Fonts into our theme3:02
Learn how to add Google fonts to a WordPress theme by selecting free fonts, embedding the font link, configuring weights (400, 700, 900), and applying fonts in the theme styles.
How to add the main Stylesheet4:42
Learn to add the main stylesheet for a WordPress theme and plugin, enqueue assets in the correct order, load normalize and Google Fonts, and implement CSS custom properties.
Adding the main CSS tags and selectors7:22
Define the main css tags and selectors for a professional WordPress theme, using box-sizing, resets for anchors and lists, a max-width container, rem-based typography, and a primary orange color.
Adding some CSS to style the Header6:53
Style the WordPress header with a dark gray background, add padding, and align the logo left and navigation right using flexbox and responsive media queries.
Adding the CSS for the main nav6:09
Add css for the main menu with a flex layout. Highlight the current page item with a bottom border in the primary color and enable a mobile menu plugin.
Working with the Footer4:30
Adding the CSS for the Footer8:01
Add css to style the footer menu with left and right content, a top border, and a flex layout, plus a 768px media query for responsive tweaks.
Creating a responsive navigation9:12
Create a mobile version of the WordPress theme navigation by enqueueing scripts, integrating the NAB slick library, and building a responsive menu with custom JavaScript.
CSS for the Responsive Nav6:27

The Page Template7:08
Build the page template with a main tag, a centered container, and utilities, then enable and render the featured image with checks for thumbnails.
Adding some Image Sizes6:24
Finishing the page template5:34
Finish WordPress page templates using reusable utilities, text alignment principles, and feature image classes to control layout, spacing, and dynamic content in the WordPress theme.

Adding a Second Page Template3:13
CSS for the Main Content and Sidebar3:30
How to create a Widget Zone3:44
Register and configure widget areas in WordPress by creating a widget zone with a unique name and ID, then assign widgets in the admin to render on the front end.
Adding the sidebar3:20
Learn to add a dynamic sidebar in a WordPress theme, display widgets conditionally with is_active_sidebar, and organize the sidebar into a reusable template file.
Refactoring the Code for the Pages3:11
Refactor pages by creating reusable templates in a custom template folder, using get template to load template parts, and centralizing the page loop for one-file changes across multiple pages.

Post Types in WordPress1:45
Learn how WordPress uses built-in post types like posts, pages, and attachments, and how custom post types expand content organization with templates and queries.
Adding the Plugin9:00
Create a custom post type to organize posts, pages, and classes within a WordPress plugin. Configure plugin files, naming, text domain, security checks, and admin labels for clean, organized management.
Installing Advanced Custom fields6:25
Adding the Classes3:11
Building a Queries file5:04
Introducing WP_Query to create custom queries from the database5:14
Explore how to query custom post types with WP_Query, build an arguments array, and loop through results to display titles using template tags while resetting post data.
Displaying the results from the WP_Query3:02
Learn to display the results from the WP_Query by looping through posts, generating gradient cards with featured images, titles, and custom fields, and creating links to class templates.
Displaying the Rest of the Content4:14
First steps with the CSS7:40
Finishing the CSS for the classes5:47
Fine-tune the CSS for the classes by adjusting display, layout, typography, and color with media queries and custom properties; create a reusable class template and a class details page design.
Building the Single Class Template3:04
Create a new single template for a custom post type to display different classes, using a file named single-{post_type}, and load header, content, and footer.
Finishing the single classes template4:44
Develop the single classes template by integrating a sidebar, displaying class content with conditional code using get boss type, and styling date, time, and centered content for fitness classes.

Building a Plugin for the Widgets7:55
Adding WP_Query into our Widget4:05
Explore how to add WP_Query into a WordPress widget to retrieve and display class posts, customize with posts per page, and test the widget output.
Displaying the information3:26
Display and format WordPress course content by registering image sizes, rendering thumbnails, and showing class times and dates with YouTube embeds using flex patterns.
CSS for the widget6:56
Advanced functionality in our widget5:07
Finishing our widget3:31
Develop and display a WordPress widget by binding database values to front-end elements, such as title and quantity, using instances, inputs, and saved data, and prepare for a gallery feature.

Disable Gutenberg3:24
Learn to build a WordPress site with a custom gallery template, configure the homepage, blog, contact us pages and menus, and disable Gutenberg for pages using a dedicated plugin.
Adding a Gallery Template3:08
Getting the images from the gallery7:01
Adding the Logic for the gallery2:20
Learn how to retrieve images of different sizes for a gallery, using a counter and a ternary operator to determine portrait or square sizes while looping through items.
Adding a Lightbox effect in our images7:01
Add a lightbox effect to WordPress images by integrating a lightbox script, wrapping images in anchors with data-lightbox attributes, and enabling the feature only on the reality template through PHP.
CSS for the gallery10:26
Explore CSS for the WordPress gallery, using grid layouts, media queries, and column rules to create responsive, well-spaced image grids and lightbox integration.

Creating the template2:34
Adding the blog entries5:24
Learn how to add blog entries in WordPress, assign categories such as basics, tips, and stretching exercises, add featured images, and optimize SEO for better filtering and publishing.
Displaying extra information in the front end8:37
CSS for the blog2:51
Working with the single page1:32
Explore building a single post page by reusing and customizing WordPress templates, copying base layouts, and managing content blocks to render posts with a specific outer page.

Requirements

A Code Editor (There´s a video where i'm gonna show 4 different free editors)
A Local Server (I´m gonna be using MAMP but LOCAL, WAMP or BITNAMI are free and work great!! )
26 PSD Files already Included (if you don't have Photoshop don't worry i'll be including all the files)
Images for this course already included + Content and Other materials to develop Amazing WordPress Themes

Description

Welcome to the only course on Udemy that teaches you how to build complete Websites, Themes & Plugins from scratch!

WordPress is great if you want to build Dynamic Websites that use HTML, CSS, PHP & JavaScript, do you have a few experiences with these technologies and you're looking for a course to build something from the real world? this course is for you!

Who this course is for:

Don't be afraid to code, i will guide you and help you in all the process :)
if you have basic HTML & CSS experience and you want to create dynamic sites, this course is for you!
Previous WordPress Theme Development experience isn´t required, i assume this is your first WordPress Theme
If you´re trying to Learn Custom Post Types, Custom Fields, Widgets API, create a REAL WORLD PROJECT this course is for YOU!
If you wan to create mobile first, CSS3 Compatible WordPress Theme this course is for you
If you learn best by building real world projects this course is for you, we're building 4 COMPLETE PROJECTS!

Professional WordPress Theme & Plugin Development

What you'll learn

Explore related topics

Course content

What we´re going to build in this course9 lectures • 44min

PHP: The Basics - Up And Running with PHP (If you know PHP you can skip this)17 lectures • 1hr 26min

Our First Project - Gym Website7 lectures • 28min

Gym Website - Developing the Header and Footer14 lectures • 1hr 22min

Gym Website - The Pages Template3 lectures • 19min

Gym Website - Building the About Us Page5 lectures • 17min

Gym Website - Building a Plugin for the Classes12 lectures • 59min

Gym Website - The Widgets API in depth6 lectures • 31min

Gym Website - Building the Gallery6 lectures • 33min

Gym Website - Building the Blog5 lectures • 21min

Requirements

Description

Who this course is for: