[Support request] Add Author Bio in sidebar without any plugin

[Soumyadip]

Hi Tom/David/Leo, please let me know how to add a beautiful author bio box with read more button on the right sidebar of my blog…

This is what I am looking for, refer to this website – https://www.recipetineats.com/creamy-mushroom-pasta/.

No plugins please! provide me the scripts and css

THanks!

[David]

Hi there,

we try to help people where we can with custom requirements, if it is within our reach we will do so – there should not be a concern you using a plugin, as code is code.

Fortunately i have something in my library you can use to create a Shortcode to add to your widgets:

https://gist.github.com/diggeddy/c448f642993866f79dbb960cbc450a6a

Use this CSS instead of that provided for a similar effect:

.author-box {
    text-align: center;
}

.author-box .avatar img {
    width: 80px;
    border-radius: 40px;
    vertical-align: middle;
}

.author-box .author-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.author-box .author-summary,
a.author-link {
    font-size: 13px;
}

.author-summary a.author-link {
    padding: 6px 12px;
    border-radius: 24px;
    text-transform: uppercase;
}

You will still need to add a plugin like Conditional Widgets or Widget Logic to remove the empty widget if you’re using the Sidebar for Pages.

[Soumyadip]

Where to put those…
I am a complete newbie in this.. I placed this css to the customisation >> additional css and php script to my function.php file.. what to do now..nothing appears in the sidebar

[David]

It creates a shortcode:

[db_author_box]

Just add that to a HTML widget in your sidebar

[Soumyadip]

Thanks that is working.. but how can i bigger the gravatar image size and make it stand out in the center…as mentioned on that website

[Leo]

Can you link us to the page where the solution is currently applied?

[Soumyadip]

i am checking this in localhost.. i want something like this https://www.recipetineats.com/creamy-mushroom-pasta/
check the author box on the sidebar and after content…
What plugins or scripts they are using.. i think they are not using any sort of plugin for author box..i have checked the source code..
It must be some scripts for both sidebar and after content author box..

[David]

Remove the shortcode from the widget.
Then:

1. Make sure you have the Element module activated in Appearance > GeneratePress
2. Then Appearance > Elements > New > Hook.
3. Add the Shortcode in the content of the hook.
4. Select the before_right_sidebar_content hook.
5. Check execute shortcodes
6. Set Display Rules to Posts > All Posts
7. Remove the CSS i provided earlier and add this:

.author-box {
    text-align: center;
    padding: 0 20px 20px;
    margin-bottom: 20px;
    background-color: #f6f5f3;
    margin-top: 70px;
}

.author-box .avatar {
    position: relative;
    top: -20px;
    margin-bottom: -20px;
}

.author-box .avatar img {
    width: 100px;
    border-radius: 50px;
    vertical-align: middle;

}

.author-box .author-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0;
}

.author-box .author-summary,
a.author-link {
    font-size: 13px;
}

.author-summary a.author-link {
    padding: 6px 12px;
    border-radius: 24px;
    text-transform: uppercase;
}

[Soumyadip]

it is working but looking very ugly…
See the sidebar – i.is.cc/2iG1MNuk.png

I have also added a hook for the after content and look at this
See after content – i.is.cc/2iG4FuD4.png

I want the image to be bigger on center-left of the box the name and description towards the left (after content)

and bigger image on the top center of the box then name and description centered aligned (for sidebar one)

You can also tell me if there is any way to add custom image other than gravatar

[David]

I built the code in a test site and it works fine, which means something else is interfering with the CSS. Really need to see the site to resolve the issues. Can you push the local site to a server so we can view. Otherwise we cannot advise.

[newmedianewpeople.com]

I can’t get this procedure working can you help me?
I would also like “author box” in the sidebar
but using an image of the author uploaded in “media”. How can I do ?

[David]

Hi there,

this link provides 2 sets of code:

https://gist.github.com/diggeddy/c448f642993866f79dbb960cbc450a6a

The <?php is added like so:
https://docs.generatepress.com/article/adding-php/

The second part of the code is CSS, copy everything except for the <style></style> tags in to the Customizer > Additional CSS.

You can then add a HTML widget containing this shortcode: [db_author_box] to a sidebar widget.

How may authors will your site have ?

[newmedianewpeople.com]

perfect works on the single post
https://marcogiangrande.it/la-postura/ (HURRA’ !!! )

but creates an empty box on the other pages
(example) https://marcogiangrande.it/piede/

I do not understand why

[David]

The code is designed only for Single Posts where the Author Meta would exist.
Will the site only have one author ? If so it would be easier to just use HTML to display the author box in the sidebar.

[newmedianewpeople.com]

will have a single author so I need a “practical” solution to insert the author box where it is needed. Thanks for your patience

[Author]

Posts