If you need to have different texts on the Featured Pages Buttons, here are two snippets to do it the css or php way.
The CSS way
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.
Step 1: In your WP admin, go in Appearance >Customize and open the Front Page panel, find the Button text box under FEATURED PAGES OPTIONS and remove all text from it leaving it blank.
Step 2: Add the following CSS:
/* START OF Have different texts on the Featured Pages Buttons */
.fp-one .btn.btn-primary.fp-button:after {
content:"Read More 1"; /* Change to required text */
}
.fp-two .btn.btn-primary.fp-button:after {
content:"Read More 2"; /* Change to required text */
}
.fp-three .btn.btn-primary.fp-button:after {
content:"Read More 3"; /* Change to required text */
}
/* END OF Have different texts on the Featured Pages Buttons */
Featured Pages Unlimited or PRO user? the CSS is slightly different :
/* START OF Have different texts on the Featured Pages Buttons */
.fp-one .fpc-btn:after {
content:"Read More 1"; /* Change to required text */
}
.fp-two .fpc-btn:after {
content:"Read More 2"; /* Change to required text */
}
.fp-three .fpc-btn:after {
content:"Read More 3"; /* Change to required text */
}
/* END OF Have different texts on the Featured Pages Buttons */
The PHP way
Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.
Remember: you shouldn’t edit the theme’s functions.php.
// START OF Have different texts on the Featured Pages Buttons
add_filter( 'tc_fp_button_text' , 'my_button_text' , 10 , 2 );
function my_button_text( $original_text , $fp_id ) {
$my_texts = array(
'one' => 'Read More 1',
'two' => 'Read More 2',
'three' => 'Read More 3'
);
return isset( $my_texts[$fp_id] ) ? $my_texts[$fp_id] : $original_text ;
}
// END OF Have different texts on the Featured Pages Buttons
Featured Pages Unlimited or PRO user? the php code is slightly different :
// START OF Have different texts on the Featured Pages Buttons
add_filter( 'fpc_button_text' , 'my_button_text' , 10 , 2 );
function my_button_text( $original_text , $fp_id ) {
$my_texts = array(
'one' => 'Read More 1',
'two' => 'Read More 2',
'three' => 'Read More 3'
);
return isset( $my_texts[$fp_id] ) ? $my_texts[$fp_id] : $original_text ;
}
// END OF Have different texts on the Featured Pages Buttons
11 thoughts on “Have different texts on the Featured Pages Buttons”
Hi,
Great theme.
I tried using this snippet without success…until, by accident I found the solution/ quirk?
The CSS way, step 1, where it says :
“remove all text from it leaving it blank.”
I did but nothing would show. By accident, I placed a “space ” in there and hey presto, it worked!
Cheers,
Great support for a great theme 🙂
Thanks for sharing your solution @Phil ! 😀
Hello!
How to proceede with Polylang enabled? how to make different texts on the Featured Pages Buttons in all different languages?
Thanks for your suoort
What about for current versions of Customizr?
Hello,
Ik have 3 featured pages, and I fill in all the text at frontpage. But the text I fill in at frontpage doesn’t dissapear at my site.
It is only by one featured add and I don’t know what to do next.
Kind regards
I’m lost ! Where to find the Customiz’it!>Front Page panel ?
Hi Sfiquet, the Customiz’it! button doesn’t exist anymore.
In your WP admin, go in Appearance >Customize and open the Front Page panel.
Thanks
Furthermore, i’ve got the french version ! I’ve found it now, thanks !
Hi,
I’m currently working on building my page. I used the above code so I can change the text on each button. I copied and pasted as it is above, but the 2nd and 3rd buttons only changed. The 1st one is not showing the text. Am I missing something?
I love the theme you created , however i have an issue with the buttons.
I have created 8ight Featured Pages and can only get the three like mentioned above to work. I added the following code, but no go. Any Ideas?
.fp-one .btn.btn-primary.fp-button:after {
content:”Bicycles”; /* Change to required text */
}
.fp-two .btn.btn-primary.fp-button:after {
content:”Services”; /* Change to required text */
}
.fp-three .btn.btn-primary.fp-button:after {
content:”Parts”; /* Change to required text */
}
.fp-four .btn.btn-primary.fp-button:after {
content:”Accessories”; /* Change to required text */
}
.fp-five .btn.btn-primary.fp-button:after {
content:”Rentals”; /* Change to required text */
}
.fp-six .btn.btn-primary.fp-button:after {
content:”Events”; /* Change to required text */
}
.fp-seven .btn.btn-primary.fp-button:after {
content:”Rentals”; /* Change to required text */
}
.fp-eight .btn.btn-primary.fp-button:after {
content:”Events”; /* Change to required text */
}
Hi Deird, from the fourth featured page, replace the literal number by the numerical one.
In other words, in your css replace four by 4, five by 5 and so on.
This should to the trick!
Best