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

Contents

Introduction
Excerpt Length

The WordPress Hook
How to Use Hooks

Modal

Footer example

The trigger:
The modal:
Line 3-5: Defining Modal and Its Properties

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:

function wpdocs_custom_excerpt_length( $length ) {
    return 40;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

function wpdocs_custom_excerpt_length( $length ) {

return 40;

}

add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

What it does is very simple:

Create a function (can be any name. Here it is wpdocs_custom_excerpt_length .) that returns the excerpt length (40).
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:

Define your custom functions.
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:

Setup the HTML ‘trigger’ with attributes data-toggle="modal" and data-target="#myModal" .
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.

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <button class="btn btn-success btn-lg btn-block btn-footer" data-toggle="modal" data-target="#myModal">

	<?php if(get_locale() == 'zh_TW') : ?>
	  訂閱我的電子報
	<?php else : ?>	
          Subscribe My Newsletter
	<?php endif; ?>


      </button>
    </div><!-- end col -->
  </div><!-- row -->
</div><!-- container -->

<?php if(get_locale() == 'zh_TW') : ?>

訂閱我的電子報

<?php else : ?>

Subscribe My Newsletter

<?php endif; ?>

</button>

</div>

</div>

</div>

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:

<!-- modal: subscribe
================================================== -->
<div class="modal fade modal-footer" id="myModal">
        <div class="modal-dialog modal-sm">
                <div class="modal-content">

                        <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title" id="myModalLabel">
				<?php if(get_locale() == 'zh_TW') : ?>
					只需輸入您的姓名和電子郵件就可接收我們的最新文章：	
				<?php else : ?>	
					Simply enter your name and email to receive our latest posts:
				<?php endif; ?>
				</h4>
                        </div><!-- modal-header -->

                        <div class="modal-body">

				<!--==================== Form Location ========================= -->
				<?php echo do_shortcode('[mc4wp_form id="33"]'); ?>
				<!--==================== Form Location ========================= -->

                        </div><!-- modal-body -->

                                <hr>

                                <p class="modal-disclaim">
				<?php if(get_locale() == 'zh_TW') : ?>
				通過提供您的電子郵件，你同意接受不定期的推薦郵件和電子報。我們沒有垃圾郵件。只有好東西。我們尊重您的隱私權, 你可以隨時取消訂閱。	
				<?php else : ?>	
By providing your email you consent to receiving occasional promotional emails &amp; newsletters. No Spam. Just good stuff. We respect your privacy &amp; you may unsubscribe at any time.
				<?php endif; ?>
				</p>

                </div><!-- modal-content -->
        </div><!-- modal-dialog -->
</div><!-- modal -->

<!-- modal: subscribe

================================================== -->

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

<?php if(get_locale() == 'zh_TW') : ?>

只需輸入您的姓名和電子郵件就可接收我們的最新文章：

<?php else : ?>

Simply enter your name and email to receive our latest posts:

<?php endif; ?>

</h4>

</div>

<?php echo do_shortcode('[mc4wp_form id="33"]'); ?>

</div>

<hr>

<?php if(get_locale() == 'zh_TW') : ?>

通過提供您的電子郵件，你同意接受不定期的推薦郵件和電子報。我們沒有垃圾郵件。只有好東西。我們尊重您的隱私權, 你可以隨時取消訂閱。

<?php else : ?>

By providing your email you consent to receiving occasional promotional emails & newsletters. No Spam. Just good stuff. We respect your privacy & you may unsubscribe at any time.

<?php endif; ?>

</p>

</div>

</div>

</div>

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.