Hooks and Plugins

slides.com/jkohlin/wp-hooks-and-plugins/live

Wordpress loads a lot of files each time a page is requested

 

...and even more functions

...of which most have hooks

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}

add_action( 'init', 'register_my_menus' );

You've used the init hook allready

add_action( 'init', 'register_my_menus' );

Run your function when Wordpress is running one of it's functions.

 

It's a lot easier than finding the right place in the right file and insert your code there

(add hooks to functions.php)

How do I know what hook?

https://codex.wordpress.org/Plugin_API/Filter_Reference

or search https://developer.wordpress.org/reference/ 

There are lots of hooks in Wordpress: 

Filter hooks

add_filter('hook_tag', 'callback');

 

Filter hooks should only be used to alter data.

 

Your callback function will always be called by passing content to it.

Action hooks

add_action('hook_tag', 'callback');

 

Action hooks can alter functionality in Wordpress, but doesn't return a value

E.g.

-register nav menus

-add theme support

-register post types

-add media sizes

Prioritise

add_action('init', 'run_me_early', 9);
add_action('init', 'run_me_normal');    // default value of 10 
add_action('init', 'run_me_late', 11);

Let's create an

April fools day hook

That blur's text

And replaces all vowels to i

Ind riplicis ill viwils ti i

flips images

The CSS

