Category Archives: WordPress

Misc notes for WordPress

Posted in WordPress on November 15, 2018 by rowej83.

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');

Elementor Notes

Posted in WordPress on November 5, 2018 by rowej83.

For issues where the buttons don’t align, the CSS provided below can fix it either using Flexbox or Grid depending on how many items are in the container.

/*Option 1 - Flex Grid for 2 elements*/ 

.db-flex-column .elementor-widget-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } 

/*Option 2 - CSS Grid for multiple elements*/

.db-grid-column .elementor-widget-wrap { display: grid; grid-template-rows: 1fr 2fr 2fr 1fr; }

/*Option 1 - Flex Grid for 2 elements*/

.db-flex-column .elementor-widget-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/*Option 2 - CSS Grid for multiple elements*/

.db-grid-column .elementor-widget-wrap { display: grid; grid-template-rows: 1fr 2fr 2fr 1fr; }

Make hero image full screen under header

height: calc(100vh - 100px);
/* assuming header height is 100px */

1 2	height: calc(100vh - 100px); /* assuming header height is 100px */

WordPress – Making a custom type not have a url

Posted in WordPress on October 2, 2018 by rowej83.

Custom post type should have below settings:

‘rewrite’ => false,
‘query_var’ => false,
‘publicly_queryable’ => false,
‘public’ => false

Explanation of each:

rewrite Triggers the handling of rewrites for this post type. To prevent rewrites, set to false.

query_var ‘false’ – Disables query_var key use. A post type cannot be loaded at /?{query_var}={single_post_slug}

publicly_queryable Whether queries can be performed on the front end as part of parse_request().

public ‘false’ – Post type is not intended to be used publicly and should generally be unavailable in wp-admin and on the front end unless explicitly planned for elsewhere.

Go to Permalinks Settings and without changing anything – save change. It will rebuild your “routing”.

Source: https://stackoverflow.com/questions/19747096/remove-url-structure-for-custom-post-type

Default WordPress htaccess to enforce SSL

Posted in WordPress on April 11, 2018 by rowej83.

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

RewriteEngine On

RewriteCond %{HTTPS} !=on

RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# BEGIN WordPress

RewriteEngine On

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

To have a redirect to non www with https can do the following:

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]

RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

RewriteCond %{HTTPS} !on

RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Notes for using Ajax in WordPress

Posted in WordPress on January 25, 2018 by rowej83.

While in WordPress admin area.. the variable named ajaxurl is available for javascript scripts to use for the url for ajax. Every call must at the very least have an “action” data property passed to WordPress in order for it to know which function will be used on the back-end to complete the ajax request.

// when in the WordPress admin area. the variable "ajaxurl" is available that
// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.
// also wp_ajax_nopriv action must also have the php ajax function tied to it 
// in case the user that is visiting is not logged in.

var datasent={
'action':'method_that_handles_the_ajax_request',
'address':'555 street'
};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script 

$.post(ajaxurltowp, datasent,function(response){
// response is what is sent back from the server for the ajax request.

});

// when in the WordPress admin area. the variable "ajaxurl" is available that

// points to /wp-admin/admin-ajax.php which handles all ajax requests.

// if the user is not logged in then the ajaxurl is not automatically passed.

// also wp_ajax_nopriv action must also have the php ajax function tied to it

// in case the user that is visiting is not logged in.

var datasent={

'action':'method_that_handles_the_ajax_request',

'address':'555 street'

};

// in this example we manually set a ajaxurl in case the user isn't logged in.

var ajaxurltowp=site_vars.ajaxurl; // passed in from localize wp script

$.post(ajaxurltowp, datasent,function(response){

// response is what is sent back from the server for the ajax request.

});

The associated php that would be needed to process above :

<?php

function handle_request(){
$address=$_POST["address"]; // grab field sent via ajax
//do something here
// all functions that handle ajax must die() at the end of the function.
die();

}

//adding action assuming not in a namespace.
add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in
add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

<?php

function handle_request(){

$address=$_POST["address"]; // grab field sent via ajax

//do something here

// all functions that handle ajax must die() at the end of the function.

die();

}

//adding action assuming not in a namespace.

add_action('wp_ajax_method_that_handles_the_ajax_request','handle_request');

// adding action for visitors who are no logged in

add_action('wp_ajax_nopriv_method_that_handles_the_ajax_request','handle_request');

Any ajax request must be handles by a function which has to be added via add_action

Note that any action you specify in the ‘action’ field for the data sent to the server will have ‘wp_ajax_’ prepended to the actions name.

Also need to bind to the action prefix ‘wp_ajax_nopriv’ so that the ajax will still work for visitors who are not logged in.

