WordPress Training

- Ronak Ganatra (Sr. WordPress Developer)

Agenda
● Build a Simple WordPress website with Readymade theme and plugins so that you can get overview about
plugins,themes, shortcode (Ex. Contact form 7)
● WordPress Templates overview - Page, Post/Post details, Post list, Archive page, Author archive page, Category
Archive page, tag archive page.
● WordPress Theme overview & WordPress Plugin overview
● WordPress Database tables
● WordPress Theme File Structure
● WordPress Theme development
● Shortcodes
● Custom fields
● Converting HTML WordPress theme to WordPress theme.
● Child Theme
● Plugin Development
● WordPress Multisite
● Queries - WP- Query, meta query, date query and etc.
● WordPress functions like get_the_title and etc.
● WordPress custom post type & taxonomies & Default post types and taxonomies in WordPress.
Continue..

● FSE
● Patterns
● FSE Theme creation
● Gutenberg
● Contribution
● Working with MD Prime theme ( Using class based method )
● Working with MD Prime Plugin ( Using class based method )
WordPress Theme & Plugin Overview

● What is Theme and what we can do with it.

● What is Plugins in WordPress and what we can do with it.
● Theme: WordPress Themes are files that work together to create the design and
functionality of a WordPress site. Each Theme may be different, offering many
choices for site owners to instantly change their website look.
 Themes

■ To create a unique look for your WordPress site.

■ To take advantage of templates, template tags, and the WordPress Loop to generate different website
results and looks.
■ To provide alternative templates for specific site features, such as category pages and search result
pages.
■ To quickly switch between two site layouts, or to take advantage of a Theme or style switcher to allow
site owners to change the look of your site.

A WordPress Theme has many benefits, too.

■ It separates the presentation styles and template files from the system files so the site will upgrade
without drastic changes to the visual presentation of the site.
■ It allows for customization of the site functionality unique to that Theme.
■ It allows for quick changes of the visual design and layout of a WordPress site.
■ It removes the need for a typical WordPress site owner to have to learn CSS, HTML, and PHP in order
to have a great-looking website.
Plugins

If there’s one cardinal rule in WordPress development, it’s this: Don’t touch WordPress core. This means that
you don’t edit core WordPress files to add functionality to your site. This is because WordPress overwrites core
files with each update. Any functionality you want to add or modify should be done using plugins.

WordPress plugins can be as simple or as complicated as you need them to be, depending on what you want
to do. The simplest plugin is a single PHP file. The Hello Dolly plugin is an example of such a plugin. The plugin
PHP file just needs a Plugin Header, a couple of PHP functions, and some hooks to attach your functions to.

Plugins allow you to greatly extend the functionality of WordPress without touching WordPress core itself.
Build a Simple WordPress website with Readymade theme and plugins so that
you can get overview about plugins,themes, shortcode (Ex. Contact form 7)

- Live Example
WordPress Templates overview (Live Demo)

- Page
- Post/Post detail
- Posts page (posts list)
- Category Archive
- Tags Archive
- Author page

REF LINK: https://developer.wordpress.org/themes/basics/template-hierarchy/

WordPress database tables (self study)

● Does WordPress creates database tables or We have to do it?

● Where is database connection file is situated ?
● How much tables are in WordPress ?
● Which are the tables ?
● What is stored in WordPress tables ?
● Where is post data stored ? on which table ?
● Where is page data stored ? on which table ?
● Where is category data stored ? on which table ?
● Where is tag data stored ? on which table ?
● Where is menus are storing ? on which table ?
● How Posts are linked to authors ?

https://codex.wordpress.org/Database_Description
Theme File Structure

Live File traversing using Twenty Twenty one theme

Template structure:
https://i0.wp.com/developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png?ssl=1
Exercise / Practice

