• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 45
  • Last Modified:

Create a row with three widgets Wordpress using action hooks.

Hello,

I would like to register and create an Action Hooks, within Wordpress, that will allow me to place three widgets next to each other.  I know I will need to register the sidebars in Functions.php, like so;

genesis_register_sidebar( array(
	'id'			=> 'home-mid-left',
	'name'			=> __( 'Home Mid Left', 'caroline' ),
	'description'	=> __( 'This is the home page middle section.', 'caroline' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-mid-center',
	'name'			=> __( 'Home Mid Center', 'caroline' ),
	'description'	=> __( 'This is the home page middle section.', 'caroline' ),
) );
genesis_register_sidebar( array(
	'id'			=> 'home-mid-right',
	'name'			=> __( 'Home Mid Right', 'caroline' ),
	'description'	=> __( 'This is the home page middle section.', 'caroline' ),
) );

Open in new window


This creates the widget areas in Wordpress > Appearance > Widgets, which allows me to put in three separate widgets.  

Can someone help me with the code that will place this on the front page?   Specifically creating the Action Hooks,

Thanks

SK
0
Spencer K
Asked:
Spencer K
  • 5
  • 4
1 Solution
 
Julian HansenCommented:
You need to read this pae
https://codex.wordpress.org/Widgetizing_Themes
From the page above
Register the wigets
<?php
/**
 * Register our sidebars and widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Home right sidebar',
		'id'            => 'home_right_1',
		'before_widget' => '<div>',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="rounded">',
		'after_title'   => '</h2>',
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

Open in new window

Then in your template create a widget area (if one does not exist already)
<?php if ( is_active_sidebar( 'home_right_1' ) ) : ?>
	<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
		<?php dynamic_sidebar( 'home_right_1' ); ?>
	</div><!-- #primary-sidebar -->
<?php endif; ?>

Open in new window

0
 
Spencer KAuthor Commented:
Hey Julian, hope today finds you well.

Yes, I have read that.  I posted a previous question,
Previous question

And basically I was hoping to get some light shed on the whole process by asking this questoin.   I know how to create Hooks, register widgets.

However, I do not know (and apparently no one else does) on how to change the order of the hooks on the page_home-template.php attached on the previous question.   If you can help answer that above question, I would literally go to the top of my building, strip down and run around with a sign saying "Julian is the best!".  lol.  Thats how desperate I am.
0
 
Julian HansenCommented:
Ok - so you are keen for an answer then?

Let me understand the question - you want to be able to define the order the widgets appear on the page? Or am I missing somethig.

What does your home page template look like?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Spencer KAuthor Commented:
Hello Julian,  thanks for your help here.

Yes, its that simple.  I have attached my page_home-template.php.  I can reorder all the hooks listed, using the priority numerical value,  except on this one;

(shows as widget A on the webpage.jpg attachment)
add_action( 'genesis_loop', 'wsm_home_loop_helper' );
function wsm_home_loop_helper() {
	echo'<div class="home-mid widget-area">';
	genesis_widget_area( 'home-mid-left', array( 'before' => '<div class="mid-left widget-area">', 'after' => '</div>') );
	genesis_widget_area( 'home-mid-center', array( 'before' => '<div class="mid-center widget-area">', 'after' => '</div>') );
	genesis_widget_area( 'home-mid-right', array( 'before' => '<div class="mid-right  widget-area">', 'after' => '</div>') );
	echo'</div >';
}

Open in new window


For example, I can change the priority (order in which the action is loaded on the page) of this hook by changing the number 8.
(shows as widget B on the webpage.jpg attachment)
add_action( 'genesis_before_footer', 'caroline_home_bottom', 8 );
function caroline_home_bottom() {
	genesis_widget_area( 'home-bottom', array( 'before' => '<div class="home-bottom widget-area"><div class="wrap">', 'after' => '</div></div>') );
}

Open in new window


if you look at the webpage.jpg, this shows my front page.  I just want to load widget B before A.  

Thanks Julian

PS:  Am I not being clear enough?  As I have made three questions, and no one is answering me >.<
page_home-template.php
webpage.jpg
0
 
Julian HansenCommented:
I am guessing this may be a theme issue

You have this
function caroline_home_bottom_cta() {
genesis_widget_area( 'home-mid-cta', array( 'before' => '<div class="home-mid-cta widget-area"><div class="wrap">', 'after' => '</div></div>') );
}

Open in new window

genesis_widget_area seems to be the workhorse here which points to the theme.

As per the response to your post here (https://wordpress.org/support/topic/how-to-re-order-action-hooks-widgets/) [assuming that is you] you will need to get hold of the theme creators.

Either that or consider opening up a gig - as the amount of work required to pull the theme apart to see what it is doing would be more than is reasonable for one of these QA threads.
0
 
Spencer KAuthor Commented:
Hello Julian,  thanks for your help, and I do indeed get your point about speaking to the themes creator, accept they are not answering my emails, this was also purchased a few years ago.

I do have a quick question, though, if that is ok.

The specific action I cannot reorder, we manipulate to move below other hooks, is

 add_action( 'genesis_loop', 'wsm_home_loop_helper' ); 

Open in new window


Full code snippet:
add_action( 'genesis_loop', 'wsm_home_loop_helper' );
function wsm_home_loop_helper() {
	echo'<div class="home-mid widget-area">';
	genesis_widget_area( 'home-mid-left', array( 'before' => '<div class="mid-left widget-area">', 'after' => '</div>') );
	genesis_widget_area( 'home-mid-center', array( 'before' => '<div class="mid-center widget-area">', 'after' => '</div>') );
	genesis_widget_area( 'home-mid-right', array( 'before' => '<div class="mid-right  widget-area">', 'after' => '</div>') );
	echo'</div >';
}

Open in new window


Contains the following function:

( 'genesis_loop', 'wsm_home_loop_helper' )

Open in new window


So, basically my issue stems from the genesis_loop function, that each time this is called it it places the three widgets within the loop (please see attached loop.jpg), like so

genesis_loop
home-mid-left', home-mid-center - home-mid-right
after genesis_loop

So, my question is - why do I need the genesis_loop function, is this because there are three genesis_widget areas (left, mid, right) are being called?

Just wondering if I could replace the standard_genesis loop and replace it with a custom one;
https://gist.github.com/cdils/4688612

Thus allowing me to embed it lower down the page, or at least try to assign a priority value.

Again, thanks for your help, I will certainly leave a positive review regarding your input.
loop.jpg
0
 
Julian HansenCommented:
I cannot say - it would be a function of how the the theme works.

What I can say is what you are experiencing here is not uncommon for WP - for all the hype over WP it is actually a bit of a mess.

Trying to figure out what someone has done or why is often a real pain - so take comfort in the fact that you are not alone in your frustration in terms of trying to get WP / Theme to do what you want it to.

Usually I have to go back to the source code of Theme and / or WP to figure out firstly what they are doing and then how to circumvent it. This is usually a very time consuming process (again challenging the notion that WP is a cheap alternative to bespoke websites).

Given the time constraints I can only give you guidance here - I cannot go into the source to try and figure out what is going on.

Can you replace the loop? I have no idea but there is nothing stopping you from trying it out - make a backup of your template file and then hack it to pieces - chances are you will find a solution just by going through the process.

I am sorry I can't give you more of an answer than that - theme diving takes time and right now I don't have a lot to spare.
0
 
Spencer KAuthor Commented:
Hi Julian,

I do appreciate the time you have spent on this, indeed.   And yes, manipulating themes is not as easy as it appears.  

I have done exactly that, change the loop function to another hook, and have managed to move the _loop action to the bottom of the page, and move the others up.   I would just have to apply CSS and try to move it up above the footer.

Anyway, thanks for your help.
0
 
Julian HansenCommented:
You are welcome.
0

Join & Write a Comment

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now