WordPress Theme Dev Quick Reference

I wanted a document that would keep me from bouncing all over the WordPress Developer site. This list is set up in a basic order for which I, and possibly others, move through creating a theme. I used links instead of functions because there are often multiple parameters and approaches that I did not want to neglect. The WP dev pages are concise enough that clicking the links here still takes us right to what we need. The benefit is just keeping this page open and moving down the list as the theme build progresses. I have included brief notes that came from back when I took a great WP course by Luis Ramirez Jr (which I highly recommend). 

I might add a menu to the different topics at some point. I might not. The idea is this should flow through in, roughly, the order a theme would be developed. Still, for now, if a search is needed jsut use the control-F search.

If you have any questions, suggestions or anything, let me know.

Basic WordPress Info & Coding Standards

https://wordpress.org/

https://wordpress.org/about/requirements/

https://developer.wordpress.org/
The developer site is where WordPress documents the code inside the core. Aimed at developers to learn more about hooks and functions.

https://codex.wordpress.org/Theme_Development
The Codex is where WordPress documents it’s features and some code.

https://wordpress.com/read
WordPress.com access will allow wordpress.org sites to be visible when using Jetpack’s connection.

https://make.wordpress.org/core/handbook/best-practices/
It’s important that you prefix your functions, classes and variables so you can avoid any naming conflicts with other code from plugins and the WordPress core.
Separating the HTML from PHP can be a great way to organize your code.
https://codex.wordpress.org/Theme_Development

Theme Development section contains all useful info specific to creating custom themes.

https://automattic.com/

Automaticc is a company that does NOT own WordPress, but they do contribute heavily to the WordPress software itself and provides a hosting platform which is wordpress.com.

 

Exploring Environments and Text Editors



VS Code
https://code.visualstudio.com/

Local WP
https://localwp.com/
Local WP is a complete WP environment solution.

Composer
https://getcomposer.org/
A Dependency Manager for PHP
https://getcomposer.org/doc/articles/versions.md

XAMP
https://www.apachefriends.org/index.html 
XAMPP is a program that bundles programs together to create a functioning web server for web development on your computer.

Maria DB
https://mariadb.org/
  • MariaDB is a database that stores information about anything you want. WordPress is 100% compatible with MySQL and MariaDB. All code will be compatible with MariaDB and MySQL.
  • The database prefix is prepended to every database table WordPress generates. For example, if a table is named posts and the prefix is wp, then the new database name would be wp_posts.
WAMP
https://www.wampserver.com/en/

Alternatives to local web development environments are MAMP and WAMP. Both work 100% with WordPress.

 PHP Storm
https://www.jetbrains.com/phpstorm/

PHPStorm comes with various features that are useful for rapid web development.

 

PHP Refresher

https://www.php.net/

https://www.writephponline.com/

https://code.tutsplus.com/tutorials/object-oriented-php-for-beginners--net-12762

http://www.apache.org/
  • PHP arrays can be written without the array keyword. You can use square brackets. Be care though, this is not supported on older versions of PHP.
  • WordPress sometimes use object-oriented programming so be sure you’re comfortable with that before jumping into WordPress.
  • The PHP coding standards are not required to follow. They are more of a recommendation. Feel free to use what you like without worry.
https://httpd.apache.org
Apache’s HTTP Server will create a basic server that allows you to sent/receive requests.




Exploring WordPress & Configuring the wp-config.php File

https://codex.wordpress.org/Editing_wp-config.php
  • The wp-config.php file contains all your settings from database login details to debug settings and hashes.
  • You’re free to modify the wp-config.php file without having to worry about it being overwritten in future updates.
  • The wp-includes folder contains functions and classes used throughout WordPress. The wp-admin file handles everything on the admin side of WordPress.
  • The wp-content folder contains all content created by the user and also stores all plugins and themes.

 

File Headers

https://codex.wordpress.org/File_Header

  • The absolute minimum requirement for WordPress to recognize your theme officially is by creating 2 files named style.css and index.php along with a file header.
  • A file header is a block comment placed at the top of your files to let WordPress know more about your theme/plugin.

https://codex.wordpress.org/Function_Reference/the_author_meta

The information presented in a file header called meta-information. Meta-informat is formatted as name: value

 

Translations & Text Domain

https://www.w3.org/International/questions/qa-lang-why
  • WordPress provides a few functions for translating strings. If WordPress doesn’t find a translation, then WordPress will return the string as is.
  • A Text Domain is a unique ID for your translations.
https://developer.wordpress.org/themes/functionality/internationalization/
The process for translating a plugin/theme is called internationalization.

PHP: Gettext - Manual
WordPress utilizes the GetText PHP extension for translation strings.

Right-to-Left Language Support « WordPress Codex
Creating Right-to-Left (RTL) WordPress Sites - WPML
  • The dir attribute determines the direction text is displayed. Left-to-right is the default for most browsers.
  • The lang attribute will determine the language used for the site.
  • The meta charset determines  the character set that should be used for displaying the content of the site.
https://poedit.net/
https://wordpress.org/plugins/loco-translate/
  • Translating WordPress can be time consuming. It’s recommended you use a program like Po edit or Loco translate.
  • The pot file is template file translators can use as a start. The po file is the actual language file that will be compiled into mo file. The mo file is a server readable only file that contains all your translations.



Functions File & Action Hooks

https://developer.wordpress.org/themes/basics/theme-functions/
WordPress will search for a file called functions.php. This file is completely optional. You can add logic to do heavy lifting behind the scenes.

https://developer.wordpress.org/plugins/hooks/actions/
Action hooks allow you to hook into certain events. If an event occurs, then any functions that hook into the event will be triggered.

 

Loading Styles & Scripts with Enqueues + Avoiding Caching Issues

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

https://codex.wordpress.org/Function_Reference/wp_register_style

https://developer.wordpress.org/reference/functions/wp_enqueue_style/
  • It’s always important to register scripts/stylesheets before enqueueing them. Registering will let WordPress know about your files while enqueueing will instruct WordPress to lose the files.
  • Prefix your file handle names to avoid collision and naming conflicts with other plugins/themes.
  • Use the wp_head and wp_footer functions to instruct WordPress where to load your files.
  • It’s important that you never override WordPress’ default scripts such as jQuery.
  • Caching Issues: Caching is when the browser stores copies of your CSS, JS and image files for page reloads. This increases performance and saves bandwidth.
  • Caching is great for production, but not ideal for development. You would have to clear the cache every time a change was made to a file.
  • WordPress allows you to specify a version for a file to force the browser to load the latest version.
  • It’s good practice to create a constant to determine if a theme/plugin is in development mode.

 

Add Theme Support

https://developer.wordpress.org/reference/functions/add_theme_support/
You can use WordPress’ built-in features by calling the add_theme_support() function and pass in the feature you’d like to take advantage of.

 

Menu Support

https://codex.wordpress.org/Function_Reference/register_nav_menu
Once the menu feature is active, then you can register a menu using the register_nav_menu() function.

https://developer.wordpress.org/reference/functions/wp_nav_menu/
After a menu has been registered you can display it using the wp_nav_menu() function. If you have a menu with CSS classes for each item, then you’ll need to use a custom walker to output those classes.

 

Menu Walkers

https://codex.wordpress.org/Class_Reference/Walker

https://github.com/wp-bootstrap/wp-bootstrap-navwalker
  • Walkers are a general programming concept and not specific to WordPress. They’re a way to loop through a nested array no matter the depth.
  • WordPress provides a base walker class that can be built on top. Most areas in WordPress uses walkers to loop through a data structure.
  • The start element and end element will loop through each individual item.
  • The start level and end level functions will be called during the beginning and ending of the data structure.

 