1. Different 2 footers , Different 2 headers , page header footer (Layout 1), Post - header footer
(layout 2)
2. Add 2 styles , 2 javascript ( Javascript in footer and styles in header)
3. Menu Register (3 menu 1 Header, 2 Footer, 3 Custom), Menu Display in Footer/header
4. Register Sidebar - Custom sidebar
5. Theme customizer settings explorer ( Add some settings for ex: to change color, Add Footer logo,
Add footer Copyright text and etc)
6. Learn about Child themes
Theme Development from scratch
● Go to Wp-content / themes
● Ref: https://codex.wordpress.org/Theme_Development
● Theme Stylesheet
/*
Theme Name: ABC
Theme URI: http://abc.com
Author: WordPress Trainees
Author URI: http://wordpress.org/
Description: This is theme description.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar,
flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats,
rtl-language-support, sticky-post, translation-ready
Text Domain: cstm-domain

This theme, like WordPress, is licensed under the GPL.

Theme Development ( contd… )

- Functions - File functions.php

- Template Files List
- header.php – contains the code for the header section of the theme.
- index.php – contains the code for the Main Area and will specify where the other files will be
included. This is the main file of the theme.
- sidebar.php – contains the information about the sidebar.
- footer.php – handles the footer section.
- style.css – responsible for the styling of your theme.
- Ref: https://blog.templatetoaster.com/create-wordpress-theme-scratch/
Exercise / Self study

● Theme image - How to set it

Demo - working with Staging database in local

Change hosts in config file conditionally.

Demo - Hooks ( Actions & Filters )

● do_action
● add_action
● apply_filters
● add_filter
● Arguments
● Priority
 Hooks ( Actions & Filters )

Hooks are a way for one piece of code to interact/modify another piece of code at specific, pre-defined spots. They
make up the foundation for how plugins and themes interact with WordPress Core, but they’re also used extensively by
Core itself.

There are two types of hooks: Actions and Filters. To use either, you need to write a custom function known as a
Callback, and then register it with a WordPress hook for a specific action or filter.

Actions allow you to add data or change how WordPress operates. Actions will run at a specific point in the execution of
WordPress Core, plugins, and themes. Callback functions for Actions can perform some kind of a task, like echoing
output to the user or inserting something into the database. Callback functions for an Action do not return anything back
to the calling Action hook.

Filters give you the ability to change data during the execution of WordPress Core, plugins, and themes. Callback
functions for Filters will accept a variable, modify it, and return it. They are meant to work in an isolated manner, and
should never have side effects such as affecting global variables and output. Filters expect to have something returned
back to them.

WordPress provides many hooks that you can use, but you can also create your own so that other developers can
extend and modify your plugin or theme.
Admin menu-submenu pages/Options pages
add_menu_page( string $page_title, string $menu_title, string $capability,
string $menu_slug, callable $function = '', string $icon_url =
'', int $position = null )

https://developer.wordpress.org/reference/functions/add_menu_page/

add_submenu_page( string $parent_slug, string $page_title, string

$menu_title, string $capability, string $menu_slug, callable
$function = '', int $position = null )

https://developer.wordpress.org/reference/functions/add_submenu_page/

https://codex.wordpress.org/Creating_Options_Pages
Child Theme ( Self Study)

- https://developer.wordpress.org/themes/advanced-topics/child-themes/
Demo - Creating theme from scratch

- Pick one html Theme

- Differentiate Header, footer
- Make Header, Footer Dynamic
- Register Styles,Scripts
- Integrate pages
Theme Customizer

https://codex.wordpress.org/Theme_Customization_API

https://developer.wordpress.org/themes/customize-api/
Exercise / Practice

● Complete remaining points from excercise -1

● Create one child theme
● Theme Customizer Add below settings:
- Main Panel => Sections (Footer, Header, other) => Settings & controls
- Header/Body Background Color (Color Picker)
- Checkbox - Hide Header logo (Default unchecked)
- Footer Logo (Image )
- Copyright Text
Shortcode

https://developer.wordpress.org/reference/functions/add_shortcode/

https://developer.wordpress.org/reference/functions/do_shortcode/

https://codex.wordpress.org/Shortcode_API

Ex: Slider shortcode

Custom post type, taxonomies, meta boxes

https://developer.wordpress.org/reference/functions/register_post_type/

https://wordpress.org/support/article/post-types

https://developer.wordpress.org/reference/functions/register_taxonomy/

(Hierarchical, Non Hierarchical, Taxonomy-archive pages)

https://wordpress.org/support/article/custom-fields/

https://developer.wordpress.org/plugins/metadata/custom-meta-boxes/

https://developer.wordpress.org/reference/functions/add_meta_box/

Update_post_meta, add_post_meta, get_post_meta ( ACF as well )

Page templates

Archive pages, Templates ,

https://developer.wordpress.org/themes/basics/template-hierarchy/

https://wphierarchy.com/
WP Query, Meta Query, get/set_options

Different functions get_posts, user_meta, comment_meta, get_users()

https://developer.wordpress.org/reference/classes/wp_query/

https://developer.wordpress.org/reference/functions/get_option/

WP Query Different parameters

WordPress Different functions

● get_the_title(), the_title(), get_the_date(), the_date(), get_the_ID(), the_ID() and etc.

● get_posts()
● Getting image details , image source , image url and etc.
● Get_option, delete_option
WordPress Plugin Development & Plugin Extend

https://developer.wordpress.org/plugins/intro/

https://wppb.me/
REST API

https://developer.wordpress.org/rest-api/

Default API and Custom API

WordPress CLI

https://wp-cli.org/

https://make.wordpress.org/cli/handbook/guides/installing/
WordPress Multisite

https://wordpress.org/support/article/create-a-network/

Live Setup Demo

Plugins/Themes in multisite