[Tutorial #22] Excerpt Length and Modal (Popup)

[Tutorial #22] Excerpt Length and Modal (Popup)

Introduction

In last tutorial we looked at the template inside the category list the Loop. Here we learn two more useful techniques in category.php: (1) customizing excerpt (2) using modal for popups.

We will also briefly mention the underlying mechanism of excerpt customizing: wordpress hooks.

Excerpt Length

We can customize excerpt length in functions.php. The respective codes are:

What it does is very simple:

  1. Create a function (can be any name. Here it is wpdocs_custom_excerpt_length .)  that returns the excerpt length (40).
  2. Use function add_filter to register our function to a specific tag 'excerpt_length'. The tag is the first parameter, and the function name is the second. The third one is optional, and we will explain it later.

The WordPress Hook

WordPress provides ‘hooks’ as a way to customize wordpress behaviors, just like themes that customize wordpress’ look.

A hook is a particular point during a data flow procedure (like getting data from MySQL to browser) or a specific event (like publishing a post). WordPress allows users to insert custom PHP functions in a hook to alter the normal data flow process or an event occurance.

An analogy is a pottery making class. The pottery shop sets the pottery creation process, while it allows attendees to customize the shape and exterior during the pottery shaping and decorating steps.

The hooks that represent events are called action hooks, and the hooks for data flow processes are called filter hooks.

How to Use Hooks

To use the hooks, wordpress represents each hook with a tag, which is just a PHP string like 'excerpt_length'. The procedure is:

  1. Define your custom functions.
  2. Call functions add_filter(...) or add_action(...) to insert custom functions into specific hook tags.

The generic parameters for add_filter and add_action are:

add_filter('hook tag','your_func_name', priority(optional), function_parameters(optional) );

where:

  • hook_tag: the hook tag.
  • your_func_name: name of your custom function.
  • priority: (optional) a number for executing priority if multiple custom functions are hooked to the same tag. The larger the number the less priority it gets. The default value is 10.
  • function_parameters: (optional) a single or an array of parameters for the custom functions.

Modal

A modal (or pop-ups) is content that is originally hidden on the browser, and can be displayed by a trigger like pressing a button or scrolling to the end.

For modals that are triggered by clicks, Boostrap provides easy modal classes to use. It involves two steps:

  1. Setup the HTML ‘trigger’ with attributes data-toggle="modal" and data-target="#myModal" .
  2. Setup the modal content by creating a <div> tag with classes including the value modal .

We will show how it works via the footer example.

Footer example

The trigger:

Here is the trigger codes in footer.php. One can find the full temaplate on my Github.

The first three lines are Bootstrap’s container and grid classes. Line 4 is the triggering HTML <button> tag spliced up with Bootstrap’s button classes for styling. Here data-target points to the HTML tag with 'id="myModal". The text (line 6-10) indicates this is for mail subscription.

The modal:

Line 3-5: Defining Modal and Its Properties

Line 3-5 specifies the modal and its properties:

  • Line 3: 'modal' specifies the modal. 'fade' adds fade in/fade out animation. 'modal-footer' adds footer modal Bootstrap style. id="myModal" matches the trigger so this currect modal will be invoked.
  • Line 4: a <div> with 'modal-dialog' class is required. Optional 'modal-sm' class specifies that the modal is of small size (works similar to column classes like col-sm-x). See here for different modal sizes.
  • Line 5: also required for Bootstrap.

The rest (line 4-35) is user-customized modal content. We will revisit this part when we show how to use MailChimp in wordpress.