• Resolved lovestobegreen

    (@lovestobegreen)


    Hi Steven,

    Is it possible for the author name to appear at the top of each blog post like in this article: https://www.instyle.com/fall-brunch-outfits-7852956 ?

    I would like it to show up before the published date and to be separated with a |.

    For example: By Michelle | November 14, 2023

    I would also like my about page to link to the author name (so when you click on “Michelle” it brings you to my about page).

    Instyle also has a nice hover feature that shows a picture, link to socials, and a short bio. Is this easy to recreate?

    Thanks in advance!

    Best,

    Michelle

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi Michelle,

    This isn’t a feature that the free theme currently supports, but you can achieve it by adding a filter. There are different ways to add a filter, but here’s a quick step by step showing one way to do it:

    • Install and activate the WPCode plugin
    • Add a new code snippet with the options shown in this screenshot (these options are important since they ensure that the filter only modifies this specific location)

    Here’s the code for the snippet:

    add_filter('the_date', function($date) {
    	return 'By <a href="' . get_site_url(null, '/about/') . '">' . get_the_author_meta('display_name') . '</a> | ' . $date;
    });

    The hover feature is a bit more involved, and probably outside the scope of what we can get into here, but hopefully this at least gets you close! ??

    Thread Starter lovestobegreen

    (@lovestobegreen)

    Hi Steven,

    Thank you so much for the super easy to follow instructions!

    It’s almost perfect. How can I get my name to be a clickable link to my about page, make the font size slightly bigger, and so it’s not in italics?

    This is how it’s displaying: (at https://harmfreefashion.com/best-sustainable-quiet-luxury-brands/)

    By Michelle Rothenburger ( https://harmfreefashion.com/about/ ) | November 5, 2023

    Thanks again!

    Best,

    Michelle

    Hi Michelle,

    That’s odd…would you mind linking to a screenshot of the code snippet page where you entered this code? Thanks so much!

    For the font size and removing italics, you can paste this CSS into Appearance > Customize > Additional CSS:

    .single-post .entry-date {
        font-size: 14px;
        font-style: normal;
    }

    Thanks again!

    Thread Starter lovestobegreen

    (@lovestobegreen)

    Hi Steven,

    Thanks for the additional code.

    Here’s a screenshot.

    Thanks,

    Michelle

    Thread Starter lovestobegreen

    (@lovestobegreen)

    That’s really funny. I just copied and pasted the code again and now it works!

    You’re the best Steven. Thank you for always figuring out how to manage my requests.

    Have a great day!

    Michelle

    Thread Starter lovestobegreen

    (@lovestobegreen)

    Sorry one more question: how would I bold and underline just my name?

    Thanks!

    Nice- glad it ended up working out!

    Sure thing…you can add this in your Additional CSS to take care of the bold and underline:

    .single-post .entry-date a {
        font-weight: bold;
        text-decoration: underline;
    }

    Let us know if you need anything else!

    Thread Starter lovestobegreen

    (@lovestobegreen)

    Perfect!

    Thank you again!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Author name to appear at top of post’ is closed to new replies.