Custom sidebar with two widget areas and html between them

I want to create a sidebar column that has one widget area at the top, then some html stuff (two images with links to other websites), then a second widget area at the bottom. I have succeeded in registering the second widget area, but it does not show up in the sidebar.

I have been reading various sidebar threads here, together with add-markup docs, and am still confused. I want to know: 1) how to have some html between the two widgets, and 2) how to get the second widget area actually show up in the sidebar.

Here is the current state of the website: WholePersonCare

What is my best strategy here? Do I create a sidebar.php file with some code that echos the two widget areas with html code in the middle? Or do I approach this through the functions.php file? And in either case, what sort of code do I need to use: first, to display the widgets and second, to display the html? I've tried some beans_id_prepend_markup code in the functions file, but apparently am not using it correctly. And I'm kinda clueless on what to put in a sidebar file, despite having read a bunch of the threads here about sidebars.

I'm also wondering in general about when to use add_action versus add_filter versus the whole slew of modify_action, add_attribute, and so on commands. Any insight about that would also be greatly appreciated.

Hey Wyn,

That is quite easy to achieve 🙂 Before I send you the code sample, could you advise if the Widget Area 1 + Custom HTML + Widget Area 2 should replace the main content of the page? If not, should it be above or below the main content?

Thanks,

Hi Thierry,

I'm thrilled to know it is easy (as I suspected it would be, but couldn't figure out what to do).

Layout is very standard. Header across the top like the mantel of a fireplace. Below that, wide column on left containing content, and narrow column on right with sidebar. Top of sidebar is widget area 1, middle of sidebar is html area, bottom of sidebar is widget area 2.

In other words, exactly like the layout of this community forum. Where "Start a discussion and the three bullets below that" would correspond to widget 1. "Search a discussion" would be html area. And "Forums with three bullets" would be widget area 2.

The "html area" will have two images that are linked to other websites. There will also be either a third image or a box with some text that is css styled the same as the "stuff" in boxes in widget areas 1 and 2.

It would be especially nice if the html area was editable by my client via the wordpress interface. In other words, she could make changes in a wysiwyg editor. Although that is not totally necessary. The content there would, in html code, look approximately like this:

<div class="aligncenter">
<a href="http://firstwebsite.com"><img src="https://beanscommunity.wpenginepowered.com/images/firstimage.gif" /></a>
</div>
<div class="sidebarwindow">
You can accomplish bla-bla by going to <a 
href="http://secondwebsite.com">this website</a>.
</div>
<div class="aligncenter">
<a href="http://thirdwebsite.com"><img src="https://beanscommunity.wpenginepowered.com/images/lastimage.png" /></a>
</div>

Hopefully that is clear. Thanks!

Hi again Thierry,

Having client able to edit the middle part in a wysiwyg is not all that important. I can easily do the "middle html code" in a code editor for sidebar.php and upload it via an ftp client. So the "quite easy to achieve" code sample would be splendiferous.

Thanks!

Hey Wyn,

What I would suggest is to use the current Primary Sidebar as Widget 1 area (we can rename it if you want), then just hook HTML below and another Widget area. Would that be suitable for you?

If I may ask, why not just having one sidebar with a few widgets, then Text widget with your HTML and then more widgets?

Thanks,

Hi Thierry,

Thanks so much for replying on this. Yes, having regular sidebar be widget 1, then html area, then widget 2 would be great.

I want three areas because I need the html area to have a different appearance from the widget areas. My css makes the widget boxes have the same appearance (identical 100%-of-the-sidebar widths, grey background for the headline and a grey border around the widget's ``. For the images, I do not want the 100% width and grey border, which is how it would appear if I use a text widget. (I've tried that.) It just looks weird that way.

Of course, if there is a way to specify a different css treatment of the text widget, that would also solve the problem. But I'm not aware of any way of doing that. Aside from maybe writing my own widget. But that is problematical too. I did write a widget in other instance, but didn't really understand what I was doing. Just did a bunch of copy-and-paste-and-modify until I got what I wanted. Grateful that it worked.

Apparently there is a problem with the url I posted of my current development site, so you could see what I mean. And I don't see a way to upload an image here. Here is that url again:

http://www.wyntest.wholepersoncare.com/

Thanks! Wyn

And please can you give me the code sample?

Wyn

Hey Wyn,

Below is the code snippet your could use in your child theme:

// Register custom widget area.
add_action( 'widgets_init', 'example_widget_areas' );

