Skip to content

WordPress (dev)

September 29, 2023
June 21, 2015

WordPress › Make WordPress
WordPress › Handbook « Make WordPress Core
Reference | WordPress Developer Resources

WordPress Web Design Tutorials by Envato Tuts+
How Does WordPress Work?
Set Up Your Blog With WordPress: The Ultimate Guide

Why we switched from Wordpress to Node.js - Solitaired

Resources

Developer Documentation « WordPress Codex
WordPress Development Stack Exchange
Instant WordPress

EasyEngine - WordPress On Nginx Made Easy!
Roots | Modern WordPress Development

How To Make a WordPress Website - WordPress Tutorials - WordPress Crash Course - YouTube Karl Hadwen

26 Key WordPress Skills You Need for a Successful Website (2022)

WP-CLI

Command line interface for WordPress | WP-CLI
Toolbox of the Smart WordPress Developer: WP-CLI - Tuts+ Code Tutorial
How to Install and Use WP-CLI to Manage a WordPress Blog
Tools – WP-CLI — WordPress.org

WP API (PHP)

Category:API « WordPress Codex

Plugin API « WordPress Codex
Widgets API « WordPress Codex
Shortcode API « WordPress Codex
Settings API « WordPress Codex
Options API « WordPress Codex
Dashboard Widgets API « WordPress Codex
Rewrite API « WordPress Codex

WP API (REST)

WordPress moved to a REST API (/wp-json/wp/v2/) in 2016.

REST API Handbook | WordPress Developer Resources
REST API Resources | Developer Resources WordPress.com
WordPress REST API on WordPress.com | Developer Resources
whats-new-wpcom2.pdf

Headless WordPress and Headless CMS - WebDevStudios
Is Headless WordPress the Right Solution for You? - WebDevStudios
Why Is Headless WordPress Trending? - WebDevStudios
REST API and How It Could Change WordPress Forever
The Complete Guide to WordPress REST API Basics

Using WordPress as a headless CMS
Headless WordPress: Taking Posts Anywhere - WebDevStudios
How to Build a Custom Dashboard with WordPress APIs and React

Watch and Learn
WP REST API - YouTube
Theming with WP REST API - YouTube

Calypso (admin on REST API)

Introducing the New WordPress.com
Automattic/wp-calypso: The new JavaScript- and API-powered WordPress.com

The Story Behind the New WordPress.com | Developer Resources
Dance to Calypso | Matt Mullenweg
Clearing the air: Is WordPress being rewritten in Node.js and React? | Wes Bos

#197: The Future of WordPress and Calypso with Matt Mullenweg - Changelog

WordPress Blocks

introduction of Block and Site Editor is too much change
Not Sure How to WordPress Anymore? | CSS-Tricks - CSS-Tricks

WordPress Block Editor – WordPress.org Forums
Site Editor – WordPress.org Forums

Getting Started With WordPress Block Development | CSS-Tricks - CSS-Tricks
Rendering External API Data in WordPress Blocks on the Front End | CSS-Tricks - CSS-Tricks
Creating a Settings UI for a Custom WordPress Block | CSS-Tricks - CSS-Tricks

WPGraphQL

Home | WPGraphQL
Headless Wordpress with React and GraphQL - NaNLABS

Using Next.js, WebDevStudios Built a 1,000 Page Headless WordPress Website - WebDevStudios
Next.js WordPress Starter | Next.js WordPress Starter
Next.js WordPress Starter
WebDevStudios/nextjs-wordpress-starter: A headless starter for WordPress powered by Next.js.
Building the Next.js 9.4 WordPress Example - WebDevStudios

WordPress Headless CMS + GraphQL
Loading WordPress posts in Next.js
Rendering all WordPress pages in Next.js
Retrieving the primary WordPress menu in Next.js

Headless WordPress themes

WordPress and React - Using ReactJS with WordPress - Tutorials
WordPress + Create React App Integration | by Ben Broide | The Startup | Medium

Next.js WordPress Starter
colbyfayock/next-wordpress-starter: 📝 Bring WordPress to the static world with Next.js
Next.js with Headless WordPress - GraphQL Queries with WPGraphQL & Deploy to Netlify - YouTube
Advanced Custom Fields & Headless WordPress - ACF with WPGraphQL & Next.js - YouTube

