You are welcomed! Once upon a time \u2026<\/p>\n
Take a further walk\u2026<\/span> <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n I used a jQuery script to perform this action the moreText.js<\/strong> script that I will discuss later on.<\/p>\n Initial thoughts Step 1: The structure of \u2018Read more<\/strong><\/p>\n The ‘Take a further walk…’ (\u2018Read more\u2026\u2019 is its default\u00a0 name) link\u00a0 text is built on the hooks.php<\/strong> file in omega_excerpt_more( $more ) function<\/strong>. The hooks.php file is inside the lib folder<\/strong> of the Omega theme<\/strong> (parent)<\/p>\n Two class attributes <a and <img are needed to apply the jQuery script on these elements. <a class=”more-link” The strval(get_the_ID()) holds post Id<\/p>\n <\/p>\n Step. 2 Load moreText.js to WordPress’ Omega theme<\/strong><\/p>\n In the Omega theme directory, I create a js folder to hold moreTexr.js Step. 3 Passing Variables between PHP and jQuery<\/span><\/strong><\/p>\n When a mouse hovers over a \u2018Take a further walk\u2019 link the post id value<\/strong> of the\u00a0this blog must be passed to the mo reText.js to run the gif in the appropriate position, next to the hovered\u00a0 \u2018Take a further walk\u2019 link<\/p>\n In order to pass data from php file to js, the wp_localize_script()<\/strong> must be used.<\/p>\n wp_localize_script()<\/strong> passes the $pos<\/strong>t array that holds the\u00a0post ids<\/span>\u00a0to ‘blogs_post_id’<\/strong> object<\/p>\n The ‘blogs_post_id<\/strong>‘<\/strong> is available in the moreText.js<\/strong> script.<\/p>\n Step. 4\u00a0 The moreText.js script<\/strong><\/p>\n The blogs_post_ids<\/strong> holds the post ids of my blog Final thoughts<\/strong> A very short part of this:<\/p>\n The html code<\/strong>.<\/p>\n The result, what you see.<\/strong><\/p>\n<\/a><\/p>\n<\/div>\n
\n<\/strong>Where is the ‘Read more text?
\nI use the WordPress<\/strong> platform for this blog with the Family theme (child) <\/strong>that is based on the Omega theme\u00a0(parent)\u00a0<\/strong>.<\/p>\nThe default\u00a0omega_excerpt_more( $more\u00a0) function<\/h6>\n
function omega_excerpt_more( $more ) {\r\n return ' ... <a class=\"more-link\" href=\"'. get_permalink( get_the_ID() ) . '\">' . omega_get_setting( 'content_archive_more' ) . '<\/a>';\r\n}<\/pre>\n
\nThe img element was added, for the cat footprints gif image file, next to the link text.
\nThe class names attributes of <a and <img must be different and unique for every blog post entry.
\nThe GIF must be displayed in the right position next to the current hovered text thus these names would be built dynamically<\/strong> inside the omega_excerpt_more( $more )<\/strong> function.<\/p>\n
\nwas change to
\n<a class=”more-link’. strval(get_the_ID()) . ‘”<\/strong>
\n\u00a0 <\/strong>and
\n‘<img class=”catFootprints’ . strval(get_the_ID()) . ‘<\/strong> was added<\/p>\nthe final\u00a0 omega_excerpt_more( $more ) function<\/h6>\n
function omega_excerpt_more( $more ) {\r\n\u00a0\u00a0 \u00a0return ' ... <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' ) . \r\n\u00a0\u00a0 \u00a0'<\/span>\u00a0 <img class=\"catFootprints' . strval(get_the_ID()) . '\" src=\"\"><\/a>';\r\n}\r\n<\/pre>\nNote: <span is used to style the ‘Take a further walk…’\u00a0 text, which is held in \u00a0omega_get_setting( ‘content_archive_more’ ) and this value was changed from ‘Read more’\u00a0\u00a0 to ‘Take a further walk’ text
\nfrom the WordPress Dashboard–>Themes –> (Family theme) Theme Details –> Theme Settings<\/h6>\n
\nthis script has to be loaded in this theme through the Omega theme’s\u00a0functions.php<\/strong> file.
\nAs I mentioned above I used the parent theme (Omega) to add my script.
\nSo I have to used the get_template_directory_uri<\/strong> function instead of the\u00a0get_stylesheet_directory_uri,<\/strong> that is use for child themes :<\/p>\nfunction load_moreText(){ \r\n wp_enqueue_script('moreText', get_template_directory_uri() . '\/js\/moreText.js', array('jquery'), false, true);\r\n global $post;\r\n\r\n $posts =get_posts(array(\r\n 'fields' => 'ids', \/\/ Only get post IDs\r\n 'posts_per_page' => -1\r\n ));\r\n wp_localize_script( 'moreText', 'blogs_post_ids', $posts );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'load_moreText' );<\/pre>\njQuery(document).ready(function ($) {\r\n $.each(blogs_post_ids, function(idxArray, valArray) {\r\n var moreLink = \".more-link\" + valArray;\r\n var catFootprints = \".catFootprints\" + valArray;\r\n $(moreLink).hover(function () { \r\n $(catFootprints).show().attr('src', 'localhost:8888\/digitalmedia\/wp-content\/uploads\/2022\/09\/cat_footprints.gif?rnd=' +Math.random()+'');\r\n }, function () {\r\n $(catFootprints).hide().attr('src', '');\r\n });\r\n }); \r\n});\r\n<\/pre>\n
\nThe valArray<\/strong> has the post-id value of the ‘blogs_post_ids’ elements.
\nThe valArray value is used to construct of the names of <img and <a,\u00a0selector1<\/strong> and selector2<\/strong><\/p>\n
\nA website has a lot of elements grouped together and styled,
\nIts DOM allows capturing browser events e.g a user hovers over a \u2018Take a further walk\u2019\u00a0link.
\nif you make right-click on this blog’s homepage and select ‘View page resource’, you will see\u00a0its html code<\/p>\n<div class=\"entry-meta\">\r\n Posted on ........\r\n <div class=\"entry-content\"> \r\n <p> Welcome to my 4th #GreekDinner ..............\r\n<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Ԛ <span?>\r\n<img class=\"footprints-img1306\" src=\"\"><\/a><\/p>\r\n <\/div><!-- .entry-content -->\r\n<\/pre>\n