Creating Header & Footer Areas

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

https://developer.wordpress.org/reference/functions/get_footer/
  • Use the get_header() and get_footer() functions to load the header and footer sections of your template respectively.
  • WordPress requires a certain naming convention for the header (header.php) and footer (footer.php) files.
  • If you have multiple header/footer files, then you can pass in an extension. WordPress

 

Body Class

https://developer.wordpress.org/reference/functions/body_class/
The body_class() function  will load additional classes to the <body> tag.

 

Creating Sidebar and Widget Areas

https://codex.wordpress.org/Function_Reference/register_sidebar
  • Sidebars can be placed inside their own template files called sidebar.php. You can grab a sidebar using the function get_sidebar().
  • Sidebars also follow the same naming conventions as the header and footer.
  • It’s important that you keep your HTML/CSS for the widgets minimal as it can be hard to maintain with WordPress.
  • Make sure to check if a sidebar is active using the is_active_sidebar() function.

 

Formatting the Search Form

https://developer.wordpress.org/reference/functions/get_search_form/
  • WordPress will search for a file called searchform.php and use it as a template for the search form displayed inside the search widget.
  • If the template is not found WordPress will automatically call the function get_search_form() which will generate a search form.
  • It’s important that you set the method to GET and that the input field has a name of s.

 

The Loop

https://developer.wordpress.org/themes/basics/the-loop/
The Loop is a way to allow developers to loop through an array of posts. The number posts in an array varies from page to page.

https://developer.wordpress.org/reference/classes/wp_query/
The WP_Query class allows you to query the database for posts. The query is automatically created and executed for you. It’s used in many themes and plugins multiple times. It’s important that you make sure it’s perfect for the job.

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

https://developer.wordpress.org/reference/classes/WP_Post/
  • There are 2 kinds of loops. Main loops and secondary loops. Main loops are generated by WordPress. Secondary loops are created by you.
  • It’s important that you manage your loops carefully. If you have to use the loop multiple times, then you should make sure to reset it after you’re finished.

https://developer.wordpress.org/reference/functions/wp_reset_postdata/
After looping through a separate query, this function restores the $post global to the current post in the main query.

https://developer.wordpress.org/reference/functions/rewind_posts/
If you use the main loop multiple times, then you need to reset the loop every time using the rewind_posts() function.

https://www.php.net/manual/en/function.function-exists.php
If you plan on integrating other plugins then it’s always good to check if their activated. One way of checking is by using the function_exists() function.

 

Template Parts

https://developer.wordpress.org/reference/functions/get_template_part/
  • Template parts are a way to split up your template that can be reusable.
  • The get_template_part() function has 2 parameters. The first parameter is the generic template and the second is the specialized template.
  • The generic template can be considered the fallback template if the specialized template can’t be found.

 

Template Tags

https://developer.wordpress.org/themes/references/list-of-template-tags/
  • Template tags are functions that will output or process data. This helps separate logic and design in your templates.
  • Most template tags are capable of detecting if they’re inside a loop and will use the current post in the iteration to grab the data.
  • There are 2 versions of template tags. The "get_" version will return a value while the non get version will echo a value.
  • Most template tags have parameters that you can pass in to manipulate the way data is outputted.

General Tags List of Template Tags | Theme Developer Handbook | WordPress Developer Resources
Not all tags are defined in the template WordPress provides. Functions can still be template tags if they’re defined outside of the scope of these files.

bloginfo() | Function | WordPress Developer Resources
The bloginfo() functions will return/echo data about the site. This function is very old and still usable, but there are alternative solutions.


Navigation Tags Template:Navigation Menu Tags « WordPress Codex
If you’re using a custom walker, then it’s your responsibility to apply classes to the navigation menu.


Link Tags

List of Template Tags | Theme Developer Handbook | WordPress Developer Resources


Author Tags https://developer.wordpress.org/reference/functions/the_author_meta/
It’s important to format text using the nl2br() function. This will make long user bio’s readable.

https://developer.wordpress.org/reference/functions/get_avatar/
The get_avatar() function accepts a user ID, email or comment object as it’s first parameter.

 


Date and Time

https://codex.wordpress.org/Formatting_Date_and_Time

https://codex.wordpress.org/Function_Reference/the_date
Beware of using the_date() inside the loop. There are a lot of problems that come with this function. It’s better to use the get_the_date() function instead.

 

Featured Images

https://codex.wordpress.org/Post_Thumbnails
  • Post thumbnails come in various sizes. By default there 4 size aliases that WordPress defines for you. The original size of an image can be grabbed by using the full size alias.
  • In order to use post thumbnails you have to add support for it by calling add_theme_support( ‘post-thumbnails’ );

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

 

Pagination

https://developer.wordpress.org/themes/functionality/pagination/
WordPress provides 2 functions for pagination which are the previous_posts_link() and next_posts_link() functions.



Adding Dummy Content

https://wordpress.org/plugins/fakerpress/
FakerPress allows you to generate fake content. Make sure you create fake users, terms and posts.

https://www.lipsum.com/
Random text generator.



Template Hierarchy & Single Post Template

https://wphierarchy.com/

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

The template hierarchy is what WordPress uses to determine what template file to load. The default template is the index.php file.

https://codex.wordpress.org/Theme_Development
  • WordPress theme development codex provides recommendations for what each template should have.
  • Quick tags allow you to insert code into a post that will be dynamically changed depending on the quick tag used.
  • The <!—nextpage quick tag allows you to paginate a post.



Comments Template

https://developer.wordpress.org/reference/functions/comment_form/
  • You can create a template for comments by creating a file called comments.php
  • It’s important to check if the current post is password protected using the post_password_required()  function.
  • The comment_form() function will display a form while also taking the time to perform additional checks before displaying the form.
  • WordPress saves all comments inside a global variable named comments which is available for access inside a loop.



Page Template

https://developer.wordpress.org/themes/template-files-section/page-template-files/
  • WordPress will load a template called page.php for page templates.
  • Page templates tend to be a more minimal version of a single post template, but it’s completely up to the developer/designer.
  • For loops within page templates, see THE LOOP⇒.
https://wordpress.org/plugins/wp-subtitle/
WP Subtitle plugin can make adding subtitles easy





404

404 Pages | Theme Developer Handbook | WordPress Developer Resources
  • The official templates for the 404 and category templates are the 404.php and category.php files respectively.
  • To reuse the searchform template you can call the function get_search_form().



Category Template

Category Templates « WordPress Codex
If you have elements that are the same across various templates then you may want to consider putting that code in it’s own template.

https://developer.wordpress.org/reference/functions/get_template_part/
To grab a reusable template you can call the function get_template_part().
https://placeholder.com/https://developer.wordpress.org/reference/functions/the_archive_title/


Date Template

  • Date templates are not commonly created, but you may come across them so its good to know how to work with them.
  • The date template is a type of archive template. It can be used for displaying posts within a certain year, month or day.
get_date_template() | Function | WordPress Developer Resources
WordPress doesn’t provide much flexibility with this template. You’ll need to use conditional tags to render date specific content.



Attachment Templates

Attachment Template Files | Theme Developer Handbook | WordPress Developer Resources
  • Attachments are what WordPress calls the images, videos, and any other files you uploaded on your site through the media uploader.
  • If you create an attachment template, then you’re responsible for displaying the attachment.
  • The$post variable contains information about the attachment such as the full HTTP URL.
https://codex.wordpress.org/Function_Reference/get_allowed_mime_types
Mime types specify what kind of file you’re dealing with.



Search & Custom Templates