ylletjs/yllet: Yllet is a set of packages for the WordPress API for both React and non-React projects

The Headless WordPress Framework | Faust.js
Faust.js, The Framework For Headless WordPress

10 WordPress Themes Built with React JS
SEO for Headless WordPress Themes

React WordPress Theme Development: Benefits and Drawbacks | Blog – PSD2HTML®
Using Wordpress with React js | Tim Smith

How To Build A Skin For Your Web App With React And WordPress — Smashing Magazine extending WordPress API
m-muhsin/celestial: A WordPress theme using React 16, Bootstrap 4 and Webpack 3

carrieforde/Aurora-Theme: A clean, modern React-powered WordPress theme.

Livog/core-theme: Wordpress REST API theme. Good base for making your Wordpress site into a content API instead. Mostly used with third-party JS frameworks like Vue.js, React or Angular.

J3duardo/wp-react-gallery React Hooks

ShashwatMittal/react-wordpress-theme: A React based WordPress theme using the WordPress Rest API.

ryelle/Foxhound: A text-focused blog theme for WordPress (in React)

devloco/create-react-wptheme: Create modern, React-enabled WordPress themes with a single command.
Let’s build a WordPress theme with React: Part 1 (Setup) | Michael Soriano
Let’s build a WordPress theme with React: Part 2 (Routes + Context) | Michael Soriano
Let’s build a WordPress theme with React: Part 3 (The Loop) | Michael Soriano
michaelsoriano/barebones: React based WordPress Theme, built with create-react-wptheme. This is a starter theme with just the core WordPress functionality.

humanmade/react-wp-scripts: Integrate create-react-app with your WordPress theme/plugin.

imranhsayed/woo-next: React WooCommerce theme, built with Next JS, Webpack, Babel, Node, Express, using GraphQL and Apollo Client

Fresh WordPress Themes

Introducing Fresh WordPress Themes
denoland/fresh-wordpress-themes: https://wp-blog-example.deno.dev/ https://wp-sweets-co.deno.dev/

Frontity

Using WP as headless CMS with React frontend

Frontity - Create Amazing Sites using WordPress & React JS
» Frontity Framework - Frontity
Introduction to Frontity Framework with Pablo Postigo - YouTube

Frontity, a React framework to create WordPress themes
Building a blog using Frontity and WordPress
How To Build A Skin For Your Web App With React And WordPress — Smashing Magazine
Frontity is React for WordPress | CSS-Tricks
Creating a Headless WordPress Site With Frontity | CSS-Tricks

Connecting Gutenberg and Frontity

frontity-demos/frontity-examples: A monorepo consisting of a number of different projects each of which is intended to demonstrate how to achieve a particular task using Frontity.
imranhsayed/frontity-twentynineteen: A Frontity Twentynineteen theme Project
awsmin/f1: AWSM F1 - WordPress Frontity Theme

Headless CMS

plugin to provide different API then WP API

Headless CMS WordPress Plugin - Codeytek Academy
imranhsayed/headless-cms: ❤️ A WordPress plugin that adds features to use WordPress as a headless CMS with any front-end environment using REST API

imranhsayed/react-wordpress-theme: A React theme for WordPress, using Decoupled Architecture. Front end in React. Backend in WordPress.
imranhsayed/gatsby-wordpress-themes: 🎨 Gatsby WordPress Theme

WordPress Dev Environment

Local - Local WordPress development made simple
WP Engine Makes Local Pro Free for All Users – WP Tavern

Eightshift Development kit | Eightshift Development kit

Jetpack

Jetpack — Essential Security & Performance for WordPress

Say Hello To 165 Beautiful Free Themes
Four Jetpack Features Worth Exploring
Photon 免費 CDN 圖片分流、加速服務,每個 WordPress 用戶都該開啟的外掛
[教學] 為 WordPress 開啟「單一登入」機制,讓網站更安全

Multisite

How to manage multiple WordPress sites | GoDaddy

WordPress Multisite Domain Mapping | WordPress.org
How to Install and Setup WordPress Multisite Network
WordPress Multisite vs. Multiple Sites - ManageWP
Managing Multiple Sites: WordPress Multisite vs Separate Installations | Beaver Builder

