[Resolved] Internal Links and higlighting a word in a paragraph like in Screenshot

[Jatin]

Hi Guys,

I want to update all Internal Links on my site similar to what has been done on the other site I saw on internet.

Also, I want to highlight a word or couple of words within a paragraph same way as done in the other site. [Please refer to the screenshot]

I know this is possible using CSS. Could you please check the sizes and screenshots and provide the code.

I have entered the Site and Screenshot Information in the Private box due to security reasons.

[Fernando]

Hi Jatin,

You can try adding this CSS:

.entry-content a{
    transition: background-color .3s ease-in;
    border-radius: 4px;
}

.entry-content a:hover {
    background-color: #00ff00;
}

As for the highlight, there should be a WordPress feature for that in the toolbar. Example: https://share.getcloudapp.com/p9uQkZBL

[Jatin]

Do you know how the post meta is adding on this site which includes comments as well on the right side ?

[Fernando]

Which are you referring to? Can you share a screenshot?

[Jatin]

I have shared the link of the site in Private box where the post meta is added on Archive Page and Single Page.
Need similar on my site as well.

How it has been added / Stylized with Comments showing in meta.

[Jatin]

Thanks for Internal Link Code shared earlier.I have now applied it. However, when i click on the Link and return back on the page. I see border and underline both under the link. Is there any way to disable Underline on the link?

Screenshot and URL given in the box.

[Ying]

Do you know how the post meta is adding on this site which includes comments as well on the right side ?

It’s using custom function to add the comment.

But you can use a block element – post meta template to achieve this easily without writing codes.

I see border and underline both under the link

Try this CSS:

.entry-content a:focus {
    text-decoration: none;
}

[Jatin]

Thank you.

I do not want to use generateblocks and want to keep it simple.

Is there any way I can create a similar post meta without using GenerateBlocks.

Can you please fetch the code of the custom function ?

[Fernando]

Add these PHP snippets first:

add_filter( 'generate_header_entry_meta_items', function() {
    return array(
    
	  'date',        
	  'author',
	  'comments-link',
	
    );
} );

add_action( 'wp', function() {
    if ( is_single() ) {
        add_filter( 'generate_show_comments', '__return_true' );
    }
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, array( 'comments-link' ) );
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

We’ll go from there.

[Jatin]

Thank you. I want some help on the Internal Link.

Ying provided to switch of text decoration for links which worked fine. However, some of the links are still showing double lines.
Example link and screenshot in the box please.

[Ying]

This underline style is added inline, so it’s likely added within the block settings, and it’s added to the spannot the a.

So the CSS I provided will not work.

Try adding this CSS as well to override the block setting:

.entry-content a >* {
    text-decoration: none !important;
}

[Jatin]

Hi Fernando, the PHP code you shared is it just for comments or its for date author and comments?

I want to keep the code to minimum and just require comments.

I have added this code, whats next ?

[Fernando]

That code’s purpose is to make the comments count appear beside the date and author meta in the entry-meta section.

Now, add this code in Appearance > Customize > Additional CSS to push the comments count to the right:

header.entry-header .entry-meta {
    display: flex;
}

header.entry-header .entry-meta span.comments-link {
    margin-left: auto;
}

[Jatin]

Thanks Fernando.

Its showin the comments on the right hand side on the my laptop. However I still below issues / queries:

1. when you check the post meta on a mobile phone. Its overlapping and not displaying nicely.
2. Is there any way to not show on exterme right hand side and show it something like this with a Line after authorname.
3. I am using WPCode to add the code, Do you suggest / recommend Code Snippets or WPCode ?
4. Do you want me to run the PHP Code provided “Run Everywhere” or specific places. I want to avoid any slowness on my side due to more code.

Last updated on:<date> by <authorname> | 30 comments

[Fernando]

1-2. Would you like it to look like this for all views? Just a line separator? Can you remove the code I provided here: https://generatepress.com/forums/topic/internal-links-and-higlighting-a-word-in-a-paragraph-like-in-screenshot/#post-2360926
3. I personally use Code Snippets. I’m not familiar with WPCode, but if it works, then that should be good.
4. These are hooks, they only run when they appear in a specific loading of a page. The other one has a conditional statement that only runs for single post pages. For the CSS we’ll provide, you can use a plugin like simple CSS if you want it to load only for specific pages.

[Author]

Posts