Creating a Search Page « WordPress Codex
The search.php file is for search templates. It’s important that you provide a form with the searched term.

Template Files | Theme Developer Handbook | WordPress Developer Resources
  • Custom template files allow you to give users the choice to choose different template designs.
  • You can name your templates whatever you want. It’s best to keep the names short and concise.
  • Custom templates can be applied to multiple post types. This is a new feature in versions 4.7 and above.
  • There are 2 ways to access the search page. You can add a URL query and set the s key. Alternatively, you use the phrase search followed by the search term. Either method will generate the search template.
 

Title

Title Tag « WordPress Codex
WordPress will generate the <title> tags for each page. You need to call the add_theme_support() function. Do not use the wp_title() function as it is deprecated.
add_theme_support( 'title-tag' );



Theme Logo

Theme Logo « WordPress Codex
WordPress will also handle processing the logo image upload. You need to add support for it using the add_theme_support() function.
add_theme_support( 'custom-logo' );



Ad Sections

https://wordpress.org/plugins/quick-adsense-reloaded/https://developer.wordpress.org/reference/functions/bloginfo/
WP Quads is a plugin that will manage and display ads for you. Bundling plugins with your theme can increase the value and flexibility of your theme.



Theme Customizer API

https://developer.wordpress.org/reference/classes/wp_customize_manager/
https://developer.wordpress.org/reference/classes/wp_customize_manager/add_control/
https://developer.wordpress.org/reference/classes/wp_customize_manager/add_setting/
  • The WordPress customizer allows users to modify a theme while also previewing those changes in real time.
  • The customizer is growing in popularity. A lot of developers are opting to use it because it’s very easy to extend.
  • There are 3 steps you’ll go through when working with the customizer. The first step is to create a setting database value. The second step is creating a section that will contain all the controllers. The third step is to create a controller that is assigned under a section and updates a setting.
get_theme_mod() | Function | WordPress Developer Resources
  • To use a setting on your theme you need to call the function get_theme_mod() with the name of the setting passed in as the first parameter. The setting will be returned so you will need to echo it out if you need to display it.
  • Dropdown & Checkboxes using the Customizer API
    • You can create checkbox fields by setting the type key to checkbox.
    • The choices key is used to set the values for checkbox. The key will be the value of the checkbox itself. The value will be the human readable text.
    • The dropdown-pages will create a dropdown of all published paged on your WordPress site.
    • You can set the value to 0 to tell WordPress you don’t want to select a page.

 

Customizer Transport and Overriding Existing Settings

  • The order WordPress organizes the customizer is Panels > Sections > Controller
  • You are allowed to modify the current existing customizer by simply grabbing what you want to modify with the appropriate get method and then changing the properties.
  • You can var_dump() the wp_customize object. It’s a great way to learn and understand what’s being used inside the customizer.
  • Setting the transport to postMessage WordPress will let you handle how content is reflected in the preview through JavaScript.

 

Color & Upload Controls for the Customizer

  • The color control can be used to render a color picker in the WordPress customizer.
  • Use the wp_add_inline_style() function to load CSS directly inside the HTML document. This is great for loading dynamic CSS.
  • Alternatively, you can create a PHP file that will load dynamic CSS and change the headers.
  • The upload control will return the full HTTP URL to the file the user has selected or uploaded.

 

More Theme Support & Starter Content

https://themeforest.net/https://make.wordpress.org/core/2016/11/30/starter-content-for-themes-in-4-7/
  • RSS feeds are a way for users to grab the latest content from your site without having to read it.
  • If you plan on taking advantage of HTML5 features, then you’ll need to add support for it and pass in what tags you’d like to add support for.
  • The starter content feature allows you to create dummy content for the customizer for users who are installing your theme on a fresh installation of WordPress.
  • To simulate a fresh site, you can change the fresh_site value to 1. You can find this option inside the wp_options table.
 

Conditional Tags 

Conditional Tags « WordPress Codex
Conditional tags are a way to check what kind of page is being displayed.



Post Class and ID's

post_class() | Function | WordPress Developer Resources
The post_class() function will output classes for the current post. It’s also a good idea to give each post a unique ID.




WordPress Action & Filter Hooks

Hooks, Actions and Filters are what WordPress calls the Plugins API.
Hooks | Plugin Developer Handbook | WordPress Developer Resources

Filter hooks/functions are always pass in something to filter and are always expected to return something. You are allowed to return false.
Filters: Plugin API/Filter Reference « WordPress Codex
 
Action hooks/functions can do anything behind the scenes. You don’t have to output or return anything. You can run an SQL query or send out an email. Anything goes.
Actions: Plugin API/Action Reference « WordPress Codex
 

Custom Hooks and Prioritization
Custom Hooks | Plugin Developer Handbook | WordPress Developer Resources
  • It’s perfectly acceptable to use the same hooks several times. To control which functions run first you should set the priority.
  • If you don’t set the priority, WordPress will run the functions as 1st come 1st serve. The lower the number the higher priority it gets.

do_action() | Function | WordPress Developer Resources
Action hooks are triggered using the do_action() function. This function accepts the name of the hooks you’d like to trigger.

Filter hooks/functions allow you to filter through data and modify the final result. You’re always expected to return data.
apply_filters() | Function | WordPress Developer Resources
Filter hooks are triggered using the apply_filters() function which accepts the name of the hook to trigger and the data to filter.



Creating A  Plugin

  • All plugins are stored inside the wp-content/plugins folder. WordPress will provide 2 plugins which are the Hello Dolly and Akismet plugins.
  • You can name your main plugin files whatever you want. Some plugins will use the index.php file and others will use the name of their plugin.
  • WordPress will scan the plugins directory for files and any subfolder files for file headers.
https://codex.wordpress.org/File_Header

The minimum requirement for WordPress to recognize a plugin is the Plugin Name header property. 
<?php
/*
Plugin Name: Health Check
Plugin URI: https://wordpress.org/plugins/health-check/
Description: Checks the health of your WordPress install
Version: 0.1.0
Author: The Health Check Team
Author URI: http://health-check-team.example.com
Text Domain: health-check
Domain Path: /languages
*/

From there, the plugin API can be used.
https://codex.wordpress.org/Plugin_API


Plugin Activation & Deactivation

Activation / Deactivation Hooks | Plugin Developer Handbook | WordPress Developer Resources

register_activation_hook() | Function | WordPress Developer Resources
The register_activation_hook() function is a function specifically made for plugins that will trigger when your plugin is activated.

register_deactivation_hook() | Function | WordPress Developer Resources
When a plugin is deactivated, the action ‘deactivate_PLUGINNAME’ hook is called. In the name of this hook, PLUGINNAME is replaced with the name of the plugin, including the optional subdirectory. For example, when the plugin is located in wp-content/plugins/sampleplugin/sample.php, then the name of this hook will become ‘deactivate_sampleplugin/sample.php’.

News – Plugin Compatibility Beta – WordPress.org
It’s always good practice to perform checks to make sure the current WordPress site is compatible with your plugin.

PHP: version_compare - Manual
The version_compare() function allows you to compare version schematics that aren’t possible with traditional comparison operators.



Uninstalling a Plugin

It’s good practice to clean up after yourself so a user doesn’t have a bloated site which can potentially lead to performance and security issues.
Uninstall Methods | Plugin Developer Handbook | WordPress Developer Resources
 WordPress provides 2 ways to hook into when a plugin is uninstalled from your site. The recommended way is to create a uninstall.php file that will handle the uninstallation.

 It’s good practice to check if WordPress is the one calling the uninstall.php file and not some outside user.
// if uninstall.php is not called by WordPress, die 
if (!defined('WP_UNINSTALL_PLUGIN')) { 
    die; 
}

 