function example_widget_areas() {
  beans_register_widget_area( array(
    'name' => __( 'Example Widget Area', 'example-domain' ),
    'id'   => 'example_widget_area',
  ) );
}

// Append custom HTML to the Primary Sidebar.
add_action( 'beans_sidebar_primary_append_markup', 'example_widget_area_custom_html' );

function example_widget_area_custom_html() {
 ?><div class="uk-panel">Your HTML</div><?php
}

// Append custom widget area to the Primary Sidebar.
add_action( 'beans_sidebar_primary_append_markup', 'example_custom_widget_area' );

function example_custom_widget_area() {
  echo beans_widget_area( 'example_widget_area' );
}

Above we register a new widget area and append the custom HTML as well as the newly registered widget area to the Primary Sidebar.

Note that example_widget_area_custom_html() and example_custom_widget_area() could be combined in one function (they use the same hook beans_sidebar_primary_append_markup) but I separated for the sake of the example.

Have fun,

Hi Thierry,

Thank you so much -- and good to know my first guess was apparently correct.

Yes, the second widget area appears in the WP appearance > widget area. And yes, I can put stuff into this second widget area. And yes, I had succeeded in this before.

However: I still have a problem. Neither the html nor the second widget area is appearing in the sidebar. Is there perhaps a different hook I should be using? The surrounding code is:

<aside class="tm-secondary uk-width-medium-1-4" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar" data-markup-id="beans_sidebar_primary">
<div class="tm-widget uk-panel widget_nav_menu nav_menu-2" data-markup-id="beans_widget_panel[_sidebar_primary][_nav_menu][_nav_menu-2]">
/* other widget content I believe is not relevant to question */
/* problem = neither the html nor the bottom widget is being published into the code here */
</div>
</aside>

And here is the code I put first into functions.php (slightly different from the code you sent me), and then into sidebar.php. Neither worked.

// add another widget area at bottom of sidebar
add_action( 'widgets_init', 'sidebar_bottom_widgets' );

function sidebar_bottom_widgets() {

 beans_register_widget_area( array(
    'name' => 'Right Bottom Sidebar',
   'id' => 'right_bottom_sidebar',
   'description' => 'Widgets in this area will appear at bottom of sidebar'
  ) );

}

// Append custom HTML to the Primary Sidebar.
add_action( 'beans_sidebar_primary_append_markup', 'widget_area_custom_html' );

$myChildDir = get_stylesheet_directory_uri();
$imgNurseRadio = $myChildDir . '/images/NurseRadio-sidebar.png' ;
$imgChangBehav = $myChildDir . '/images/ChangingBehavior.gif' ;

function widget_area_custom_html() {
  ?><div id="nurse_radio" class="uk-panel widget-image">
    <a href="http://nurseradio.org" 
      target="_blank"
   ><img src="<?php echo("$imgNurseRadio"); ?>"
    /></a>
  </div>
  <div id="book_cover" class="uk-panel widget-image">
 <a href="http://changingbehavior.org" 
      target="_blank"
   ><img src="<?php echo("$imgChangBehav"); ?>"
    /></a>
  </div><?php
}

// Append custom widget area to the Primary Sidebar.
add_action( 'beans_sidebar_primary_append_markup', 'example_custom_widget_area' );

function example_custom_widget_area() {
 echo beans_widget_area( 'right_bottom_sidebar' );
}

I also tried copy-and-pasting your actual code into sidebar.php. That did not work either. (No html or bottom widget area appearing on page or in the code.)

I am stumped. Thanks again for your wonderful help and in hope of your spotting some totally obvious problem that I do not see.

Wyn

Hey Wyn,

I tried your exact code in a test child theme and it works as expected. I am suspectingan issue with your current setup. If you would like me to take a look, create a temp account (Admin and FTP) and send the credentials privately via the contact form (kept 100% confidential indeed),

Thanks,

Hi Thierry,

I sent you the access info on the site for ftp and WP admin the middle of last week via the contact form in your link in message above. Have you had a chance to take a look?

My sweetie is having open heart surgery the middle of next week. It would be great to get this resolved before then.

Eagerly awaiting next step,

Hi Thierry,

Woo hoo -- your code works but mine didn't (no big surprise there!) -- cause I didn't put the same id in the echo beans_widget_area( ) argument. It took me a mere 2 hours to figure this out -- that when I changed all those example bits to the names I wanted to use, I did an oops.

Thanks again -- going off to happy coding!

Delay in implementing due to a whole bunch of family health issues. I'm glad to be back on track with yay beans themes.

Welcome back Wyn, happy coding!