Hooks inside widgets?

Home Forums Support Hooks inside widgets?

Viewing 10 posts - 1 through 10 (of 10 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 🙂

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