I have just finished my new portfolio (dimirakarakou.gr), for my blog I have just added an animated gif next to the ‘Read more’ text. I like this FamilyM theme, it is simple and serves its purpose of blogging.

This blog’s Homepage, archive, and search pages display shorten blog post entries, and at the end of every blog post entry, a ‘Take a further walk…’ link is added

My goal
When the user’s mouse ‘mouses over’ a ‘Read more’ link, an animated cat’s footprints gif appears next to the hovered text.
When the user’s mouse ‘moves out’ from a ‘Read more’ text no image is displayed.
When the user’s mouse hovers again a ‘Read more’ link, the cat’s footprints will be animated next to the hovered current text.
The gif file is animated only once.

Example.

I used a jQuery script to perform this action the moreText.js script that I will discuss later on.

Initial thoughts
Where is the ‘Read more text?
I use the WordPress platform for this blog with the Family theme (child) that is based on the Omega theme (parent) .

Step 1: The structure of ‘Read more

The ‘Take a further walk…’ (‘Read more…’ is its default  name) link  text is built on the hooks.php file in omega_excerpt_more( $more ) function. The hooks.php file is inside the lib folder of the Omega theme (parent)

The default omega_excerpt_more( $more ) function

function omega_excerpt_more( $more ) {
  return ' ... <a class="more-link" href="'. get_permalink( get_the_ID() ) . '">' . omega_get_setting( 'content_archive_more' ) . '</a>';
}

Two class attributes <a and <img are needed to apply the jQuery script on these elements.
The img element was added, for the cat footprints gif image file, next to the link text.
The class names attributes of <a and <img must be different and unique for every blog post entry.
The GIF must be displayed in the right position next to the current hovered text thus these names would be built dynamically inside the omega_excerpt_more( $more ) function.

<a class=”more-link”
was change to
<a class=”more-link’. strval(get_the_ID()) . ‘”
  and
‘<img class=”catFootprints’ . strval(get_the_ID()) . ‘ was added

The strval(get_the_ID()) holds post Id

the final  omega_excerpt_more( $more ) function

function omega_excerpt_more( $more ) {
    return ' ... <a class="more-link'. strval(get_the_ID()) . ' " href="'. get_permalink( get_the_ID() ) . '"><span style="font-weight: 900; color: #000; font-family: \'Delius Swash Caps\', cursive;">' . omega_get_setting( 'content_archive_more' ) . 
    '</span>  <img class="catFootprints' . strval(get_the_ID()) . '" src=""></a>';
}

Note: <span is used to style the ‘Take a further walk…’  text, which is held in  omega_get_setting( ‘content_archive_more’ ) and this value was changed from ‘Read more’   to ‘Take a further walk’ text
from the WordPress Dashboard–>Themes –> (Family theme) Theme Details –> Theme Settings

 

Step. 2 Load moreText.js to WordPress’ Omega theme

In the Omega theme directory, I create a js folder to hold moreTexr.js
this script has to be loaded in this theme through the Omega theme’s functions.php file.
As I mentioned above I used the parent theme (Omega) to add my script.
So I have to used the get_template_directory_uri function instead of the get_stylesheet_directory_uri, that is use for child themes :

Step. 3 Passing Variables between PHP and jQuery

When a mouse hovers over a ‘Take a further walk’ link the post id value of the this blog must be passed to the mo reText.js to run the gif in the appropriate position, next to the hovered  ‘Take a further walk’ link

In order to pass data from php file to js, the wp_localize_script() must be used.

function load_moreText(){ 
  wp_enqueue_script('moreText', get_template_directory_uri() . '/js/moreText.js', array('jquery'), false, true);
  global $post;

  $posts =get_posts(array(
  'fields' => 'ids', // Only get post IDs
  'posts_per_page' => -1
  ));
 wp_localize_script( 'moreText', 'blogs_post_ids', $posts );
}
add_action( 'wp_enqueue_scripts', 'load_moreText' );

wp_localize_script() passes the $post array that holds the post ids to ‘blogs_post_id’ object

The ‘blogs_post_id‘ is available in the moreText.js script.

Step. 4  The moreText.js script

jQuery(document).ready(function ($) {
   $.each(blogs_post_ids, function(idxArray, valArray) {
   var moreLink = ".more-link" + valArray;
   var catFootprints = ".catFootprints" + valArray;
   $(moreLink).hover(function () { 
     $(catFootprints).show().attr('src', 'localhost:8888/digitalmedia/wp-content/uploads/2022/09/cat_footprints.gif?rnd=' +Math.random()+'');
   }, function () {
   $(catFootprints).hide().attr('src', '');
   });
 }); 
});

The blogs_post_ids holds the post ids of my blog
The valArray has the post-id value of the ‘blogs_post_ids’ elements.
The valArray value is used to construct of the names of <img and <a, selector1 and selector2

Final thoughts
A website has a lot of elements grouped together and styled,
Its DOM allows capturing browser events e.g a user hovers over a ‘Take a further walk’ link.
if you make right-click on this blog’s homepage and select ‘View page resource’, you will see its html code

A very short part of this:

The html code.

<div class="entry-meta">
    Posted on ........
        <div class="entry-content">        
            <p> Welcome to my 4th #GreekDinner ..............
<a class="more-link1306" href="#https://dimitrakarakou.gr/digitalmedia/4th-greek-dinner/?p=1306"><span class="more-link-id" style="font-weight: 900; color: #000; font-family: 'Delius Swash Caps', cursive;">Take a further walk&#1306; <span?>
<img class="footprints-img1306" src=""></a></p>
        </div><!-- .entry-content -->

The result, what you see.

The post-id of the above example is = 1306.
— link element node represents the ‘Take further walk link’
—-with class attribute = more-link1306
— image element node represents the cat footprints image
—-with class attribute = catFootprints1306

My blog’s DOM is ready to accept events: user’s mouse hover a ‘Take further walk…’ link

The github repository for this project is available here

Thank you 🙂