Hooks inside widgets?

[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:

<aside id=”recent-posts-2″ class=”widget inner-padding widget_recent_entries”>
<h4 class=”widget-title”>Artigos recentes</h4>
<!– I NEED TO ADD A HOOK HERE, TO INSERT

–>

• <!– normal text content here … –>

</aside>

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

[Tom]

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 🙂

[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

[Tom]

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 🙂

[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

[Tom]

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!

[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

[Tom]

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;
}

[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!

[Tom]

Thanks so much! I really appreciate it 🙂

[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

[Elvin]

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

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

[Elvin]

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.

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

[Author]

Posts