Member Avatar for kimmi_baby

I have a wordpress website that I need to add an image to the end of each header. The problem is that these are widgets and all text is replaced by the widget in wordpress. Is there a way I can hard code the image to the end of the header so it won't be erased?

<div class="grid_4 widget">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 1') ) : ?>
<h2 class="beeh2">Widgetized Area 1</h2>
<p>Go to Appearance - Widgets section to overwrite this section. Use any widgets that fits you best. This is called <strong>Bottom Left</strong>.</p>
<?php endif; ?> 
<div class="clear"></div>
</div>

<div class="grid_4 widget">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer 2') ) : ?>
<h2 class="beeh2">Widgetized Area 2</h2>
<p>Go to Appearance - Widgets section to overwrite this section. Use any widgets that fits you best. This is called <strong>Bottom Middle</strong>.</p>
<?php endif; ?> 
<div class="clear"></div>

I've also noticed the h2 class I've created also isn't there when I check the website. That appears to also be overwritten.

  • 2 Contributors
  • 2 Replies
  • 101 Views
  • 16 Minutes Discussion Span
  • Latest Post Latest Post by kimmi_baby

Dani AI

Generated

Two reliable ways to add a graphic after every widget title are: (A) keep the theme markup untouched and use CSS to decorate the title, or (B) change the title markup at the theme level so the image becomes part of the title output. reported that widget output replaces the fallback title markup, so a CSS or filter-based solution is appropriate. As suggested, test changes on a dev copy or staging site first.

CSS approach (no PHP changes):
Use a pseudo-element or a background image on the widget title selector so the image is always appended at render time. This is reversible and safe for quick fixes and theming, but depends on the title element actually existing in widget HTML and may need tweaks for different widgets or old browsers.

Example CSS:

.widget h2::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background-image: url('/wp-content/themes/yourtheme/images/icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

Theme/PHP approach (robust, accessible):
Either change the sidebar registration so before_title includes the desired class, or append markup to titles via the widget_title filter. The register_sidebar route ensures every widget title gets consistent tags and classes. The filter route can inject an <img> (with proper escaping and alt text) after the title so editors’ widget titles still get the graphic.

Quick pointers:

  • Make edits in a child theme or use a small plugin to avoid losing changes on updates.
  • Use esc_url() and proper escaping for any image URL, and include an alt attribute for accessibility.
  • Clear caches (object, plugin, browser) after changes; different widgets may use different title elements (h2, h3, span), so adjust selectors accordingly.

WordPress references: widget title filter and sidebar registration are documented here:

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Is the site online to get a feel for the site?

Member Avatar for kimmi_baby

Unfortunately not. It isn't live yet :(

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.