Themes & Plugins in harmony

@grapplerulrich

Fatal error: Cannot redeclare enqueue_scripts() (previously declared)

// plugin.php
function enqueue_scripts() {}

// Theme functions.php
function enqueue_scripts() {}

2 functions 1 name

Unique Namespace

// Before prefixing
function enqueue_scripts() {}

// Prefixed function
function prefix_enqueue_scripts() {}

Prefixing

Beautiful Vienna

beautiful_vienna_

breathtaking_vancouver_

bv_

Creating the prefix

function vienna_enqueue_scripts() {}

Prefix functions

• PHP function names

• PHP class names

• PHP global variables

• PHP Constants

// PHP Class
class Vienna_Class() {

    // Exception: Function within a class
    public function init() {}

}

// PHP global
global $vienna_version;

// PHP Constants
define( 'VIENNA_SUPER_MODE', true );

function vienna_content_width() {
    $content_width = apply_filters(
        'vienna_content_width', // Filter name
        640
    );
}

function vienna_launch() {
    do_action(
        'vienna_launch', // Action name
        $date,
        $time
    );
}

Hooks

add_image_size( 'vienna-full-width', 1000, 500 );

add_option( 'vienna_settings', '255' );

add_menu_page(
    __( 'Custom Page Title', 'vienna' ),
    __( 'Custom Menu Title', 'vienna' ),
    'manage_options',
    'vienna-settings', // unique page slug
    '',
    'dashicons-chart-pie',
    6
);

wp_enqueue_style(
    'style', // style handle
    get_stylesheet_uri()
);

Enqueue

wp_enqueue_style(
    'vienna-style',
    get_stylesheet_uri()
);

Prefix the handle

wp_enqueue_script(
    'jquery-fitvids',
    get_template_directory_uri() . '/jquery.fitvids.js'
);

Don't Prefix Third Party Scripts

github.com/grappler/wp-standard-handles

wp_enqueue_script( 'jquery-fitvids' );
wp_localize_script(
    'jquery-fitvids',
    'vienna_data', // Object name
    array(
        'title' => __( 'WCEU is great!', 'vienna' ),
    )
);

Localize Script

 // alerts 'WCEU is great!'
alert( vienna_data.title );

• PHP FUNCTION NAMES

• PHP CLASS NAMES

• PHP GLOBAL VARIABLES

• PHP CONSTANTS

• Hooks

• add_image_size

• add_option

• add_menu_page

• wp_enqueue_style

• wp_localize_script

How many functions & hooks are there in WordPress Core?

How many functions & hooks are there in WordPress Core?

USE Core Features

<script src="<?php echo get_template_directory_uri(); ?>/fitvids.js">
</script>

Loading Scripts

wp_enqueue_script(
    'jquery-fitvids',
    get_template_directory_uri() . '/jquery.fitvids.js'
);

Enqueue Scritps

wp_enqueue_script( 'jquery' );
wp_enqueue_script(
    'jquery-fitvids',
    get_template_directory_uri() . '/jquery.fitvids.js'
);

Dependency

wp_enqueue_script(
    'jquery-fitvids',
    get_template_directory_uri() . '/jquery.fitvids.js',
    array( 'jquery' ) // Dependencies
);

Define DEPENDENCIES

Use core scripts

List of scripts in core

function vienna_enqueue_styles() {
    if ( is_archive() ) {
        wp_enqueue_style(
            'vienna-style',
            get_stylesheet_uri()
        );
    }
}
add_action(
    'wp_enqueue_scripts',
    'vienna_enqueue_styles'
);

Front End

function vienna_admin_scripts( $hook_suffix ) {
    // Only load on edit.php
    if ( 'edit.php' !== $hook_suffix ) {
        return;
    }
    wp_enqueue_script(
        'vienna-admin',
        get_template_directory_uri() . '/admin.js',
    );
}
add_action(
    'admin_enqueue_scripts',
    'vienna_admin_scripts'
);

Admin area

function vienna_enqueue_customizer_scripts() {
    wp_enqueue_script(
        'vienna-customizer',
        get_template_directory_uri() . '/customizer.js'
    );
}
add_action(
    'customize_preview_init',
    'vienna_enqueue_customizer_scripts'
);

Customizer

// Load the html5 shiv.
wp_enqueue_script(
    'vienna-html5',
    get_template_directory_uri() . '/js/html5.js',
);
wp_script_add_data(
    'vienna-html5',
    'conditional',
    'lt IE 9'
);

CONDITIONAL Loading

wp_enqueue_script( 'jquery-fitvids' );
wp_add_inline_script(
    'jquery-fitvids',
    'jQuery(document).ready(function(){
        // Target your .container
        $("#thing-with-videos").fitVids();
    });'
);

Code snippets

• Unique Namespace

• Use core features

Ulrich Pogson

@grapplerulrich

slides.com/ulrichpogson/themes-plugins-harmony

Harmonize plugins and themes