Creating a Custom Post Type

Custom post types allow you to create a custom UI for a specific kind of content. https://developer.wordpress.org/plugins/post-types/registering-custom-post-types/
Using Custom Post Types, you can register your own post type. Once a custom post type is registered, it gets a new top-level administrative screen that can be used to manage and create posts of that type.

https://developer.wordpress.org/reference/functions/register_post_type/
The register_post_type() function will allow you to create a post type. This function requires the name of the post type along with various settings. 
register_post_type( string $post_type, array|string $args = array() )

init | Hook | WordPress Developer Resources
The init hook runs when the WordPres begins to initialize the data. This hook runs very early so it’s the best place to register post types.
do_action( 'init' ) 
 add_action(  
  'init',  
  'process_post' 
);
_x() | Function | WordPress Developer Resources
  • The _x() function allows you to translate strings and also provide a context for the translator. A context allows you to describe how the translated string is being used for a more accurate translation.
  • Whenever you create a post type, WordPress will generate a new permalink structure. You need to flush the rules in order for WordPress to recognize the changes. One way is by updating the permalink structure from the admin dashboard. There are programmatically, as well.
save_post | Hook | WordPress Developer Resources
The save_post hook is optionally dynamic. By appending your custom post type you can make sure the hook is only triggered when your custom post type is create/updated.



Flushing the Rewrite Rules with the Rewrite API

https://codex.wordpress.org/htaccesshttps://codex.wordpress.org/Rewrite_API
The rewrite API is can potentially break your site if you are not careful.
WordPress uses the htaccess file to help generate SEO friendly URLs.

flush_rewrite_rules() | Function | WordPress Developer Resources
You need to flush the rules every time you plan on creating new rewrite rules. You can do this manually by updating the permalink settings or call the function flush_rewrite_rules().

 

Custom Columns in Admin

You are allowed to modify the columns outputted on the admin side of WordPress using action/filter hooks.
Custom columns must be handled by you. WordPress will take care of it’s own columns.
https://developer.wordpress.org/reference/hooks/manage_post-post_type_posts_custom_column/
Fires for each custom column of a specific post type in the Posts list table.

https://developer.wordpress.org/reference/hooks/manage_post_type_posts_columns/
Filters the columns displayed in the Posts list table for a specific post type.



Security




Metadata API

https://codex.wordpress.org/Metadata_API The metadata API allows you to attach data to specific content from posts to users. By itself, the data is not useful. Metadata HAS to be attached to something.
https://developer.wordpress.org/reference/functions/update_post_meta/ The update_post_meta() function will create the metadata if it already doesn’t exist.
https://developer.wordpress.org/reference/hooks/save_post/


Creating Database Tables

  • WordPress creates about 11 database tables on a fresh installation.
  • The database prefix is prepended to every database table WordPress generates. For example, if a table is named posts and the prefix is wp, then the new database name would be wp_posts.
  • You are allowed to create your own database tables if the APIs don’t suit your needs.
  • HeidiSQL is a great tool for interacting with your SQL database. It provides a lot of tools and information.

https://developer.wordpress.org/reference/functions/dbdelta/
To create a database table you’ll need the function dbDelta() to help you do so.

https://developer.wordpress.org/reference/classes/wpdb/
This class is used to interact with a database without needing to use raw SQL statements. By default, WordPress uses this class to instantiate the global $wpdb object, providing access to the WordPress database

wpdb::insert() | Method | WordPress Developer Resources
You can insert data using the wpdb->insert() method. This method will also sanitize all data and generate a proper query for you.




Sending and Using AJAX Requests 

https://codex.wordpress.org/AJAX_in_Plugins WordPress does not provide a AJAX URL variable so you will need to generate one and pass it to your JS files using the wp_localize_script() function.
https://developer.wordpress.org/reference/hooks/wp_ajax_action/
  • All AJAX requests should be sent to the admin-ajax.php file inside the wp-admin folder.
  • The chrome developer tools provide a way for you to keep track of what files are loaded and how long it took to load those files. It even provides information about each individual file.
There are 2 hooks. The wp_ajax and wp_ajax_nopriv hooks. The nopriv version is for users who are not logged in.
wp_ajax_{$action} | Hook | WordPress Developer Resources
wp_ajax_nopriv_{$action} | Hook | WordPress Developer Resources
 

Handling AJAX Requests and Inserting data into the Database
wpdb::insert() | Method | WordPress Developer Resources
You can insert data using the wpdb->insert() method. This method will also sanitize all data and generate a proper query for you.

There are 3 formats which are string, integer and float.
  • The format for string is %s.
  • The format for integer is %d.
  • The format for float is %f.
wpdb::get_var() | Method | WordPress Developer Resources
WordPress provides a few method for executing custom queries. The get_var() method will execute a custom query and return a single value from that query.
 
SQL COUNT(), AVG() and SUM() Functions (w3schools.com)
The AVG() SQL function will average out all the values from a particular column. COUNT() and SUM() can be helpful, as well.

 

Gutenberg

The new Gutenberg editing experience (wordpress.org)
 Gutenberg is a modern editor for creating content. It not only changes the editing experience, but the developer experience as well.
You can create blocks using ES5/Plain JavaScript, but that makes it hard to manage and read your code.
Using webpack, react and other libraries will make working with Gutenberg easier. Knowledge of these would be beneficial.



NodeJS

https://nodejs.org/en/
https://nodejs.org/dist/latest-v12.x/docs/api/


CommonJS and NPM
https://requirejs.org/docs/commonjs.html https://www.npmjs.com/ To load a module, you need to use the require() function and pass in the path to the module.
Only the data inside the module.exports property is provided to modules that load a module. Nothing else.
Children modules can also load in their own modules. There is no limit to how deep modules can be loaded. This creates a module tree structure.
To create a package.json file you can run the npm init command or create the file manually.
The package.json file contains settings related to your project and the modules you use.
You can use flags to manipulate how commands work. The name and format of flags vary from developer to developer.
You’ll usually save modules as production or development dependencies depending on the flag you use.


Webpack and Dependencies
https://webpack.github.io/
Webpack is a module bundler. It will process your HTML, CSS, JavaScript and other file types.
When you install webpack, you’re provided a command called webpack which will bundle your modules together.
Dependencies are modules that are required to make your app work. They are meant for the production part of your site.
Developer dependencies are modules that are required for the development phase of your app.


Webpack Configuration
Webpack requires that you create a webpack.config.js file with all your settings. You define where the entry point and output files.
The __dirname constant will contain the path to the file it’s currently being used in.
The webpack CLI is a separate module that must be installed.


Webpack Loaders and Babel
https://github.com/webpack-contrib/raw-loader (deprecated)
Instead, now this is available:
Asset Modules | webpack
  • Babel is a JavaScript compiler that converts your code into JavaScript that node and browsers can understand.
  • Webpack loaders are a way to load 3rd party modules that hook into the webpack process.
  • Webpack and babel are completely independent from each other so you can use either one without the other.
  • Babel is very modular. It’s split into various modules. You’ll usually find yourself installing a minimum of 3 modules when using Babel.


ES6 Modules and Destructuring
JavaScript modules - JavaScript | MDN (mozilla.org)
  • ES6 modules is the official way of creating modules in JavaScript.
  • You can export multiple values and optionally export a default value. All exported values besides the default value require a name.
Destructuring assignment - JavaScript | MDN (mozilla.org)
  • Destructuring allows you extract properties from objects. Not impressive by itself. It’s used with other features of JavaScript.
  • ES6 modules and destructuring are used together a lot in examples and actual production applications.


React

