Hooks inside widgets?

Home Forums Support Hooks inside widgets?

Home Forums Support Hooks inside widgets?

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #109814
    Media Friendly

    Hi there,

    I just bought GP pro and I am loving it. That said, I am a bit of a newbie with WordPress and so I’m very slowly building up my site.

    I need to emulate this site to create a different language version of it (on a different hosting, and with WordPress instead of the original which was Drupal)

    I’m stuck at a point where I need to include some HTML (CSS is not enough) to create a graphic effect, namely, those red folded labels that serve as titles of each section. I can do it places inside GenereatePress where I can tweak the HTML (pages, hooks), but not inside widgets.

    Basically, GP renders my sidebar widgets like this:

    I have Custom CSS in place for the “widget” and “h4” classes, but it needs something also in the element below.

    I marked the place where I need to insert my code, right below the h4 title. This would be the same for every widget.

    I believe the current GP Hooks don’t have this option, do they? Would it be hard to expand GP Hooks to include hooks for top of widget, below widget title, end of widget?

    Or is there any other way, without child themes and without php code, if possible?

    Thank you and congratulations for a great theme!
    Pedro

    #109845
    Tom
    Lead Developer
    Lead Developer

    Interesting question – there’s no hooks there presently. I’ll have to look into it so see if it’s possible to add hooks in those locations.

    What kind of code are you wanting to add there? HTML? CSS?

    Maybe use a pseudo selector?

    Let me know – I’m sure we can figure something out πŸ™‚

    #109858
    Media Friendly

    Hello

    I just noticed my sample in the post above got all screwed up with the formatting I used… what is the recommended way to post HTML snippets in this forum?

    Well, if you go to the source of the homepage of the site linked above, you will see a div element with class “ribbon-edge-bottomleft”. This has the following CSS:

    .ribbon-edge-bottomleft {
    position: absolute; z-index: 1; border-style: solid;
    height: 0px; width: 0px;
    border-width: 0px 10px 10px 0px;
    border-color: transparent #591E36 transparent transparent;
    }

    This is a neat trick to create that 3D “folded ribbon” effect. I uses several bits of CSS to work, some on the title itself, some on this div below, some drop-shadows in several places, etc.

    I was able to recreate this in GeneratePress for static pages, and sections, but on the sidebar widgets I can’t because the CSS has to apply to something below the title (but something extra there, just the text below won’t do – that’s why pseudo-selectors can’t do it either).

    I need to start the widget content by adding an HTML div with class “ribbon-edge-bottomleft” right below the h4 title, but before whatever comes next in the widget content…

    I really appreciate your help, Tom.
    Pedro

    #109933
    Tom
    Lead Developer
    Lead Developer

    Hi Pedro,

    We do have a filter for the widget title, which may work for you.

    For example:

    add_filter( 'generate_start_widget_title', 'generate_custom_widget_title_ribbon' );
    function generate_custom_widget_title_ribbon()
    {
          return '<h4 class="widget-title"><div class="ribbon-edge-bottomleft"></div>';
    }

    Adding PHP: http://generatepress.com/knowledgebase/adding-php-functions/

    BTW, to add HTML in here, highlight your code and click the “code” button in the editor πŸ™‚

    #109954
    Media Friendly

    Aaand…. we have a winner!

    I installed the Code Snippets plugin and added the filter.

    My final code was a bit more complicated because I had to put the div in the end, and add an extra div class=”ribbon” around both elements (h4 and the div class=”ribbon-edge-bottomleft”). But I was able to figure it out with the help of Google.

    
    add_filter( 'generate_start_widget_title', 'generate_custom_widget_title_ribbon_start' );
    function generate_custom_widget_title_ribbon_start()
    {
          return '<div class="ribbon"><h4 class="widget-title">';
    }
    
    add_filter( 'generate_end_widget_title', 'generate_custom_widget_title_ribbon_end' );
    function generate_custom_widget_title_ribbon_end()
    {
          return '</h4><div class="ribbon-edge-bottomleft"></div></div>';
    }
    

    It worked just great! It seems GeneratePress is infinitely hackable. Will this be upgrade-safe or do I have to worry about losing these filters on a GP upgrade?

    Thank you for your excellent support.
    Pedro

    #109958
    Tom
    Lead Developer
    Lead Developer

    Definitely upgrade safe as long as those functions are in a child theme or the Code Snippets plugin – those filters aren’t going anywhere πŸ™‚

    Happy to help!

    #111425
    Media Friendly

    Tom

    I’m reopening this question because I started working on the footer widgets of my site and I realize I need something a bit different. However the Code Snippet (filter) I’m using always dumps the same HTML in every widget, without distinguishing if it’s inside the footer or elsewhere.

    My question is: inside the javascript of the filter, is there a way to test “where” I am, meaning, what is the parent class (or parent classes) of HTML that are bracketing this particular <h4> tag?

    Something like this logic:

    if (parent class includes "site-footer") {
       return "<div class="ribbon-footer"><h4 class="widget-title">"
    } else {
       return "<div><h4 class="widget-title">"
    }
    

    Thanks
    Pedro

    #111439
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’m afraid not..

    One thing you can do is add the HTML for both sidebar widgets and footer widgets in the same function, but give them their own classes (ribbon-footer sidebar-ribbon, ribbon-footer footer-ribbon).

    Then add this CSS:

    .sidebar .ribbon-footer {
          display: none;
    }
    
    .footer-widgets .sidebar-ribbon {
          display: none;
    }
    #111492
    Media Friendly

    I don’t think I fully understand your answer, but never mind – I got the general idea and figured out the rest. I was able to get what I need using CSS to select the “classes within classes”.

    BTW, I just took the trouble to register at WordPress.org so I could leave you a 5 star review! It’s very well deserved!

    Thanks!

    #111540
    Tom
    Lead Developer
    Lead Developer

    Thanks so much! I really appreciate it πŸ™‚

    #1995422
    Johnny

    Looks like this thread is from 2015 and in present day 2021 there is still no hook inside a widget?

    If so, there must be some sort of way to add a hook (custom code or include) inside a widget div?

    My client (a large corporate client) needs a lot of custom sidebar features.

    Johnny

    #1995432
    Elvin
    Staff
    Customer Support

    Hi Johnny,

    It’s possible to make a hook on the sidebar if you can place a shortcode in it.

    Check the portable_hook shortcode snippet provided here –
    https://generatepress.com/forums/topic/hook-in-hook/#post-1636333

    A wise man once said:
    "Have you cleared your cache?"

    #1997875
    Johnny

    I guess I should have clarified the ability to do this within GeneratePress and not another plugin or custom code. I guess GeneratePress still does NOT have this functionality which is crazy to think.

    #1998031
    Elvin
    Staff
    Customer Support

    There are hooks on the sidebar which are generate_before_right_sidebar_content and generate_after_right_sidebar_content but your question was “inside a widget div?”. πŸ˜€

    The widget divs come from either WordPress Core widgets or plugin added widgets. The theme really isn’t in control of what they HTML structure render.

    If you were pertaining to “inside Widget area” hooks then that’s the theme definitely has hooks inside them.

    A wise man once said:
    "Have you cleared your cache?"

    #1998063
    Johnny

    While you’re correct the GeneratePress theme does not have “hooks” inside the individual widget blocks. It baffles me since this features is not because of a limitation with WordPress but because a non-existing GeneratePress hook. With corporate clients you have to reduce the number of plugins and custom code so using the GeneratePress theme is hard to use with corporate clients who need the left/right sidebars.

    I very much appreciate everyone’s feedback and help. It is helpful so thank you. I guess I was just trying to get clarity on how to use hooks within a widget besides having to use custom code, short codes, or additional plugins.

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