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

Home Forums Support Add Author Bio in sidebar without any plugin

  • This topic has 21 replies, 4 voices, and was last updated 8 months ago by David.
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #1001140
    Ranjit Kumar

    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!

    #1001239
    David
    Staff
    Customer Support

    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.

    #1001561
    Ranjit Kumar

    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

    #1001575
    David
    Staff
    Customer Support

    It creates a shortcode:

    [db_author_box]

    Just add that to a HTML widget in your sidebar

    #1002034
    Ranjit Kumar

    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

    #1002053
    Leo
    Staff
    Customer Support

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

    #1002317
    Ranjit Kumar

    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..

    #1002414
    David
    Staff
    Customer Support

    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;
    }
    #1005459
    Ranjit Kumar

    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

    #1005605
    David
    Staff
    Customer Support

    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.

    #1137582
    Bruno Borsi

    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 ?

    #1137666
    David
    Staff
    Customer Support

    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 ?

    #1137683
    Bruno Borsi

    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

    #1137693
    David
    Staff
    Customer Support

    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.

    #1137694
    Bruno Borsi

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

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.