So the action ‘method_that_handles_the_ajax_request’ will have to be added in php as ‘wp_ajax_method_that_handles_the_ajax_request’ as seen in the php snippet.

If the action can not be found by admin-ajax.php the response returned from the ajax request will be an integer of zero ( 0 ).

If you created an ajax action method properly and you keep receiving a 0 response…confirm that your ajax action method was added.

//if were in a namespace would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:
add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

//if were in a namespace would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',__NAMESPACE__.'\\handle_request');

//if were in a class would have to do the following:

add_action('wp_ajax_method_that_handles_the_ajax_request',array($this,'handle_request'));

Any function in php that handles a ajax request MUST end with die();

Within the php function, any post variable that is passed via the ajax data field, in our case the ‘address’ or ‘action’ field, is available via $_POST[“address”] or $_POST[“action”]

wp_localize_script

Used to add data to javascript that is normally only available on server side. Has to be used after an enqueue of a script and use the same “handle”. It will make the variables passed via localize_script available to the rest of the javascript that was enqueued.

Typically, this is used for nuances

Example of adding the nuances

<?php

// Register the script
wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data
// ajaxurl is passed in manually in case the visitor
// is not logged in - wordpress does not automatically
// populate ajaxurl if the user is not logged in

$sites_variables = array(
	'site_nonce' => wp_create_nonce('site_nonce'),
         'ajaxurl'=> admin_url( 'admin-ajax.php' ) 
	);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.
wp_enqueue_script( 'the_handle' );

<?php

// Register the script

wp_register_script( 'the_handle', 'path/to/myscript.js' );

// Localize the script with new data

// ajaxurl is passed in manually in case the visitor

// is not logged in - wordpress does not automatically

// populate ajaxurl if the user is not logged in

$sites_variables = array(

'site_nonce' => wp_create_nonce('site_nonce'),

'ajaxurl'=> admin_url( 'admin-ajax.php' )

);

wp_localize_script( 'the_handle', 'site_vars', $sites_variables );

// Enqueued script with localized (nonce ) data.

wp_enqueue_script( 'the_handle' );

Another way to add it when there are times where an additional script isn’t needed could be done in the following way.

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>
    <script type="text/javascript">
        var site_variables = {
        'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>
        };
    </script><?php
}
add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

function add_nonce_variable_in_javascript_to_admin_head_area(){ ?>

var site_variables = {

'site_nonce':<?php echo json_encode(wp_create_nonce("site_nonce")); ?>

};

</script><?php

}

add_action( 'admin_head', __NAMESPACE__ . '\\add_nonce_variable_in_javascript_to_admin_head_area' );

Now we can update the javascript to use the nonce to pass back to WordPress to check for nonce validity.

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={
"action":"method_that_handles_the_ajax_request",
"address":"555 street",
"site_nonce":sites_vars.site_nonce;
};

$.post(ajaxurl, data_sent,function(response){
// response is what is sent back from the server for the ajax request.

});

// "site_nonce" is populated from the sites_vars variable passed from wp_localize_script

var datasent={

"action":"method_that_handles_the_ajax_request",

"address":"555 street",

"site_nonce":sites_vars.site_nonce;

};

$.post(ajaxurl, data_sent,function(response){

// response is what is sent back from the server for the ajax request.

});

Now that the nonce is created and is being passed from javascript to WordPress.. we setup below in php in the action that the ajax requests to process it’s integrity.

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){
// nonce is missing or is bad. Cancel request

die('Permission check failed');
}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:


// site_nonce has to be passed since it was 
// the handle we used when creating the nonce
// i.e. wp_create_nonce('site_nonce');

if( !isset($_POST['site_nonce']) || !wp_verify_nonce($_POST['site_nonce'], 'site_nonce')){

// nonce is missing or is bad. Cancel request

die('Permission check failed');

}

//$_POST['site_nonce'] has to be passed in first parameter as it is POST name we gave it below:

// site_nonce has to be passed since it was

// the handle we used when creating the nonce

// i.e. wp_create_nonce('site_nonce');

Good notes for ajax usage: https://developer.wordpress.org/plugins/javascript/enqueuing/

check_ajax_referer( 'nonce' ); This function will check nonce and if it fails will automatically kill the action it was ran within

wp_send_json() will send back appropriate header and json back to javascript as well as wp_die() for the action it was called in.

Online Journal

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

Category Archives: WordPress

Misc notes for WordPress

Elementor Notes

WordPress – Making a custom type not have a url

Default WordPress htaccess to enforce SSL

Notes for using Ajax in WordPress