Make Featured Pages titles linkable

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”

Comments are closed.