WordPress scripts & dev tools that save you time - GoDaddy Blog
9 tools for managing multiple WordPress sites - GoDaddy Blog
How You Can Easily Manage Multiple WordPress Sites - Pressable

Sites

Digging Into WordPress | Take your WordPress skills to the next level.
WordPress Arena
WordPress News, Hacks, Tips, Tutorials, Plugins and Themes - WP Engineer
WPBeginner - Beginner's Guide for WordPress
WordPress Hacks - WP Engineer
WP Smith - My Journey with WordPress & Genesis
Home - Pippins Plugins

Books

WPDK
WordPress The Right Way
雅戈的 WordPress 教程

Tips

Stupid WordPress Tricks | Perishable Press
WordPress constants overview - WP Engineer
14 Most Common WordPress Errors and How to Fix Them
Some of the most common Mistakes in Blogging | WordPress Arena
Excluding your plugin or theme from update checks | Mark on WordPress
What’s the difference between __(), _e(), _x(), and _ex()? - WP Engineer

WordPress Tutorials - WP Engineer

How to Get a Free SSL Certificate & Setup your WordPress Site to use HTTPS
How to Optimize your WordPress Images for Mobile
5 Easy Ways to Speed up WordPress for Mobile
4 Advanced Tactics to Optimize WordPress for Mobile
8 Reasons Why Your WordPress Site Is Running Slow (And How to Fix Them)

wp-config.php

Editing wp-config.php « WordPress Codex

# show error on screen
define('WP_DEBUG', true)

# disable revision
define('WP_POST_REVISIONS', false)

# for debugging theme
define('SAVEQURIES', true)
# in theme
if (current_user_can('manage_options')) {
    global $wpdb;
    print_r($wpdb->quries);
}

# force SSL
define('FORCE_SSL_LOGIN', true)
define('FORCE_SSL_ADMIN', true)

Security

Security Measures to keep WordPress powered Websites more Secure | WordPress Arena

22 Must Follow WordPress Security Tips - Bloggersignal

Important Security Fix for WordPress | Perishable Press

Changing File Permissions « WordPress Codex

How To Change Wordpress Default 'Admin" Username

How to prevent access to WordPress Administration Menu items | WordPress Arena

Making your WordPress site More Secure by Adding HTTPS and SSL | WordPress Arena
How To Use SSL & HTTPS With WordPress | Elegant Themes Blog
Options for SSL in WordPress - Tuts+ Code Tutorial
SSL and Cookies in WordPress 2.6 | Ryan Boren

Restricted Login Access

Secure WordPress with IP restricted access
How to Restrict IP Addresses to Login on WordPress Dashboard
How to Limit Access by IP to Your wp-login.php file in WordPress

In .htaccess file of the WordPress directory:

# Limit access by IP address
<Files wp-login.php>
        order deny,allow
        Deny from all

# whitelist IP address one
allow from xx.xxx.xx.xxx

# whitelist IP Address two
allow from xx.xxx.xx.xxx
</Files>

Insert Sample Data

Function Reference « WordPress Codex
Function Reference/wp insert category « WordPress Codex
Function Reference/wp insert term « WordPress Codex
Function Reference/wp insert post « WordPress Codex
Function Reference/wp trash post « WordPress Codex

themes/exclusive/admin/install_sampl_date.php

//Check if category already exists
$cat_ID = get_cat_ID( $category );

//If it doesn't exist create new category
if($cat_ID == 0) {
    $my_cat = array(
        'cat_name' => 'My Category',
        'category_description' => 'A Cool Category',
        'category_nicename' => 'category-slug',
        'category_parent' => '',
        'taxonomy' => 'category'
    );

    $my_cat_id = wp_insert_category($my_cat);
}

// this is practically what wp_insert_category() does underneath
if(!term_exists('sample-category')) {
    wp_insert_term(
        'Sample Category',
        'category',
        array(
          'description' => 'This is an sample category.',
          'slug'        => 'sample-category'
        )
    );
}

Plugins

Plugins « WordPress Codex

WordPress › WordPress Plugins
Writing a Plugin « WordPress Codex
Plugin API « WordPress Codex
How To Improve WordPress Plugins - WP Engineer

