Themes development - martindubenet/Wordpress GitHub Wiki

Useful themes by Automattic

Underscores.me is a webapp that generates a starter theme developped by Automattic meant to be used as base to construct a parent theme from. This theme fundation is used by many ThemeForest products.
- Based on « _s » developped by Automattic.
- Requires npm and PHP Composer.
P2 theme is a theme developped by Automattic that turns a Wordpress site into a custom, privatly own, Twitter style wall of communications. Perfect for small business team communication.

Useful functions.php

Set-up function

Wrap the following options within a custom function.

if ( ! function_exists( 'yourThemeSlug_setup' ) ) :

    function yourThemeSlug_setup(){
        …
    }
endif;
add_action( 'after_setup_theme', 'yourThemeSlug_setup' );

Make theme available for translation (WPML). Translations can be filed in the /languages/ directory. This riquires your theme slug (yourThemeSlug) to be consistant accross all it's php files.

load_theme_textdomain( 'yourThemeSlug', get_template_directory() . '/languages' );

Let WordPress manage the document title.

add_theme_support( 'title-tag' );

Enable support for Post Thumbnails on posts and pages.

add_theme_support( 'post-thumbnails' );

Enable Excerpt (also) for pages

add_post_type_support( 'page', 'excerpt' );

Language

If only French language:

define('WPLANG', 'fr_FR');

But if the site is english OR bilingual:

define('WPLANG', 'en_CA');

Force domaine name

If you already know the domain name on PROD server you can encode it here:

define( 'WP_SITEURL', 'https://example.com' );

Load custom stylesheets

When developing custom theme we usualy rely on the basic /style.css file as a theme definition and load our own set of compiled Sass files within the /assets/css/ repository. To do so we load our custom (compiled) stylesheets using a custom function that will get within the DOM's <head> using the Wordpress wp_enqueue_scripts hook.

Master theme VS child theme's stylesheets

Master theme : get_template_directory_uri()
Child theme : get_stylesheet_directory_uri()

Step-by-step function explanations

Part 1 : Declare the function

/**
 * Enqueue scripts and styles within head tag.
 */
function myThemeHead_script() {

Part 2 : Are you browsing from a public server or from localhost (127.0.0.1)?

	// if DEV on localhost
	if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
		$myTheme_devOnLocalhost = true;
		$myTheme_fakeVersionNumber = date('yzHi.s'); // renewed every seconds
	} else {
		$myTheme_devOnLocalhost = false;
		$myTheme_fakeVersionNumber = date('y.W'); // renewed once a week.
	}

Part 3 : Declared all you custom stylesheets as variables

	// List all stylesheets
	wp_register_style( 'myTheme-minified', get_template_directory_uri() . '/dist/css/theme.min.css', array(), null, 'all' );
	wp_register_style( 'myTheme-local', get_template_directory_uri() . '/dist/css/theme.css', array(), $myTheme_fakeVersionNumber, 'all' );
	wp_register_style( 'myTheme-localmap', get_template_directory_uri() . '/dist/css/theme.css.map', array(), 
	$myTheme_fakeVersionNumber, 'all' );
	wp_register_style( 'myTheme-childtheme-minified', get_stylesheet_directory_uri() . '/dist/css/child-theme.min.css', array(), 
	$myTheme_fakeVersionNumber, 'all' );
	wp_register_style( 'myTheme-childtheme-local', get_stylesheet_directory_uri() . '/dist/css/child-theme.css', array(), 
	$myTheme_fakeVersionNumber, 'all' );
	wp_register_style( 'myTheme-childtheme-localmap', get_stylesheet_directory_uri() . '/dist/css/child-theme.css.map', array(), 
	$myTheme_fakeVersionNumber, 'all' );

Part 4 :

	// Enqueue all stylesheets
	wp_enqueue_style( 'wp_style', get_stylesheet_uri() );

Part 5 : Master VS Child theme, which stylesheets? Dev local VS minified from public server?

	// if DEV on localhost
	if ($myTheme_devOnLocalhost = true) {
		// IF this theme URI is not equal to parent theme URI
		if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
			// load the `child-theme.css`
			wp_enqueue_style( 'myTheme-childtheme-local' );
			wp_enqueue_style( 'myTheme-childtheme-localmap' );
		} else {
			// load the `theme.css`
			wp_enqueue_style( 'myTheme-local' );
			wp_enqueue_style( 'myTheme-localmap' );
		}
	} else {
		// IF this theme URI is not equal to parent theme URI
		if ( get_template_directory_uri() != get_stylesheet_directory_uri() ) {
			wp_enqueue_style( 'myTheme-childtheme-minified' );
		} else {
			wp_enqueue_style( 'myTheme-minified' );
		}
	}

Part 6 : Load underscores (_s) JavaScript files

	// underscores scripts
	wp_enqueue_script( 'myTheme-navigation', get_template_directory_uri() . '/dist/js/navigation.js', array(), $myTheme_fakeVersionNumber, true );
	wp_enqueue_script( 'myTheme-skip-link-focus-fix', get_template_directory_uri() . '/dist/js/skip-link-focus-fix.js', array(), $myTheme_fakeVersionNumber, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

Part 7 : Load my custom JavaScript file

	// custom scripts
	wp_enqueue_script( 'myTheme-ux', get_template_directory_uri() . '/dist/js/theme.js', array(), $myTheme_fakeVersionNumber, true );

Last part : Close the function

}
add_action( 'wp_enqueue_scripts', 'myThemeHead_script' );

Plugins

NPM packages for Wordpress theme

Installing the following plugins via NPM offers the advantage of setting a common ground for development. Those plugins will be available from within the node-modules/

Using Node NPM

Launch your Bash Terminal.

Change Directory $ cd to position yourself at the root of your theme's directory.

In the Bash Terminal type : $ npm install.

Install each of the following plugins using their $ npm command line.

Bootstrap
Font Awesome 5
Gulp and Gulp Sass for automating SASS compilation. — Adds way too much dependencies. I prefer to use Live Sass Compiler plugin in my VS Code editor.
~~jQuery~~ — Link to minified version on CDN instead.

Timber

Twig templating plugin for Wordpress Theme development using a more MVC approach.

Custom class

NavWalker

wp-bootstrap-navwalker : A custom WordPress Nav Walker Class to fully implement the Bootstrap 4 navigation style in a custom theme using the WordPress built in wp_nav_menu feature. Read more about it Proper WordPress menus with Bootstrap 4.

Code example

<?php
wp_nav_menu( array(
    'theme_location'	=> 'header-main-nav',
    'container'		=> 'section',
    'menu_id'		=> 'headerMainMenu',
    'menu_class'		=> 'collapse navbar-collapse',
    'walker'		=> new wp_bootstrap_navwalker()
) );
?>

Themes development - martindubenet/Wordpress GitHub Wiki

Useful themes by Automattic

Useful functions.php

Set-up function

Language

Force domaine name

Load custom stylesheets

Master theme VS child theme's stylesheets

Step-by-step function explanations

Plugins

NPM packages for Wordpress theme

Timber

Custom class

NavWalker

My wikis

⚠️ GitHub.com Fallback ⚠️

Themes development - martindubenet/Wordpress GitHub Wiki

Useful themes by Automattic

Useful functions.php

Set-up function

Language

Force domaine name

Load custom stylesheets

Master theme VS child theme's stylesheets

Step-by-step function explanations

Plugins

NPM packages for Wordpress theme

Timber

Custom class

NavWalker

My wikis

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️