Change text that appears on hover on certain archive pages

[INcroatia]

Hi there,

We’re wondering if there’s a way to change the hover text that appears over the featured image only on a few archive pages.
Instead of the current “View Post”, we’d like it to say “Register”

As already mentioned, we don’t want this change to be made and seen sitewide, but only on a few other archive pages where the new text would be applicable.

Thank you in advance.

[tristup]

Hi @INcroatia,

Thanks for reaching out.
There is no such option to change the text so you need to add the custom code into your child theme functions.php file.

function alternate_text( $translated_text, $text, $domain ) 
{
    if(is_category( 'Your Category Name' )) //change this according to your need
    {
    switch ( $translated_text ) 
    {
        case 'View Post' :
        $translated_text = __( 'Your Custom View Post Text', '__x__' );
        break;
    }
    }
    return $translated_text;
}
add_filter( 'gettext', 'alternate_text', 20, 3 );

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[INcroatia]

Thanks @tristup ! One other question though - the code works perfect for only one category, but when we try to add more of them, the text stays “View Post” instead of “Register”. Any idea why?

[tristup]

Hi @INcroatia,
To add the multiple categories, please add the following code in place of if(is_category( ‘Your Category Name’ )),

if(is_category( 'Your Category Name' ) || if(is_category( 'Your Category Name' )) || if(is_category( 'Your Category Name' )))

or else you can use an array to add your multiple page titles

if(is_category( array( 'Your Category Name 1', 'Your Category Name 2', 'Your Category Name 3' ) ))

The code will look like:

function alternate_text( $translated_text, $text, $domain ) 
{
    if(is_category( array( 'Your Category Name 1', 'Your Category Name 2', 'Your Category Name 3' ) )) //change this according to your need
    {
    switch ( $translated_text ) 
    {
        case 'View Post' :
        $translated_text = __( 'Your Custom View Post Text', '__x__' );
        break;
    }
    }
    return $translated_text;
}
add_filter( 'gettext', 'alternate_text', 20, 3 );

Hope it works.
Thanks

[INcroatia]

Wonderful! It works perfectly, thank you @tristup!

[tristup]

Hi @INcroatia,

Glad that we are able to help you.

Thanks

[INcroatia]

We have an additional question - is it possible to also change the colour of the hover with the above code?

[tristup]

Hi @INcroatia,

You need to add a custom class, to add the style into it. Here I have added a span with the custom class custom_view and added the custom CSS code into the Theme Options > CSS.

function alternate_text( $translated_text, $text, $domain ) 
{
    if(is_category( array( 'Your Category Name 1', 'Your Category Name 2', 'Your Category Name 3' ) )) //change this according to your need
    {
        switch ( $translated_text ) 
        {
            case 'View Post' :
            $translated_text = __( '<span class="custom_view">Your Custom View Post Text</span>', '__x__' );
            break;
        }
        return $translated_text;
    }
}
add_filter( 'gettext', 'alternate_text', 20, 3 );

The style code you need to add:

.custom_view
{
    color:#ff0000;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[INcroatia]

Hi @tristup, thanks for this - but we’re wondering how to change the black overlay colour, not the text colour. We’d like the overlay colour to be one of the brand colours.

[prakash_s]

Hello @INcroatia,

It seems that you have already change the overlay colour from black to your brand colour.

If it is not rendering at your place please clear your browser cache and then check it again or it would better if you can check it in the private mode of the browser.

In case if I have missed anything please share a screenshot with exact page URL so that we can help you with your concern

Hope it helps
Thanks

[INcroatia]

Hi @prakash_s, that’s a skin from The Grid, we’re talking about the hover that appears over the featured image of category archive pages.
The original link points to a 404 page since the category name has been changed in the meantime, apologies for any confusion.

[tristup]

Hi @INcroatia,

To change the hover overlay background you need to add the following custom CSS code into the Theme Options > CSS, please remember to add the specific category class as a prefix, to implement the style only for those categories.
Here I have tried with the Labor Birth Online Course category.

.category-labor-birth-online-courses a.entry-thumb:before
{
    background-color:rgba(255,0,0,0.75) !important;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks