If you want your featured pages titles be a link to the featured pages, this snippet is what you need.
You do not need to copy both versions, choose the one you like best!
1) Javascript version
Compatible with FPU plugin, FP plugin, Customizr, Customizr-Pro
add_action('wp_footer', 'fp_titles_linkizr', 200);
function fp_titles_linkizr(){
// limitate the js to the home page
if ( ! tc__f('__is_home') )
return;
$widget_front = ( class_exists('TC_fpu') || class_exists('TC_fpc') ) ? "fpc-widget-front" : "widget-front";
?>
<script type="text/javascript">
jQuery(document).ready(function () {
!function ($){
"use strict";
// grab all links
var $a_hrefs = $(".<?php echo $widget_front ?> a"),
$links = ( $a_hrefs.filter("round-div").length > 0 ) ? $a_hrefs.filter("round-div") : $a_hrefs.filter(".fp-button");
if ( $links.length == 0 )
return;
// grab all fp-titles
var $titles = $(".<?php echo $widget_front; ?> > :header");
$titles.each( function(i) {
var $edit_span = $(this).find('span');
$edit_span.detach();
var _target = $( $links[i] ).attr('target') == 'blank' ? '_blank' : $( $links[i]).attr('target'),
target = _target ? 'target="'+ _target + '"' : '',
// let's wrap the title into the round-div link
linkizd_title = '<a class="fp-title-link" href="' + $( $links[i] ).attr('href') +'" '+ target +
' title="' + $( $links[i] ).attr('title') + '">' + $(this).text() + '</a>';
$(this).html(linkizd_title);
$(this).append($edit_span);
});
}(window.jQuery);
});
</script>
<?php
}Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.
2) Filters version
2.a) Customizr
Use this if you use standard customizr featured pages
add_filter('tc_fp_single_display', 'add_title_link', 20, 6);
function add_title_link($html, $fp_single_id, $show_img, $fp_img, $featured_page_link, $featured_page_title){
$link = '<a class="fp-title-link" href="'.$featured_page_link.'">'.$featured_page_title.'</a>';
return preg_replace('/<h(.*?)>'.$featured_page_title.'(.*?)<\/h(.*?)>/', '<h$1>'.$link.'$2</h$1>',$html);
}
Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.
2.b) Customizr-Pro, Featured Pages Unlimited plug-in, Featured Pages Customizer plug-in
Use this one, instead, if you use one of the above versions
add_filter('fpc_single_display', 'add_fpc_title_link', 20, 5);
function add_fpc_title_link($html, $fp_single_id, $fp_img, $featured_page_link, $featured_page_title){
$link = '<a class="fp-title-link" href="'.$featured_page_link.'">'.$featured_page_title.'</a>';
return preg_replace('/<h(.*?)>'.$featured_page_title.'(.*?)<\/h(.*?)>/', '<h$1>'.$link.'$2</h$1>',$html);
}
Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.
Additional style
To make the new link inherit the color of the featured pages title just add the following to your child-theme style.css or your custom css box:
.fp-title-link {
color: inherit;
}Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
15 thoughts on “Make Featured Pages titles linkable”
Hi,
All special characters can be included in this function. In the code give, I have included only ( and ).
Hi iamhungrygeek,
Does this appear more elegant? Use preg_quote() function.
add_filter(‘tc_fp_single_display’, ‘add_fpc_title_link’, 20, 6);
function add_fpc_title_link($html, $show_img,$fp_single_id, $fp_img, $featured_page_link, $featured_page_title){
$link = ‘‘.$featured_page_title.’‘;
return preg_replace(‘/’.preg_quote($featured_page_title,'()’).'(.*?)/’, ”.$link.’$2′,$html);
}
Yep that works fine and I presume it will cover all the other special regular expression characters? It may be a good idea to update the code displayed in the page above then 🙂
For the other readers, do note that Menaka’s code is for the free Customizr, as for the paid versions the first two lines have to be amended accordingly.
I’ve discovered a little issue with the filter snippet.
If the page title contains a ‘ | ‘ it has an unexpected behaviour, since the | is interpreted as part of the regexp to match and replace.
I’ve managed to fix that escaping the ‘|’ right before passing it to the preg_replace.
Mine is a rough fix surely something more elegant might be done but I though it could be helpful to share the issue with others 🙂
Cheers
*****
Code:
add_filter(‘fpc_single_display’, ‘add_fpc_title_link’, 20, 5);
function add_fpc_title_link($html, $fp_single_id, $fp_img, $featured_page_link, $featured_page_title)
{
$link = ‘‘.$featured_page_title.’‘;
$esc_featured_page_title = str_replace(‘|’, ‘\|’,$featured_page_title);
return preg_replace(‘/’.$esc_featured_page_title.'(.*?)/’, ”.$link.’$2′,$html);
}
I have the same issue when the page title contins a ‘ ) ‘ or ‘ ( ‘ – the link does not appear for that particular title for fix 2.b. There is no such issue when I use the Javascript version as per fix 1.
Anyone managed to come up with a more elegant solution for this issue?
This is what I came up with:
*****
Code:
add_filter('fpc_single_display', 'add_fpc_title_link', 20, 5);
function add_fpc_title_link($html, $fp_single_id, $fp_img, $featured_page_link, $featured_page_title){
$link = ''.$featured_page_title.'';
$esc_featured_page_title = strtr($featured_page_title, array(
'|' => '\|',
'(' => '\(',
')' => '\)',
));
return preg_replace('/'.$esc_featured_page_title.'(.*?)/', ''.$link.'$2',$html);
}
** CAUTION – for some reason the hyperlink tags at the $link line are being removed – remember to add them back as per the template snippet
Hey, I am getting some error. it is showing fatal error for $link variable.
Hii ! I am getting following error :
syntax error, unexpected ‘$link’ (T_VARIABLE) in C:xampphtdocstutspluswp-contentthemescustomizr-childfunctions.php
Could you please guide me fixing this. I am using free version and using this code:
add_filter(‘tc_fp_single_display’, ‘add_title_link’, 20, 6);
function add_title_link($html, $fp_single_id, $show_img, $fp_img, $featured_page_link, $featured_page_title)
{
$link = ‘‘.$featured_page_title.’‘;
return preg_replace(‘/’.$featured_page_title.'(.*?)/’, ”.$link.’$2′,$html);
}
Hi Rocco,
this does not work for me with the latest customizr pro version.
This is a nice example I wanted to modify to get red titles in featured pages, but the original code is not working with the latest version.
Can you give me a hint on how to change the featured pages title color?
Thanks!
Sorry, forgot to mention that I used instructions from 2.a).
Hello Juergen,
sorry I don’t understand.
You should use 2.b) (that’s the version for Customizr-Pro), I’ve just tested it and it works here.
That makes the title a link
Thanks for the really quick reply Rocco!
It works like a charm with 2.b), I misunderstood the heading.
Many thanks, again!!!
Glad to hear that.
You’re welcome.
Anyway I added a small piece of css if you’re interested in inheriting the fp title color 😉
Good night 😀
Nice Rocco. 🙂
It is much more consistent inheriting link color definitions.
Of course, for cutomizr pro, I had to change it to “.fpc-title a”.
Mmm, how so?
It’s fp-title for Customizr-Pro (though isn’t so for Customizr free)
Anyway I make some small changes so we can use the same selector 🙂
(fp-title-link class added)
OOps, you are right :), with fp-title the link gets the inherited color (grey), sorry.
Thanks again and good night.