React – A JavaScript library for building user interfaces (reactjs.org)
Components are reusable HTML elements. They’re written like a function but are used like an HTML element.
JSX is a different form of JavaScript. It is NOT HTML. Babel will convert any JSX into JavaScript functions that will take create of creating elements.
Some attributes will not work such as the class attribute (className must be used).


Reusing Components and Properties
We must have a root element for your JSX components. Otherwise you’ll be given an error.
Properties are the attributes and data passed down onto a component. It’s how you create custom values.
To access the properties, you need to accept in the props object and then access the values by their attribute name.



Getting Started with Gutenberg

https://developer.wordpress.org/block-editor/
https://github.com/WordPress/gutenberg-examples

All of the code is at:
https://github.com/WordPress/gutenberg

https://expressjs.com/
Express framework 
$ npm install express --save
https://babeljs.io/
Install Babel 
npm install --save-dev @babel/preset-react 

https://www.npmjs.com/package/@wordpress/babel-preset-default
WordPress provides a babel preset for processing code. This saves you time from having to set things up yourself.
npm install @wordpress/babel-preset-default --save-dev
  • The cross environment module will make sure any commands and settings you use will work with any platform.
  •  You can set the watch property inside the webpack config file to force webpack to continuously watch your files for any changes and compile them.
  •  Source maps are a way to convert compressed/minified/obscured JavaScript back to its original form.

 
Registering and Enqueueing the Block Assets

 How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes – WordPress Educator Zac Gordon
Use the action hook enqueue block editor assets to load your JS/CSS files for the Gutenberg editor.
 
I18n for WordPress Developers « WordPress Codex
wp i18n | WP-CLI Command | WordPress Developer Resources
The wp-i18n file has code related to translating strings on the front end.

@wordpress/element | Block Editor Handbook | WordPress Developer Resources
The wp-element script provides functions for creating elements. Mainly for JSX.

Component Reference | Block Editor Handbook | WordPress Developer Resources
The wp-components script provides the various components you can use in your own blocks.

 
Register Blocks
You don’t have to store the contents of an imported file. You can import a file for the sake of executing the imported file’s code.
All code is stored under the global variable wp. The blocks object contains all the components registered under WordPress.

Block Registration | Block Editor Handbook | WordPress Developer Resources
  • The registerBlockType function has 2 parameters. The first is the name of the block. The name should be formatted as namespace/name. The second parameter is the settings.
  • The Gutenberg code provided in WordPress is different from the code on Github. The Github version is the non compiled version. It has not been processed by babel or webpack.


Block Settings
Destructuring objects to make your code readable. A common practice for Gutenberg blocks.
https://www.flaticon.com/
https://developer.wordpress.org/resource/dashicons/#cloud-saved
https://svg2jsx.com/
  • SVG stands for scalable vector images. They’re images made up of code. You can use custom icons for your blocks by using SVG. Make sure your SVG images are JSX ready by converting them beforehand.
  • You’re allowed to submit up to 3 keywords. If you must have more than 3, then you can put multiple words in a single keyword.

https://developer.wordpress.org/block-editor/developers/block-api/block-registration/#supports-optional
The supports property will disable/enable any Gutenberg block features. Giving you more control over the functionality of your block. Block Supports In WordPress 5.6 – Make WordPress Core
Several core and third party blocks share different customization tools. Things like color, background, font size, alignment and others are customizations options block authors are likely to add to their own block. To increase the consistency and also make it easier to introduce these options into their blocks, block authors can use the Block supports API. WordPress 5.6 will see the introduction of a number of new block supports and allows dynamic blocks to use them as well.


Using the edit and save properties
Edit and Save | Block Editor Handbook | WordPress Developer Resources
  • The edit function should be used to render a UI in the editor. The save function should be used to render the final result of the block for the front end.
  • React applications are structured with components. Children components are responsible for telling the parent component if the data was updated. After an update has occurred, all children will be updated with the latest changes.
  • The props object will contain the data related to your block. It’s filled with properties and methods that are constantly updated whenever the user interacts with the editor.
  • To add dynamic values in JSX, you need to use a pair of curly brackets with the value you’d like to inject.


Inspector Controls
Block Controls: Block Toolbar and Settings Sidebar | Block Editor Handbook | WordPress Developer Resources
  • Inspector controls are the input fields on the sidebar of the Gutenberg editor.
  • You can return an array to have multiple root elements. If an InspectorControls component is in the array, Gutenberg will display the content on the sidebar.


Componenets
Component Pages – Make WordPress Core
@wordpress/components | Block Editor Handbook | WordPress Developer Resources
WordPress provides dozens of generic components that you can take advantage of. They come with formatting and accessibility to your blocks.
 
TextControl | Block Editor Handbook | WordPress Developer Resources
  • The TextControl component will create an input field. The SelectControl component will create a dropdown field.
  • Gutenberg uses the rest and spread operators to allow for dynamic attributes in their components.


Attributes
Attributes | Block Editor Handbook | WordPress Developer Resources
Attributes are custom values for your block. They must be set and managed by you, the developer.
After setting your attributes, they can be accessed via the 
props.attributes
object.
To update an attribute, you need to use the 
props.setAttributes
function. Pass in an object with all the attributes you’d like to update.

 
Rendering the Block
render_block() | Function | WordPress Developer Resources
  • Gutenberg constantly calls the edit function whenever the block or anything else is updated. The save function is called when the post is published or updated.
  • WordPress will save your content with your blocks surrounding in comments. The comments will help break your content back into blocks in the editor.
  • The selector property will tell Gutenberg where it can find the value for an attribute. The source will tell it what to take from that element based on the selector.
  • The type will tell Gutenberg what type of data it should expect to store in the database. This is optional.


Styling Blocks
https://github.com/webpack-contrib/mini-css-extract-plugin https://github.com/webpack-contrib/sass-loaderhttps://github.com/sass/node-sass
SASS/SCSS is preprocessor with features like variables, conditional statements, etc. It can make your CSS easier to manage.
SASS can’t be loaded on the browser. You need to able to compile it into CSS after you’re finished. There are plenty of modules for Webpack and Node.js to accomplish this. https://github.com/webpack-contrib/css-loader
You can use multiple loaders by passing in an array to the use property. enqueue_block_assets | Hook | WordPress Developer Resources
Use the enqueue block assets hook to load scripts and stylesheets for the editor and front end. It’s ideal to use it for loading stylings for your blocks.


Alignment Toolbar
Block Controls: Block Toolbar and Settings Sidebar | Block Editor Handbook | WordPress Developer Resources
WordPress provides components for adding a toolbar to your block. This is done with the BlockControls component.
The AlignmentToolbar is a component that will add an alignment toolbar to wherever you call it.
If you don’t set a selector or source, then WordPress will store your attribute in the comments.
It’s recommended that you store attributes in the comments for small or simple values. Store attribute values in the HTML when the data is complex.

 
Block Alignment
Gutenberg Block Alignment - Jschof
  • The BlockAlignmentToolbar component will create the UI for aligning your block in the editor.
  • The getEditWrapperProps function will run every time the block is updated. We use it to update the property that’s wrapped around our block in the editor.

 
High Level Overview of Gutenberg
  • Gutenberg Splits itself up into multiple packages. You can find those packages in the packages directory in the GitHub repository.
  • WordPress is planning on making the whole admin dashboard a single page app. It’s placed generic components in the components package.
  • The data package is where Gutenberg manages the state. The state is a term used to describe the data in your application.
  • Gutenberg wraps the React functions for creating elements on the DOM. This is so that it can provide backwards compatibility if React was to ever change.


