Misc notes for WordPress

Proper way to add js variables from php is to use localize script.

An efficient way of doing it:

First register the script at the beginning (main.js as an example).

 wp_register_script('main_script', 'main.js', array('jquery'), null, true);

1	wp_register_script('main_script', 'main.js', array('jquery'), null, true);

Then if any variables need to be added from php to js you create a call back for a custom filter:

function localize_admin_ajax_url($array) {
  $array['admin_ajax_url'] = admin_url('admin-ajax.php');
  return $array;
}
add_filter('localized_theme_vars', 'localize_admin_ajax_url');

function localize_admin_ajax_url($array) {

$array['admin_ajax_url'] = admin_url('admin-ajax.php');

return $array;

}

add_filter('localized_theme_vars', 'localize_admin_ajax_url');

That will add a js variable admin_ajax_url when the script is finally included. The nonce or any other data could be added as well.

Finally, we check the filter to see if any data has been added to it and if not we do not localize the script:

// Apply any filters that were added via add_filter
$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize!
    wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);
}

// After the check, we finally enqueue the script

wp_enqueue_script('main_script');

// Apply any filters that were added via add_filter

$localized_theme_vars = apply_filters('localized_theme_vars', array());

if($localized_theme_vars) { //only localize if we have something to localize!

wp_localize_script('main_script', 'localized_theme_vars', $localized_theme_vars);

}

// After the check, we finally enqueue the script

wp_enqueue_script('main_script');

Body and Post Class

WordPress provides body_class() and post_class() which will provide useful classes on both <body> and the individual post i.e. <article> that will give information to target things like specific post ids etc. The functions are to be used like :

// for body classes
// no need for class=""

<body <?php body_class() ?> >
</body>

// for individual post classes 
// no need for class=""

<article <?php post_class() ?> >
</article>

// for body classes

// no need for class=""

</body>

// for individual post classes

// no need for class=""

</article>

in_the_loop()

Useful for determining if the caller is within the loop. So for example, if you added an action to ‘loop_end’ to display something after the last of the loop using a condition with in_the_loop() it will make sure the contents of the action will only execute if it is within the main posts loop.

Including CSS/Javascript for a shortcode

As long as the styles/scripts are registered.. they can be actually en-queued within the actual short code code so that the script/styles will only actually load when the short code is used.

Conditionally enqueueing scripts/styles in admin area

When adding an action to ‘admin_enqueue_scripts’ to enqueue scripts, $hook is passed in to determine what page in the admin area you are on.

To test if you are on a certain plugin menu page you can create a global variable to check against the $hook.

Example:

// First, when creating the menu page.. also assign it to a new global variable:

function addMenuItem(){
    global $main_test_plugin_menu;
    $main_test_plugin_menu=add_menu_page('Test Plugin Menu Title','Test Plugin','manage_options','test_plugin_menu',__NAMESPACE__.'\\show_page');
}

// Then in the admin_enqueue_scripts function you create to add action
// use the global variable to check against $hook to check if
// the user is on the parent plugin for the script/style

function add_admin_scripts($hook)
{
    global $main_test_plugin_menu; // retrieve global variable 
    wp_register_script('main-admin-vue', PLUGIN_DIR_URL . 'js/vue.js',['jquery'],  time(),true);
    wp_register_script('main-admin-js', PLUGIN_DIR_URL . 'js/main.js',['main-admin-vue'],time(),true);

// Use global variable to check against $hookthe check, we finally enqueue the script

   if($hook==$main_test_plugin_menu){
    include PLUGIN_DIR.'inc\\template.php';
    wp_enqueue_script('main-admin-js');
    wp_enqueue_script('main-admin-vue');}
   }
}

add_action('admin_enqueue_scripts',  __NAMESPACE__.'\\add_admin_scripts');

// First, when creating the menu page.. also assign it to a new global variable:

function addMenuItem(){

global $main_test_plugin_menu;

$main_test_plugin_menu=add_menu_page('Test Plugin Menu Title','Test Plugin','manage_options','test_plugin_menu',__NAMESPACE__.'\\show_page');

}

// Then in the admin_enqueue_scripts function you create to add action

// use the global variable to check against $hook to check if

// the user is on the parent plugin for the script/style

function add_admin_scripts($hook)

{

global $main_test_plugin_menu; // retrieve global variable

wp_register_script('main-admin-vue', PLUGIN_DIR_URL . 'js/vue.js',['jquery'], time(),true);

wp_register_script('main-admin-js', PLUGIN_DIR_URL . 'js/main.js',['main-admin-vue'],time(),true);

// Use global variable to check against $hookthe check, we finally enqueue the script

if($hook==$main_test_plugin_menu){

include PLUGIN_DIR.'inc\\template.php';

wp_enqueue_script('main-admin-js');

wp_enqueue_script('main-admin-vue');}

}

add_action('admin_enqueue_scripts', __NAMESPACE__.'\\add_admin_scripts');

To help with removing render-blocking resources from javascript files:

function defer_parsing_of_js($url)
{
  if (is_admin()) return $url; 
  if (false === strpos($url, '.js')) return $url; 
  if (strpos($url, 'jquery.js')) return $url; 
  return str_replace(' src', ' defer src', $url);
}
add_filter('script_loader_tag', 'defer_parsing_of_js', 10);

/*

Doesn't attempt for admins/wp admin bar

Can add more lines for individual js files by name if we want to exclude from 
deffer.

Note the files will still load in the same order just all with deferred added.
*/