<style>
@-webkit-keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
}
@keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
}
* {
    -webkit-animation: blur 10s infinite;
    animation: blur 10s infinite;
}
img {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
</style>

We need to put it in the <head>

How?

What hook?

developer.wordpress.org/reference/

It's an action hook

something we do (add to <head>)

add_action("wp_head", "add_funny_css");
function add_funny_css() { ?>
  <style>
  @keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  body {
    animation: blur 10s infinite;
  }
  * {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  </style>
<?php
  }
}

The vowel switcher

$letter_array = str_split($title) ;
$title = "";
foreach ($letter_array as $index=>$letter) {
    if (array_search($letter, ["a", "e", "o", "u", "y"])) {
        $letter = "i"; // switch to i
    }
    $title .= $letter; //and put it back
}

We need to find all titles

It's a filter hook

we take some content and change it

add_filter("the_title", "add_funny_text");
function add_funny_text($title)
{
  $letter_array = str_split($title) ;
  $title = "";
  foreach ($letter_array as $key=>$letter) {
    if (array_search($letter, ["a", "e", "o", "u", "y"])) {
      $letter = "i";
    }
    $title.=$letter;
  }
  return $title;
}

Taking your hooks elsewhere

(functions.php is in your theme)

<?php 
add_theme_support('title-tag');
add_theme_support('post-thumbnails');

register_nav_menus(array(
    'primary' => __('Primary Menu', 'twentysixteen'),
    'social' => __('Social Links Menu', 'twentysixteen'),
));

add_action("wp_head", "add_funny_css");
function add_funny_css()
{ ?>
  <style>
  @-webkit-keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  @keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  body {
    -webkit-animation: blur 10s infinite;
            animation: blur 10s infinite;
  }
  * {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  </style>
  <?php
}
}

add_filter("the_title", "add_funny_text");
function add_funny_text($title)
{
    $letter_array = str_split($title);
    $title = "";
    foreach ($letter_array as $index => $letter) {
        if (array_search($letter, ["a", "e", "o", "u", "y"])) {
            $letter = "i";
        }
        $title .= $letter;
    }
    return $title;
}


wp-content/mytheme/function.php
<?php 
/*
Plugin Name:     April 1st CSS joke
Author:          Johan Kohlin
Description:     Blur everything in pulses
Version:         1.0
*/

add_action("wp_head", "add_funny_css");
function add_funny_css()
{ ?>
  <style>
  @-webkit-keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  @keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  body {
    -webkit-animation: blur 10s infinite;
            animation: blur 10s infinite;
  }
  * {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  </style>
  <?php
}
}

add_filter("the_title", "add_funny_text");
function add_funny_text($title)
{
    $letter_array = str_split($title);
    $title = "";
    foreach ($letter_array as $index => $letter) {
        if (array_search($letter, ["a", "e", "o", "u", "y"])) {
            $letter = "i";
        }
        $title .= $letter;
    }
    return $title;
}

wp-content/plugins/aprils-fools.php

a plugin...

Creating a plugin

Does it exist already?

https://wordpress.org/plugins

Let's create an

April fools day plugin

That blur's text

And replaces all vowels to i

Ind riplicis ill viwils ti i

flips images

The plugin file

Add a file in wp-content/plugins

<?php

wp-content / plugins / my_plugin/my_plugin.php

The plugin file

Add the plugin header comment

<?php
/*
    Plugin Name:     April 1st CSS joke
    Author:          Johan Kohlin
    Description:     Blur everything in pulses
    Version:         1.0
*/

WP plugin handbook

Activate it

What if you need options?

The options API let's you save to the database

 

add_option($name, $value) Create a new setting
get_option($name) Read an existing setting
update_option($name, $new_value) Update/ Change a current setting
delete_option($name) Delete an existing settting.

 

Available functions

A plugin's lifecycle hooks

1. You activate the plugin

create your options

 register_activation_hook( $file, $function );

2. You deactivate the plugin

 

 register_deactivation_hook( $file, $function );

3. You uninstall the plugin

delete your options

 register_uninstall_hook( $file, $function );

1. You activate the plugin

Every time you Activate a plugin, the following hook will be available. You want to register a function connected to your specific plugin. This is how you do it:

 register_activation_hook( $file, $function );

2. You deactivate the plugin

Every time you click the Deactivate link below a plugin name, the following hook will be available:

 register_deactivation_hook( $file, $function );

3. You uninstall the plugin

When you decide to uninstall the plugin, WP will remove your plugin folder and/or -file. If you have added options to the database, you should remove those as well. This hook is the one to use in that case. Another option, if your plugin lives in a folder, is to have a file called uninstall.php in the same folder as the plugin file. 

 register_uninstall_hook( $file, $function );

Add a settings page

to change your options

<?php

add_action("admin_menu", "april_fools_menu_page_hook")
function april_fools_menu_page_hook(){
    add_options_page(
       $page_title,
       $menu_title,
       $capability, // 'manage_options'
       $menu_slug,
       $function = 'name-of-html-form-function',
       $icon_url = 'dashicons-smiley',
       $position = integer
    );
}

https://codex.wordpress.org/Roles_and_Capabilities

Add a settings page

to change your options

add_action("admin_menu", "april_1st_admin_page_hook");
function april_1st_admin_page_hook(){
  add_menu_page(
    "April fools day's settings",
    "April",
    'manage_options',
    "april",
    'april_1st_prank_settings_page_html',
    'dashicons-smiley',
    98);
}

function april_1st_prank_settings_page_html(){
  echo "<h1>hello</h1>";
}

Add a settings page

the HTML form

<form action="" method="post">
    <label for="prank">Set prank</label>
    <input type="text" name="prank" value="<?php get_option('april_1st_prank_setting') ?>">
    <input type="submit" value="">
</form>

Add a settings page

the PHP form logic

  // Read in existing option value from database
  $prank = get_option("april_1st_prank_setting");
  // See if the user has posted us some information
  if (isset($_POST['prank'])) {
  // Read their posted value
    $prank = $_POST['prank'];
    // Save the posted value in the database
    update_option('april_1st_prank_setting', $prank);
    // Put a "settings saved" message on the screen
    echo '<div><p><strong>Settings saved!</strong></p></div>';
  }

Add a settings page

The HTML form function

function april_1st_prank_settings_page_html(){
  $prank = get_option("april_1st_prank_setting");
  if (isset($_POST['prank'])) {
    $prank = $_POST['prank'];
    update_option('april_1st_prank_setting', $prank);
    echo '<div><p><strong>Settings saved!</strong></p></div>';
  }
  ?>

  <form action="" method="post">
    <label for="prank">Set prank</label>
    <input type="text" name="prank" value="<?php echo get_option("april_1st_prank_setting") ?>">
    <input type="submit" value="Save">
  </form> 
<?php
}

Add a settings page

All in all...

add_action("admin_menu", "april_1st_admin_page_hook");
function april_1st_admin_page_hook(){
  add_menu_page(
    "April fools day's settings",
    "April",
    'manage_options',
    "april",
    'april_1st_prank_settings_page_html',
    'dashicons-smiley',
    2);
}

function april_1st_prank_settings_page_html(){
  // Read in existing option value from database
  $prank = get_option("april_1st_prank_setting");
  // See if the user has posted us some information
  if (isset($_POST['prank'])) {
  // Read their posted value
    $prank = $_POST['prank'];
    // Save the posted value in the database
    update_option('april_1st_prank_setting', $prank);
    // Put a "settings saved" message on the screen
    echo '<div><p><strong>Settings saved!</strong></p></div>';
  }
  ?>

  <form action="" method="post">
    <label for="prank">Set prank</label>
    <input type="text" name="prank" value="<?php echo get_option("april_1st_prank_setting") ?>">
    <input type="submit" value="Save">
  </form> 
<?php
}
<?php
/*
Plugin Name:     April 1st CSS joke
Author:          Johan Kohlin
Description:     Blur everything in pulses
Version:         1.0
 */

add_action("wp_head", "add_funny_css");
function add_funny_css()
{
  if (get_option("april_1st_prank_setting") == "blur") {
    ?>
  <style>
  @-webkit-keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  @keyframes blur {
    0%   { -webkit-filter: blur(0px); }
    50%   { -webkit-filter: blur(2px); }
    100%   { -webkit-filter: blur(0px); }
  }
  body {
    -webkit-animation: blur 10s infinite;
            animation: blur 10s infinite;
  }
  </style>
	<?php
  } elseif (get_option('april_1st_prank_setting') == "flip") { ?>
  <style>
  * {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  </style>
  <?php
  }
}


add_filter("the_title", "add_funny_text");
function add_funny_text($title)
{
  $letter_array = str_split($title) ;
  $title = "";
  foreach ($letter_array as $index=>$letter) {
    if (array_search($letter, ["a", "e", "o", "u", "y"])) {
      $letter = "i";
    }
    $title.=$letter;
  }
  return $title;
}

register_activation_hook(__FILE__, "create_april_1st_options");
function create_april_1st_options(){
  add_option("april_1st_prank_setting", "flip");
}

register_deactivation_hook(__FILE__, "remove_april_1st_options");
function remove_april_1st_options(){
  delete_option("april_1st_prank_setting");

}

add_action("admin_menu", "april_1st_admin_page_hook");
function april_1st_admin_page_hook(){
  add_menu_page(
    "April fools day's settings",
    "April",
    'manage_options',
    "april",
    'april_1st_prank_settings_page_html',
    'dashicons-smiley',
    2);
}

function april_1st_prank_settings_page_html(){
  // Read in existing option value from database
  $prank = get_option("april_1st_prank_setting");
  // See if the user has posted us some information
  if (isset($_POST['prank'])) {
  // Read their posted value
    $prank = $_POST['prank'];
    // Save the posted value in the database
    update_option('april_1st_prank_setting', $prank);
    // Put a "settings saved" message on the screen
    echo '<div><p><strong>Settings saved!</strong></p></div>';
  }
  ?>

  <form action="" method="post">
    <label for="prank">Set prank</label>
    <input type="text" name="prank" value="<?php echo get_option("april_1st_prank_setting") ?>">
    <input type="submit" value="Save">
  </form> 
<?php
}




/** To instead create a sub menu of settings:
 * add_options_page( string $page_title, string $menu_title, string $capability, string $menu_slug, callable $function = '' )
 */

Your very first plugin

Security

Hooks and plugins 2019

By Johan Kohlin

Hooks and plugins 2019

  • 636

More from Johan Kohlin