Category Archives: Development

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 */

MySQL Notes

Posted in SQL on October 29, 2018 by rowej83.

Notes for a refresher and or quick reference for SQL.

JOIN chart for visualizing the different types of possible JOIN. Source: https://www.w3schools.com/sql/sql_join.asp

Source from below: https://www.codeproject.com/Articles/33052/Visual-Representation-of-SQL-Joins

For a INNER JOIN , it can be re-written as such below and is called an IMPLICIT INNER JOIN

SELECT *
FROM TableA A, TableB B
WHERE A.Key = B.Key

above is the same as 

SELECT *
FROM TableA A
INNER JOIN TableB B
ON A.Key=B.Key

Using INNER JOIN is convention. INNER is also not needed as all joins are inner joins unless specified.

SELECT *

FROM TableA A, TableB B

WHERE A.Key = B.Key

above is the same as

SELECT *

FROM TableA A

INNER JOIN TableB B

ON A.Key=B.Key

Using INNER JOIN is convention. INNER is also not needed as all joins are inner joins unless specified.

There is no difference between RIGHT JOIN and RIGHT OUTER JOIN. Both are the same. LEFT JOIN and LEFT OUTER JOIN are also the same.

IFNULL function. If it is going to return a NULL value you can set a replacement value instead. Useful for LEFT/RIGHT JOINS where a column maybe be NULL

So for example:

SELECT first_name,
       last_name,
       IFNULL(SUM(amount),0) AS total
FROM customers
LEFT JOIN orders
       ON customers.id=orders.customer_id

// If there is no orders found for a particlur customer.id, it will
// return 0 for total instead of NULL

SELECT first_name,

last_name,

IFNULL(SUM(amount),0) AS total

FROM customers

LEFT JOIN orders

ON customers.id=orders.customer_id

// If there is no orders found for a particlur customer.id, it will

// return 0 for total instead of NULL

Vuejs notes

Posted in Javascript on October 24, 2018 by rowej83.

Mass registering global components

Import top level components and export them as an Array:

// File: /components/index.js

import Component1 from './Component1.vue';
import Component2 from './Component2.vue';
import Component3 from './Component3.vue';

export default [
    Component1,
    Component2,
    Component3
];

// File: /components/index.js

import Component1 from './Component1.vue';

import Component2 from './Component2.vue';

import Component3 from './Component3.vue';

export default [

Component1,

Component2,

Component3

];

Then in main.js we loop through the components and register them globally:

import Vue from 'vue';
import globalComponents from './components';

globalComponents.forEach(component => {
    Vue.component(component.name, component);
});

// load Vue

import Vue from 'vue';

import globalComponents from './components';

globalComponents.forEach(component => {

Vue.component(component.name, component);

});

// load Vue

Useful Vuejs libraries

https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js can be used for phone and zip code masks to prevent bad input. Also works with Element UI. Just include via cdn and then can be used as a directive i.e. :

<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

1	<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

Vuex Notes

Posted in Javascript on October 15, 2018 by rowej83.

Example Vuex with some comment notes

// store.js

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {},
  mutations: {
    //mutations alters state directly i.e. state.count=0;
    //can't have async code ( ajax) , must use actions
    exampleMutator:state=> {
      state.count = 10;
    },
    exampleMutatorWithPayload(state, payload) {
      console.log(payload);
    },
    increment: state => {
      state.count++;
    },
  },
  actions: {
    // provides context to update the state
    //i.e
    exampleAction: context => {
      //context is passed by Vuex and is how we can run async code to
      // eventually be committed.
      context.commit("exampleMutator");
    },
    // or deconstruct to get commit ,  payload is second parameter
    exampleActions2: ({ commit }, payload) => {
      console.log(payload);
      commit("exampleMutatorWithPayload", payload);
    }
  }
});

// store.js

import Vuex from "vuex";

import Vue from "vue";

Vue.use(Vuex);

export const store = new Vuex.Store({

state: {

getters: {},

mutations: {

//mutations alters state directly i.e. state.count=0;

//can't have async code ( ajax) , must use actions

exampleMutator:state=> {

state.count = 10;

exampleMutatorWithPayload(state, payload) {

console.log(payload);

increment: state => {

state.count++;

actions: {

// provides context to update the state

//i.e

exampleAction: context => {

//context is passed by Vuex and is how we can run async code to

// eventually be committed.

context.commit("exampleMutator");

// or deconstruct to get commit , payload is second parameter

exampleActions2: ({ commit }, payload) => {

console.log(payload);

commit("exampleMutatorWithPayload", payload);

}

});

In main.js we add the store via:

// main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import { store } from "./store/store";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  store,
  el: "#app",
  components: { App },
  template: "<App/>"
});

// main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from "vue";

import App from "./App";

import { store } from "./store/store";

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

store,

el: "#app",

components: { App },

});

In a component that uses something in the store:

//example component.js
import { mapActions } from "vuex";
export default {
  name: "Counter",
  methods: {
    // using mapActions makes it much faster, payload is automatically passed in
    ...mapActions({
      increment: "increment",
      decrement: "decrement",
      multiplyBy: "multiply"
    }),
    otherNonStoreMethods(){
    
     }

    // increment() {
    //   // this is to directly use mutations.
    //   //this.$store.commit("increment");

    //   //this is how to use actions instead.
    //   this.$store.dispatch("increment");
    // },
    // decrement() {
    //   // this is to directly use mutations.
    //   //this.$store.commit("decrement");

    //   //using actions instead
    //   this.$store.dispatch("decrement");
    // },
    // multiplyBy(by) {
    //   this.$store.dispatch("multiply", by);
    // }
  }
};

//example component.js

import { mapActions } from "vuex";

export default {

methods: {

// using mapActions makes it much faster, payload is automatically passed in

...mapActions({

increment: "increment",

decrement: "decrement",

multiplyBy: "multiply"

}),

otherNonStoreMethods(){

}

// increment() {

// // this is to directly use mutations.

// //this.$store.commit("increment");

// //this is how to use actions instead.

// this.$store.dispatch("increment");

// },

// decrement() {

// // this is to directly use mutations.

// //this.$store.commit("decrement");

// //using actions instead

// this.$store.dispatch("decrement");

// },

// multiplyBy(by) {

// this.$store.dispatch("multiply", by);

// }

}

};

Mutations are for non-async updates to the Vuex store. Actions can use async code. Generally, should actions should always be used instead of Mutators.

If using Mutators.. the update to the store can happen directly. i.e. this.$store.commit('mutatorMethodThatUpdatesStore');

Actions use dispatch instead: this.$store.dispatch('mutatorMethodThatUpdatesStore');

3 useful methods from Vuex are:

mapGetters

mapMutations

mapActions

mapState – mapState should be used instead of creating “dummy” getters. Dummy getters are ones that simply just return the store’s state value.

Getters should be more used for computed type values or for things such as a filter etc.

For each of the 4 above..All have either an array of strings of names of state/getter/mutation/action or can pass in an object with key/value pairs if needing a different name. For example:

...mapActions({
multipleBy:'multiply'
});

// This will map the store's action "multiply" to a component's
// "multiplyBy" method.

...mapActions({

multipleBy:'multiply'

});

// This will map the store's action "multiply" to a component's

// "multiplyBy" method.

Online Journal

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