function defer_parsing_of_js($url)

{

if (is_admin()) return $url;

if (false === strpos($url, '.js')) return $url;

if (strpos($url, 'jquery.js')) return $url;

return str_replace(' src', ' defer src', $url);

}

add_filter('script_loader_tag', 'defer_parsing_of_js', 10);

Doesn't attempt for admins/wp admin bar

Can add more lines for individual js files by name if we want to exclude from

deffer.

Note the files will still load in the same order just all with deferred added.

Rewrite API and when/how to flush_rewrite_rules

The simplest solution is to delete the option that WordPress sets after building the rewrite rules upon the plugins activation and deactivation hooks. This will force WordPress to rebuild the rules that you may have added.

<?php
defined('ABSPATH') or exit;
/**
 * Plugin Name: Custom Endpoint Plugin
 * Description: To show when and how to flush rewrite rules
*/


register_activation_hook(__FILE__, array('api_custom_endpoint', 'activation_method'));
register_deactivation_hook(__FILE__, array('api_custom_endpoint', 'deactivation_method'));

class api_custom_endpoint
{
  
    function init()
    {
        add_action('init', array($this, 'add_rewrite_rules_for_api_custom_endpoint'));
        add_action('template_redirect', array($this, 'check_getuserlist_template_redirect'), 0);
    }


    function activation_method()
    {
        //forces WordPress to rebuild rewrite list
        delete_option('rewrite_rules');
    }

    function deactivation_method()
    {
        //forces WordPress to rebuild rewrite list
        delete_option('rewrite_rules');
    }

    function add_rewrite_rules_for_api_custom_endpoint()
    {
        add_rewrite_endpoint('newendpoint', EP_ROOT);

    }

    function check_getuserlist_template_redirect()
    {
        global $wp_query;

        // if not the root "/" of the site or if request doesn't contain getUsers.. don't redirect.
        if (!isset($wp_query->query_vars['newendpoint']) )
            return;

        // include custom template if it passes newendpoint in url check
        include dirname(__FILE__) . '/newendpointtemplate.php';
        exit;
    }
}


// running init

$app = new api_custom_endpoint();
$app->init();

<?php

defined('ABSPATH') or exit;

/**

* Plugin Name: Custom Endpoint Plugin

* Description: To show when and how to flush rewrite rules

register_activation_hook(__FILE__, array('api_custom_endpoint', 'activation_method'));

register_deactivation_hook(__FILE__, array('api_custom_endpoint', 'deactivation_method'));

class api_custom_endpoint

{

function init()

{

add_action('init', array($this, 'add_rewrite_rules_for_api_custom_endpoint'));

add_action('template_redirect', array($this, 'check_getuserlist_template_redirect'), 0);

}

function activation_method()

{

//forces WordPress to rebuild rewrite list

delete_option('rewrite_rules');

}

function deactivation_method()

{

//forces WordPress to rebuild rewrite list

delete_option('rewrite_rules');

}

function add_rewrite_rules_for_api_custom_endpoint()

{

add_rewrite_endpoint('newendpoint', EP_ROOT);

}

function check_getuserlist_template_redirect()

{

global $wp_query;

// if not the root "/" of the site or if request doesn't contain getUsers.. don't redirect.

if (!isset($wp_query->query_vars['newendpoint']) )

return;

// include custom template if it passes newendpoint in url check

include dirname(__FILE__) . '/newendpointtemplate.php';

exit;

}

// running init

$app = new api_custom_endpoint();

$app->init();

Change the placeholder for Add Title field on custom post type:

function change_title_text( $title ){
     $screen = get_current_screen();
   
     if  ( 'word' == $screen->post_type ) {
          $title = 'What is the new word?';
     }
   
     return $title;
}
   
add_filter( 'enter_title_here', 'change_title_text' );

function change_title_text( $title ){

$screen = get_current_screen();

if ( 'word' == $screen->post_type ) {

$title = 'What is the new word?';

}

return $title;

}

add_filter( 'enter_title_here', 'change_title_text' );

Custom Excerpt

function custom_excerpt_bn($text) { // Fakes an excerpt if needed
$excerpt = get_the_content();
$excerpt = strip_shortcodes($excerpt);
$excerpt = strip_tags($excerpt,'<p>');
$excerpt = substr($excerpt, 0, 150);
$excerpt = substr($excerpt, 0, strripos($excerpt, " "));
$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));
$excerpt = $excerpt.' ...';
return $excerpt;
}
/* remove the default filter */
remove_filter('get_the_excerpt', 'wp_trim_excerpt');
/* now, add your own filter */
add_filter('get_the_excerpt', 'custom_excerpt_bn');

function custom_excerpt_bn($text) { // Fakes an excerpt if needed

$excerpt = get_the_content();

$excerpt = strip_shortcodes($excerpt);

$excerpt = strip_tags($excerpt,'<p>');

$excerpt = substr($excerpt, 0, 150);

$excerpt = substr($excerpt, 0, strripos($excerpt, " "));

$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));

$excerpt = $excerpt.' ...';

return $excerpt;

}

/* remove the default filter */

remove_filter('get_the_excerpt', 'wp_trim_excerpt');

/* now, add your own filter */

add_filter('get_the_excerpt', 'custom_excerpt_bn');

Online Journal

My online journal about design and development related topics and what I've learned.

Misc notes for WordPress