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
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() . '/jquery.fitvids.js'
);
Dependency
wp_enqueue_script(
'jquery-fitvids',
get_template_directory_uri() . '/jquery.fitvids.js',
array( 'jquery' ) // Dependencies
);
Define DEPENDENCIES
Use core scripts
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
Harmonize plugins and themes
Themes & Plugins in harmony
By Ulrich Pogson
Themes & Plugins in harmony
- 10,887