The WordPress Plugin Boilerplate | A Foundation For Building High-Quality WordPress Plugins
Developing Plugins With WordPress Boilerplates: Why Boilerplates Matter - Tuts+ Code Article
Developing Plugins With WordPress Boilerplates: Building a Plugin - Tuts+ Code Article

Aesop Story Engine
Helpful Wordpress Plugins | Linux.org
Top 20 Useful WordPress ShortCode Plugins | Web Development Tutorials and Resources @ ScratchingInfo

Themes

Theme Development « WordPress Codex
WordPress › Getting Started | Theme Developer Handbook | WordPress Developer Resources
A Beginners Guide to the WordPress Template Hierarchy | Learn WordPress

Theme Customization API « WordPress Codex
Stepping into Templates « WordPress Codex
Template Tags « WordPress Codex
Theme Features « WordPress Codex

Writing Maintainable WordPress Themes - Tuts+ Code Tutorials
Freemius - The new standard in selling WordPress plugins and themes

Writing Maintainable WordPress Themes | Tom McFarlin
Separation of Concerns with WordPress Templates | Tom McFarlin
A Rule of Thumb for WordPress Partials | Tom McFarlin
Adding Scripts and Styles to WordPress the Right Way With Enqueueing - WPMU DEV

10 Checks to the Perfect WordPress theme - WP Engineer

Widgetizing Themes — Automattic
Widgetizing Themes « WordPress Codex

Easily Adaptable WordPress Loop Templates: Basic Loops, Mullet Loops, and More.. | Perishable Press

Also see Widgets

categories - Direct link to category? - WordPress Development Stack Exchange
Linking Posts Pages and Categories « WordPress Codex

Customizing Theme

Deactivate WordPress Default Widgets - WP Engineer

WordPress › Customizer Framework « WordPress Plugins
WordPress › Custom Sidebars « WordPress Plugins
WordPress › Stag Custom Sidebars « WordPress Plugins
WordPress › Easy Custom Sidebars « WordPress Plugins

Adding Sidebar

Function Reference/register sidebars « WordPress Codex
Function Reference/dynamic sidebar « WordPress Codex

Define sidebar in functions.php:

register_sidebar(array(
    'name' => __('MySidebar', 'theme'),
    'id' => 'my-sidebar',
    'description' => __('this is a custom sidebar', 'theme'),
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div>',
    'before_title' => '<span class="sidebar-title">',
    'after_title' => '</span><div class="dots"></div>'
))

Add to the desired location in the theme:

<div id="sidebar">
  <?php if ( !dynamic_sidebar("my-sidebar") ) : ?>
  <div class="sidebar-box">
    <span class="sidebar-title">MySidebar</span>
    <p>Add Widgets to the sidebar 'MySidebar'</p>
  </div>
  <?php endif; ?>
</div>
<!-- sidebar -->

Different sidebar depending on page, usually in sidebar.php:

<?php
<div id="sidebar">
if ( is_front_page() ) { if ( !dynamic_sidebar("front-page-sidebar") ) : ?>
<li>front-page-sidebar is empty</li>
<?php endif; } elseif ( is_category('news') || in_category('news') ) { if (
!dynamic_sidebar("news-sidebar") ) : ?>
<li>news-sidebar is empty</li>
<?php endif; } elseif ( is_single() ) { // is_singular() for both Posts/Pages if
( !dynamic_sidebar("post-sidebar") ) : ?>
<li>post-sidebar is empty</li>
<?php endif; } elseif ( is_page() ) { if ( !dynamic_sidebar("page-sidebar") ) :
?>
<li>page-sidebar is empty</li>
<?php endif; } ?>

Adding Nav Menu

Function Reference/register nav menus « WordPress Codex
Function Reference/wp nav menu « WordPress Codex

Define nav_menu in functions.php:

register_nav_menus( array(
    'top-navigation' => __('Top Navigation', 'theme')
) );

Add to the desired location in the theme:

<div id="header-bottom"><?php wp_nav_menu('top-navigation') ?></div>

Customizer