Gutenberg Blocks with ES5
  • The Gutenberg Examples repository is the official repo for how to build blocks for Gutenberg.
  • You will find examples for building blocks with ES5 and ESNext. It’s not necessary to use Webpack, Babel or SASS.
  • It’s recommended that you use self-invoked functions to contain your block’s code. It’s also useful for shortening the names of functions and properties.
  • The wp.element.createElement function will create an element. It’s what JSX gets converted into.
 

Rich Text Block
RichText Reference | Block Editor Handbook | WordPress Developer Resources
https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/rich-text
Rich Text are components that allow the user to edit text with formatting. wp_editor() | Function | WordPress Developer Resources
  • The RichText component can be found in the wp.editor object.
  • Setting the source to children will instruct Gutenberg to extract the content from the children elements selected with the selector property.
  • The tagName property will be the element that gets wrapped around your content. The multiline property will be the element that breaks up your content. By default it’s a break tag.

 
Custom Toolbar
Toolbar | Block Editor Handbook | WordPress Developer Resources
The toolbar component will correctly position and separate your custom buttons from the other buttons in the toolbar.

Tooltip | Block Editor Handbook | WordPress Developer Resources
The tooltip component will display a tooltip whenever the user hovers over the content placed inside of the component. This is optional to add, but helpful.

Button | Block Editor Handbook | WordPress Developer Resources
  • The button component will create a button that is stylized for the Gutenberg editor.
  • The classnames function will allow you to merge multiple classes together. It’s helpful for when you need to dynamically add classes. Something that can’t be easily done in react.


Form Toggle
You are allowed to have multiple input fields/buttons that control the same setting. Gutenberg will be able to sync everything together for you.

FormToggle | Block Editor Handbook | WordPress Developer Resources
  • The FormToggle component will create a toggle form field that toggles a single value. Similar to a checkbox.
  • JSX does not support "for" attribute. Instead you need to use the htmlFor attribute.


Inspector Control Fields
TextareaControl | Block Editor Handbook | WordPress Developer Resources
The TextareaControl component will render a textarea input form field.

CheckboxControl | Block Editor Handbook | WordPress Developer Resources
The CheckboxControl component will render a checkbox input form field. The checked property must be either true or false.

RadioControl | Block Editor Handbook | WordPress Developer Resources
The RadioControl component will render a radio control input form field. The options property must be an array of all the options in object form.

RangeControl | Block Editor Handbook | WordPress Developer Resources
The RangeControl component will render a slider that the user can drag back and forth to change a value. A value can also be set manually. You’re allowed to pass in your own custom icons. It’s recommended you store the icons in a separate file to keep things clean and organized.
 

Media Uploads

@wordpress/block-editor | Block Editor Handbook | WordPress Developer Resources
The MediaUploadCheck component will check if the user is logged in. If they are, then the MediaUpload component will render.

@wordpress/element | Block Editor Handbook | WordPress Developer Resources
  • The render property will run a function that you can use to display a UI to the user. Perfect for displaying a button to open the media library.
  • The onSelect event will run when an media item is uploaded. You’ll be passed in an object holding information about the item selected.
  • The allowedTypes property is an array of file types that the user can select.

 

Creating a Widget

https://codex.wordpress.org/Widgets_API Widgets are called at a weird time so make sure you include your widgets and functions using the full system path.

WP_Widget | Class | WordPress Developer Resources
You must extend the WP_Widget class so WordPress can assist you with setting up the widget.

WP_Widget::get_field_name() | Method | WordPress Developer Resources
WordPress will take care of submitting, processing and display the values/fields. Use the get_field_name() and get_field_id() methods to help you generate the attributes.
 
WP_Widget::update() | Method | WordPress Developer Resources
The update() method allows you to filter the data your own way. It’s important that you return the array so WordPress can update everything properly.



Cron Jobs and Transients API

https://developer.wordpress.org/reference/functions/wp_schedule_event/
Cron jobs are automated tasks that can perform daily, monthly, etc. WordPress comes with it’s own built-in task manager.
It’s important that you unscheduled your cron jobs after your plugin is deactivated or else a user’s site might become bloated with unused code.
 
https://codex.wordpress.org/Transients_API
The transients API allows you to store cached data in the database. It allows you to set up an expiration time.
 
WP_Widget::widget() | Method | WordPress Developer Resources
The widget() method is passed in an args array that contains values related to the theme’s sidebar HTML. You can use this HTML to format your widget.


Shortcodes

https://codex.wordpress.org/Shortcode_API
Shortcodes can have attributes just like HTML elements. You can use these attributes to generate a more dynamic shortcode.

shortcode_atts() | Function | WordPress Developer Resources
Attributes are optional so be sure to have some default values. You can use the shortcode_atts() function to filter the values.

Shortcodes can also be enclosed. Users can pass content in between and you can accept that as the second parameter to your shortcode function.
<shortcodename>Some text</shortcodename>

 

Creating a Shortcode for Frontend Publishing

https://codex.wordpress.org/Shortcode_API
Shortcodes allow you to add dynamic code into the editor that can be replaced with more code.
https://developer.wordpress.org/reference/functions/wp_editor/
  • The wp_editor() function will output the tinymce editor so you can use it in your plugins.
  • It’s important that you use an ID that only contain lowercase letters and no spaces/underscores.
PHP: Output Control - Manual
PHP output buffers help us grab content that would be otherwise outputted. You can grab the content and store it in a variable for later use.


Sanitizing HTML and Inserting a Post
WordPress will load a javascript called tinymce which use can use to interact with it’s advanced editor.

https://developer.wordpress.org/reference/functions/wp_kses/
You can filter HTML using the wp_kses() function. This function allows you set what tags, attributes and protocol are allowed.

wp_kses_post() | Function | WordPress Developer Resources
Alternatively, you can use the wp_kses_post() function to use the same settings WordPress uses for filtering it’s posts.
https://developer.wordpress.org/reference/functions/wp_insert_post/
To insert a post you need to call the wp_insert_post() function. Only the title and content are required, but you can set a plethora of options to customize it.


Custom Hooks with the Plugin API and Sending E-mails
https://codex.wordpress.org/Plugin_API bbPress – WordPress plugin | WordPress.org
BBPress is a popular plugin that is extendable with even more plugins. It uses the WordPress plugin API to do this.

do_action() | Function | WordPress Developer Resources
  • Call the do_action()  function and pass it in a custom name to trigger a custom hook. WordPress will not throw any errors if the hook does not have any functions using it.
  • You can pass in anonymous functions to your hooks rather than passing in a string.
 
wp_mail() | Function | WordPress Developer Resources
The wp_mail() function will run the mail() function except it’ll call hooks to filter the data before sending out an email.

 

Creating the Login and Registration Forms

Membership plugins can increase the value of your theme by including them. Consider integrating one into your theme.
https://developer.wordpress.org/reference/functions/wp_insert_user/
Insert a user into the database. https://codex.wordpress.org/WordPress_Nonces
https://codex.wordpress.org/Function_Reference/wp_nonce_field
Nonces (Numbers only once) are a way to create tokens that you can use to verify the credibility of a request. It’s important that you manually authenticate the user if they’re logging in for the first time. Using a the wp_signon() function brings back mixed results.

is_wp_error() | Function | WordPress Developer Resources
Use the is_wp_error() function to verify if an object is a WordPress error object.


User Registration
Be sure to check if the user has registration turned on. This setting only applies to WordPress own registration form, but you should take advantage of it anyway.
All options are stored inside the options table. Plugins and transients are also stored inside this table.
It’s always good practice to hide and display content depending if the user is logged in or not.


User Authentication
wp_signon() | Function | WordPress Developer Resources
Use the wp_signon() function to authenticate a user with WordPress.


