Themes & Plugins in harmony

@grapplerulrich

Unique Namespace

// Before prefixing
function enqueue_scripts() {}

// Prefixed function
function prefix_enqueue_scripts() {}

// Unique name
function 19e9f0_enqueue_scripts() {}

Prefixing

Beautiful Vienna

beautiful_vienna_

breathtaking_vancouver_

bv_

Creating the prefix

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

2 functions 1 name

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


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

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?

~800 ~1 100 ~7 000 ~15 000

How many functions & hooks are there in WordPress Core?

~800 ~1 100 ~7 000 ~15 000

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() . '/js/jquery.fitvids.js'
);

Dependancy

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

Define dependancies

Use core scripts

function vienna_enqueue_customizer_scripts() {
    if ( is_archive() ) {
        wp_enqueue_style(
            'vienna-style',
            get_stylesheet_uri()
        );
    }
}
add_action(
    'wp_enqueue_scripts',
    'vienna_enqueue_scripts_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() . '/js/customizer.js'
    );
}
add_action(
    'customize_preview_init',
    'vienna_enqueue_scripts_styles'
);

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',
    '$(document).ready(function(){
        // Target your .container
        $("#thing-with-videos").fitVids();
    });'
);

Code snippets

Excerpt length

// Bad example
echo substr( get_the_excerpt(), 0, 200 );

Excerpt length

function vienna_excerpt_length( $length ) {
    if ( has_post_format( 'quote' ) ) {
        return 10;
    }
    return 20;
}
add_filter(
    'excerpt_length',
    'vienna_excerpt_length'
);

Content Filter

the_content(
    __( 'Continue reading', 'vienna' )
);

Content Filter

$content = get_the_content(
    __( 'Continue reading', 'vienna' )
);

echo $content;
function the_content( $more_link_text = null, $strip_teaser = false) {
    $content = get_the_content(
        $more_link_text,
        $strip_teaser
    );
 
    $content = apply_filters( 'the_content', $content );
    $content = str_replace( ']]>', ']]>', $content );
    echo $content;
}

the_content()

add_filter( 'the_content', 'wptexturize'                       );
add_filter( 'the_content', 'convert_smilies',               20 );
add_filter( 'the_content', 'wpautop'                           );
add_filter( 'the_content', 'shortcode_unautop'                 );
add_filter( 'the_content', 'prepend_attachment'                );
add_filter( 'the_content', 'wp_make_content_images_responsive' );
add_filter( 'the_content', 'do_shortcode',                  11 );

WP Core use of the_content

Content Filter

$content = get_the_content(
    __( 'Continue reading', 'vienna' )
);

$content = apply_filters( 'the_content', $content );

echo $content;

Copy of Themes & Plugins in harmony

By Ulrich Pogson

Copy of Themes & Plugins in harmony

  • 3,380