» The WordPress Theme Customizer: a Comprehensive Developer’s Guide
A Guide to the WordPress Theme Customizer - Tuts+ Code Tutorials
Digging Into the Theme Customizer - Tuts+ Code Tutorials

paulund/wordpress-theme-customizer-custom-controls

Customizer: Theme as documentation
bueltge/Documentation
The Customizer on Vimeo
WordPress Theme Customizer Custom Controls - WP Engineer

Framework

Thematic, A WordPress Theme Framework | ThemeShaper
Hybrid Core WordPress theme framework
Whiteboard Framework for WordPress
Roots | Modern WordPress Development
Wonderflux - WordPress free, open source theme framework
Astra – Fast, Lightweight & Customizable Free WordPress Theme - Download Now!

How Theme Frameworks Actually Work - Tuts+ Code Tutorials

Theme Hybrid: A WordPress theme club
Bones - The HTML5 Wordpress Starter Theme
Responsive WordPress Theme WP-Forge

ThemeShaper

The ThemeShaper WordPress Theme Tutorial: 2nd Edition | ThemeShaper
What Do You Really Need in a WordPress Starter Theme? | ThemeShaper
Underscores.me — The Best Way To Get Started With The _s Theme | ThemeShaper
Thematic, A WordPress Theme Framework | ThemeShaper
Automattic/_s

The Loop

The Loop selects content from MySQL database (typically with query based on URL). It is the link between the theme and the contents in database. WordPress is using the Loop anywhere content is displayed.

Simplest Loop:

// these functions uses global variable `WP_Query $wp_query`
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        // content is available
    endwhile;
endif;

Writing Clean, Maintainable Custom WordPress Queries | Tom McFarlin
How To Setup Custom Queries For WP_Query Pagination | Tom McFarlin
Separation of Concerns: Queries and Helper Functions | Tom McFarlin

wp query - When should you use WP_Query vs query_posts() vs get_posts()? - WordPress Development Stack Exchange

Mastering WP_Query - Tuts+ Code Tutorials

Settings

Settings API « WordPress Codex
Sanitization with the WordPress Settings API | Tom McFarlin
The Complete Guide To The WordPress Settings API - Tuts+ Code Tutorials

Child Themes

You can easily inherit from an existing theme and override the functions.
But the theme may not be child friendly (e.g.: using get_template_directory() instead of get_stylesheet_directory(), not using get_template_part()). And my experience is that overriding files may cause the child theme to breakdown altogether.
I now prefer make a copy of the desired theme, change the code directly and track the modification via git.

Child Themes « WordPress Codex
How To Modify WordPress Themes The Smart Way | ThemeShaper
How to Create a WordPress Child Theme - WPMU DEV

What is a WordPress Child Theme? Pros, Cons, and More
WordPress › Support » Overriding parent theme sub-files with a child theme. HOW?
WordPress › Support » Child Themes and PHP pages

Widgets

WordPress Widgets « WordPress Codex

Build A WordPress 2.8 Widget With The New Widget API - WP Engineer

Embedding React

@wordpress/scripts | Block Editor Handbook | WordPress Developer Resources
How to Add a React App to WordPress Pages | by popEating | Jan, 2022 | JavaScript in Plain English

Taxonomies

The Beginner’s Guide to WordPress Taxonomies - Tuts+ Code Tutorials
The Tuts+ Guide to Template Tags - Tuts+ Code Tutorials
A Walkthrough on Conditional Tags in WordPress - Tuts+ Code Tutorials

Custom Post Type UI – WordPress plugin | WordPress.org

Tuts+

WordPress - Tuts+ Code Category
Tools of the Smart WordPress Developer - Tuts+ Code Tutorials

The Complete Guide To The WordPress Settings API - Tuts+ Code Tutorials
Making the Perfect WordPress Theme - Tuts+ Code Tutorials
Quick Tips to Boost Your WordPress Website's Speed - Tuts+ Code Tutorials
A Beginner’s Guide to Using WordPress - Tuts+ Course
The Beginner's Guide to Selecting a WordPress Theme - Tuts+ Code Article
Trim the Bloat: Keeping WordPress Healthy - Tuts+ Code Tutorials
Fifty Actions of WordPress - Tuts+ Code Tutorials
Understanding and Working with Data in WordPress - Tuts+ Code Tutorials