Alternative User Authentication
https://developer.wordpress.org/reference/functions/wp_loginout/
  • WordPress provides a way to log users in that you’re allowed to extend or override.
  •  It’s good practice to find the hooks that WordPress uses and understand how WordPress functions. This gives you the opportunity to hook perfectly into the system to do what you desire.
https://developer.wordpress.org/reference/functions/wp_login_form/
The wp_loginform() function will generate the form for logging a user in for you. It’ll also set up any additional fields WordPress will need to properly authenticate a user.


Adding a Logout Link to the Menu
wp_nav_menu_items | Hook | WordPress Developer Resources
All menus can have dynamic menu items created using hooks. Use the wp_nav_menu_items hook to do just that.



Prepared Database Queries

wpdb | Class | WordPress Developer Resources
The wpdb object has a prepare method that will sanitize queries. This is a great way to prevent SQL injections.

wpdb::prepare() | Method | WordPress Developer Resources
The prepare method has a similar functionality to PHP’s PDO prepare method or MySQLI’s prepare method.
 

Creating a WordPress Dashboard Widget

WordPress admin dashboard widgets allow you to give web owners a glance at what’s going on with your plugin. You can also use a dashboard widget to display news related to your plugin or software.

wp_add_dashboard_widget() | Function | WordPress Developer Resources
Call the wp_add_dashboard_widget() function to create a dashboard widget. https://codex.wordpress.org/HTTP_API
Using the HTTP API to Retrieve External Content
There are various methods and functions for retrieving content outside of your site. Some hosts will disable/enable these methods.
Rather than checking which method is available, you can use the HTTP API to let WordPress decide which method is best and available.
WordPress will return the results of most requests as an array with various pieces of information about the response.
A lot of this information can be parsed for you using a set of utility functions provided by WordPress.

WordPress APIs

https://make.wordpress.org/core/handbook/best-practices/core-apis/
WordPress provides many APIs out of the box. APIs allow you to interact with WordPress easily without having to write a lot of the logic and queries yourself.


Options API
https://codex.wordpress.org/Options_API
The options API allows you to store settings and options for your theme/plugin. WordPress use this API for it’s own settings.
It’s perfectly fine to create your own table. However, the APIs are meant to keep the database fairly minimal and easy to manage. So consider using an API before creating a table.
Make sure to check if certain options exist before creating it.


Adding an Admin Menu and Page

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

admin_menu | Hook | WordPress Developer Resources
The hook to add an admin menu is the admin_menu hook. It’s important you do not run this hook inside a function using the admin_init hook.
https://wordpress.org/support/article/roles-and-capabilities/
  • Capabilities determine what a user can or can’t do. Roles are a way to group capabilities together. It’s important that you check a user’s capabilities rather than a role as capabilities can be changed within a role.
  • WordPress provides a class called wrap which helps position the content of your admin page.


Processing Admin Form Settings
https://developer.wordpress.org/reference/hooks/admin_post_action/ 
The admin_post_ is a dynamic hook. The name of the action from a request will be appended to the hook to determine what function will run. current_user_can() | Function | WordPress Developer Resources
It’s always good practice to check the capability of a user before executing any more code. You can check a user’s capability by using the function current_user_can().

wp_redirect() | Function | WordPress Developer Resources
You can redirect a user using the wp_redirect() function which accepts a URL.


Settings API
https://developer.wordpress.org/plugins/settings/settings-api/  
  • The settings API will generate a form, process that form, and update your options for you. It’s the preferred solution for developers who prefer to use pure PHP.
  • The settings API is completely optional to use. You are more than free and allowed to create your own UI and process your own data. There is no wrong or right answer here.
  • The settings API has about 3 layers. The first layer is the page. The second layer would be the sections related to a page. The third layer would be the input fields for a section.


Featured Images using the WordPress Media Uploader

https://codex.wordpress.org/Javascript_Reference/wp.media
  • WordPress provides an object called wp which provides a set of methods and properties for interacting with WordPress with JavaScript.
  • The WordPress media uploader will handle uploading images while also providing a simple UI for browsing and selecting an image.
set_post_thumbnail() | Function | WordPress Developer Resources
To associate an image with a post you need to use a function called set_post_thumbnail().

https://codex.wordpress.org/Data_Validation




Custom User Roles and Capabilities

https://wordpress.org/support/article/roles-and-capabilities/#capability-vs-role-table
Roles are a way to group capabilities for a user. A capability determines what a user can or can’t do. add_role() | Function | WordPress Developer Resources
  • Creating a role is very simple. You just call the add_role() function and pass in an array of capabilities you’d like a user to have.
  • To set the default role you need to go to the admin dashboard and navigate to Settings > General. From there you can set the default role for new users.



Custom Taxonomies

https://wordpress.org/support/article/taxonomies/
  • Taxonomies are a way to associate words or phrases with a single post.
  • Each individual word or phrase is what WordPress calls a term.
  • Taxonomies are a very simple concept, but they’re very complex in design.


Custom Taxonomy Settings
https://developer.wordpress.org/reference/functions/register_taxonomy/
Taxonomies can have meta data and be extended. There are 2 forms you need to account for which are the add and edit forms.

wp_get_post_terms() | Function | WordPress Developer Resources
The wp_get_post_terms() function will get the terms for a particular post and taxonomy.



Custom Post Type UI and Advanced Custom Fields

The easiest way to create Custom Post Types in WordPress (pluginize.com)
 The custom post type UI plugin will help you with generating custom post types and taxonomies without having to write a single line of code.

Advanced Custom Fields – WordPress plugin | WordPress.org
  • The ACF (Advanced Custom Fields) plugin will help you generate custom fields for certain post types. It can even create fields that aren’t normally possible with plain HTML.
  • We are not limited to one option or the other. You can combine your knowledge with these plugins to rapidly build plugins/themes. These plugins use the same APIs and functions we would use.

 

Custom Shortcode, Post Type & More Generator

GenerateWP - User friendly tools for WordPress developers
How it Works
1  Select a tool: Select from dozens of generators to enhance your workflow.
2  Fill in the form: GenerateWP uses user-friendly forms to output valid code.
3 Generate the code: Copy the ready-to-use code directly to your project.



Getting Started with BuddyPress Theme Development

https://buddypress.org/
https://codex.buddypress.org/themes/theme-compatibility-1-7/a-quick-look-at-1-7-theme-compatibility/ BuddyPress is a plugin that will convert your site into social network (Profiles, Notifications, Groups, etc).
 
BuddyPress will automatically create pages and generate the content for you without having to configure a lot of its settings.

BuddyPress uses the template hierarchy system and builds on top of it for its own pages. The buddypress.php is considered the base template for all pages.

To prevent your folder from getting cluttered with files; BuddyPress will store 99% of it’s templates and template parts inside a folder structure.


BuddyPress Single Member Pages
  •  BuddyPress will search for a template part inside your theme’s folder. If it doesn’t find a file, then it’ll search for that template inside it own plugin folder.
  •  You may be tempted to move every template inside your own theme folder, but this can make things complex and hard to manage. It’s better to only include the files you plan on overwriting.
  •  BuddyPress doesn’t provide much information on the templates besides the basics. You’ll have to study the HTML and PHP code to understand what each template does.
  • After finding the correct templates, you can then move them into your theme folder to the respective directory. You’re free to modify the templates however you wish.


BuddyPress Single Member Custom Profile Tabs
https://codex.buddypress.org/developer/function-examples/core/bp_core_new_nav_item/
  • BuddyPress allows you to add user profile tabs and display your own content.
  • There is a template specifically made for plugins to display their content. It calls important functions and hooks so you don’t have to.
  • If possible, you should take advantage of using action hooks rather than overriding templates so you have less code to manage in the long run.
  • You can use The Loop inside functions and not specifically in templates. Keep in mind that most WordPress APIs are available for use throughout WordPress including plugins.

 
Custom CSS for BuddyPress
  • BuddyPress CSS can be overridden by coping the CSS folder into your theme and then editing the CSS files.
  • BuddyPress will also force you to handle how cover images are generated using PHP.
  • You can “trick” BuddyPress into handling the cover image by passing in it’s own function that handles it originally.
  • Keeping track of updates for BuddyPress is easy as BuddyPress will provide notes on all it’s updates.

 

Getting Started with WooCommerce Development

https://woocommerce.com/
WooCommerce Code Reference
https://woocommerce.github.io/code-reference/index.html
WooCommerce is a plugin that will convert your site in a store (Payment Processing, Billing, Inventory Tracking, etc).
https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
  • WooCommerce is a WordPress plugin like any other plugin. It uses the same functions and hooks. By default, WooCommerce is compatible with most themes.
  • However, it’s always good practice to try your best to accommodate the most popular plugins to increase value and efficiency.
  • WooCommerce provides a simple walk through to help you get started. You can also import dummy data so you can test the plugin with your theme.


WooCommerce Product Page Templates
https://docs.woocommerce.com/document/template-structure/
  • Overriding a template is not the only way you can modify templates. WooCommerce is very efficient and organized. You can remove actions to prevent certain HTML elements from appearing.
  • All WooCommerce templates can be overriden by creating a woocommerce folder inside your theme folder.
  • If our theme doesn’t have a particular template, then WooCommerece will load it’s templates from it’s default folder templates.
  • The globals folder contains templates that apply globally to various woocommerce page.
 

Cart, Email, and Misc WooCommerce Templates
  • Sometimes you’ll want to apply changes to the aesthetics of WooCommerce. In this case, you would usually just override the template and apply CSS/HTML changes to it.
  • E-mail templates can be difficult to modify as you may need a liver server or SMTP to send out and test emails. Use the plugin I showed you in this course if you ever need to modify an email template.
  • Sometimes you’ll want to make changes that aren’t possible with templates. You’ll have to use filter hooks to make your changes.


Custom Cart Item for WooCommerce
https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/
  • It’s completely allowed to use WooCommerce functions and code outside of the woocommerce and it’s templating system.
  • The WC() function will return the wc class so you can use it’s methods and properties.
  • The class provides all the functions and data you’ll need to use WooCommerce anywhere on your site.
  • The class is initialized for you so you do not need to do anything to set up when using it.



WP Provided Functions

WordPress defines a set of functions that you can use in your own themes and plugins. You can check them out in the wp-includes/functions.php file.



Custom Author Fields and Avatars

WordPress provides 2 sets of hooks for editing and updating the user profiles.
edit_user_profile | Hook | WordPress Developer Resources
edit_user_profile_update | Hook | WordPress Developer Resources
  • One set is for the user to update their own profiles and another set to allow users to modify other profiles.
  •  The URL must be a live HTTP URL for avatars. Otherwise, you will not be able to use custom avatars.

 

Image Cropping

https://developer.wordpress.org/reference/functions/add_image_size/
  • An image that is soft cropped will be cropped to a specific dimension. However, if the image ratio can’t be kept intact, then WordPress will try it’s best to crop the image to the size you specified.
  • An image that is hard cropped will be cropped to an exact dimension. If the ratio can’t be kept intact, WordPress will cut the image so the size desired will be used.
  • If you decide to hard crop, then you have the ability to crop the image from certain positions like the center or top right corner.
  • It’s important that you regenerate all the thumbnails on an existing site because not all existing images will be resized.

 

Main Query Home Page Modifications

https://developer.wordpress.org/reference/classes/wp_query/
  • You are allowed to modify the main query using a hook. The WP_Query class has a method called set() which allows you do to this.
  • Keep in mind that the hook will be applied to all pages and not just the home page. Make sure to perform checks to see what page you’re currently on.
query_posts() | Function | WordPress Developer Resources
The query_posts() function will also allow you to modify the main query, but it’s highly recommended you don’t use it.



Admin Notices

https://github.com/bueltge/WordPress-Admin-Style
  • Admin notices are messages that appear on the top of every page to provide more information about anything you want.
  • Admin notices must be managed by you. You must take care of displaying them and removing them.
  • You can use the notice class to make your notice fit properly on the page. There are various other classes for changing the color.
  • Use JavaScript to listen for click events on the exit button to help determine if the notice should be removed or not.

 

Debugging Hooks, Queries and Tools

https://wordpress.org/support/article/debugging-in-wordpress/
  • There are many tools and techniques to debugging WordPress. Most of it is just preference.
  •  WordPress still store all hooks and their functions inside the wp_filter global variable.
  • All queries are stored inside the wpdb->queries property. Only queries that have been executed will be stored.
Query Monitor – WordPress plugin | WordPress.org
The Query Monitor plugin will keep track of all queries, hooks, scripts, styles, requests and many more things for you.

 

Securing the wp-config File

WordPress will look for the config file inside the root installation or up one directory. It’s recommended you move it up one directory on a production server for extra security.

 

SEO, Schema and Microdata

https://schema.org/
  • Microdata are attributes that you can apply to your elements to tell bots/crawlers more about the content it’s look at.
  • You are allowed to have types nested within each other. All types are children of the type Thing.
https://search.google.com/structured-data/testing-tool You can test your microdata using the structured data testing tool provided by Google. This tool will give you insight on what Google sees.

 

RTL Support

RTL stands for right-to-left. There are languages that and read and written like this.

is_rtl() | Function | WordPress Developer Resources
 t’s optional to add support for these languages. You only need to check if the site is set to RTL using the is_rtl() function. If it is, then you’ll need to use CSS to make everything appear RTL.

 

Accessibility

https://wave.webaim.org/
Disabilities can be put into 4 categories which are visual, hearing, motor and cognitive.

https://www.w3.org/TR/html-aria/
  • HTML5 has a feature called ARIA. It’s short for accessible rich internet applications. This will help make your theme/plugin more accessible.
  • The aria-label attribute will help make someone with a disability understand what that element does. Some elements don’t need this as they have their own attributes for this sort of thing.
  • The role attribute allows you to describe a section on the page such as the content or footer.

 

Child Themes

  • Child themes allow you to modify a theme without having to modify the parent theme files. Your code will be safe from being overridden as well.
  • To create a child theme you need to set the Template property to the parent theme folder.
  • It’s important that you correctly load both parent and child theme CSS files.



Bundling Plugins with TGMPA

http://tgmpluginactivation.com/ The TGM plugin activation class will help you with creating a UI and keeping track of what plugins the user should install.


 

Licensing and Making money with your Plugin/Theme

  • WordPress is licensed under GPL. This may be a problem if you want to sell your themes/plugins. This can lead to a problem called dual/split licensing.
  • We can sell our plugin/theme independently or we can sell on marketplaces such as CodeCanyon or ThemeForest.

 

Theme Starter Alternatives

https://underscores.me/
The best free starter theme is underscores. It comes with a lot of templates and utility functions for getting you started. https://my.studiopress.com/themes/genesis/
Genesis is a premium starter template with a lot of support and big community.

WooCommerce Themes - Official WooCommerce Marketplace
Templates provided by WooCommerce.
 

Useful Libraries

https://github.com/gjunge/rateit.js

By on January 27th, 2021 in Web Development, WordPress Theme Design .

Tags
, , , , ,

Post Navigation