Moving the Order of the Widgets Please…
Homepage › Community Forums › Epik Theme Support › Moving the Order of the Widgets Please…
- This topic has 19 replies, 3 voices, and was last updated 9 years ago by
Wes.
-
AuthorPosts
-
February 21, 2015 at 10:56 am #15158
I know that to change the order of the widgets on the homepage, I need to edit the home.php file.
Can you please help me understand how to do this? Wanted to move the widgets 9,10,11,12,13 right after the home widget 4.
Can you please let me know how to edit it? Thank you!
February 21, 2015 at 11:00 am #15159And also forgot to ask if moving the order of the widgets can affect the responsiveness or the css in any way?
Thank you!
February 22, 2015 at 10:09 pm #15165Question, are you planning on using widgets 5 – 8? If not, then you wouldn’t need to move any widgets around, all you would need to do is leave them empty and the 9th widget will show up directly after widget 4.
If you are planning to use those widgets, then yes you can go into your home.php file and move the widgets around. Each widget is located in the order it appears. This will take some basic PHP knowledge to do since PHP is very sensitive. One small error or typo in PHP Code could cause your site to go down. So also make sure you’re using FTP to edit your PHP files just in case that happens. If it does happen and you’re using FTP then you can Undo and revert back to instantly fix the error/typo. If you make a mistake editing a PHP file using the WordPress Admin, then a blank white screen will show up and there is no way to revert back or login to fix the issue. Thats why developers use FTP and a HTML/CSS editor to sync with it edit their files with.
February 23, 2015 at 9:45 am #15170Thank you very much Jason for your reply! I appreciate it.
Yes, I do use ftp in case something goes wrong, plus I make regular backups at the hosting level, WordPress level and manually as well.
Just trying to figure how to edit this home.php file to achieve this change of display order. Unfortunately for me, I use all the widgets, which is why I need to move 9,10,11,12,13 up right after 4.
If anyone can suggest how, here is the code:<?php
add_action( ‘genesis_meta’, ‘epik_home_genesis_meta’ );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function epik_home_genesis_meta() {if ( is_active_sidebar( ‘slider-wide’ ) || is_active_sidebar( ‘slider’ ) || is_active_sidebar( ‘welcome-wide’ ) || is_active_sidebar( ‘welcome-feature-1’ ) || is_active_sidebar( ‘welcome-feature-2’ ) || is_active_sidebar( ‘welcome-feature-3’ ) || is_active_sidebar( ‘home-feature-4’ ) || is_active_sidebar( ‘home-feature-5’ ) || is_active_sidebar( ‘home-feature-6’ ) || is_active_sidebar( ‘home-feature-7’ ) || is_active_sidebar( ‘home-feature-8’ ) || is_active_sidebar( ‘home-feature-9’ ) || is_active_sidebar( ‘home-feature-10’ ) || is_active_sidebar( ‘home-feature-11’ ) || is_active_sidebar( ‘home-feature-12’ ) || is_active_sidebar( ‘home-feature-13’ ) || is_active_sidebar( ‘home-feature-14’ ) ) {
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );
add_action( ‘genesis_after_header’, ‘epik_home_loop_helper_top’ );
add_action( ‘genesis_after_header’, ‘epik_home_loop_helper_welcome’ );
add_action( ‘genesis_after_header’, ‘epik_home_loop_helper_middle’ );
add_action( ‘genesis_after_header’, ‘epik_home_loop_helper_mid_bottom’ );
add_action( ‘genesis_after_header’, ‘epik_home_loop_helper_bottom’ );
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );}
}/**
* Display widget content for “Slider Wide” and “Slider” sections.
*
*/
function epik_home_loop_helper_top() {genesis_widget_area( ‘slider-wide’, array(
‘before’ => ‘<div class=”slider-wide”><div class=”wrap”>’,
‘after’ => ‘</div></div>’,
) );genesis_widget_area( ‘slider’, array(
‘before’ => ‘<div class=”slider”><div class=”wrap”>’,
‘after’ => ‘</div></div>’,
) );}
/**
* Display widget content for the “Welcome-wide”, “Welcome Feature 1”, “Welcome Feature 2”, and “Welcome Feature 3″ sections.
*
*/
function epik_home_loop_helper_welcome() {if ( is_active_sidebar( ‘welcome-wide’ ) || is_active_sidebar( ‘welcome-feature-1’ ) || is_active_sidebar( ‘welcome-feature-2’ ) || is_active_sidebar( ‘welcome-feature-3’ ) ) {
echo ‘<div class=”welcome”><div class=”wrap”>’;
genesis_widget_area( ‘welcome-wide’, array(
‘before’ => ‘<div class=”welcome-wide”>’,
‘after’ => ‘</div>’,
) );echo ‘<div class=”welcome-features”>’;
genesis_widget_area( ‘welcome-feature-1’, array(
‘before’ => ‘<div class=”welcome-feature-1″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘welcome-feature-2’, array(
‘before’ => ‘<div class=”welcome-feature-2″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘welcome-feature-3’, array(
‘before’ => ‘<div class=”welcome-feature-3″>’,
‘after’ => ‘</div>’,
) );echo ‘</div><!– end .welcome-features –></div><!– end .wrap –></div><!– end #welcome –>’;
}
}
/**
* Display widget content for “Home Feature 1, 2, 3, and 4″ sections.
*
*/
function epik_home_loop_helper_middle() {if ( is_active_sidebar( ‘home-feature-1’ ) || is_active_sidebar( ‘home-feature-2’ ) ) {
echo ‘<div class=”home-feature-bg-alt”><div class=”wrap”>’;
genesis_widget_area( ‘home-feature-1’, array(
‘before’ => ‘<div class=”home-feature-1″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘home-feature-2’, array(
‘before’ => ‘<div class=”home-feature-2″>’,
‘after’ => ‘</div>’,
) );echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg-alt –>’;
}
genesis_widget_area( ‘home-feature-3’, array(
‘before’ => ‘<div class=”home-feature-bg”><div class=”wrap”><div class=”home-feature-3″>’,
‘after’ => ‘</div></div></div>’,
) );genesis_widget_area( ‘home-feature-4’, array(
‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-4″>’,
‘after’ => ‘</div></div></div>’,
) );}
/**
* Display widget content for “Home Feature 5, 6, 7, and 8″ sections.
*
*/
function epik_home_loop_helper_mid_bottom() {genesis_widget_area( ‘home-feature-5’, array(
‘before’ => ‘<div class=”home-feature-bg-dark”><div class=”wrap”><div class=”home-feature-5″>’,
‘after’ => ‘</div></div></div>’,
) );genesis_widget_area( ‘home-feature-6’, array(
‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-6″>’,
‘after’ => ‘</div></div></div>’,
) );genesis_widget_area( ‘home-feature-7’, array(
‘before’ => ‘<div class=”home-feature-bg”><div class=”wrap”><div class=”home-feature-7″>’,
‘after’ => ‘</div></div></div>’,
) );genesis_widget_area( ‘home-feature-8’, array(
‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-8″>’,
‘after’ => ‘</div></div></div>’,
) );}
/**
* Display widget content for the “Home Feature 9, 10, 11, 12, 13, and 14″ sections.
*
*/
function epik_home_loop_helper_bottom() {if ( is_active_sidebar( ‘home-feature-9’ ) || is_active_sidebar( ‘home-feature-10’ ) || is_active_sidebar( ‘home-feature-11’ ) || is_active_sidebar( ‘home-feature-12’ ) || is_active_sidebar( ‘home-feature-13’ ) ) {
echo ‘<div class=”home-feature-bg”><div class=”wrap”>’;
genesis_widget_area( ‘home-feature-9’, array(
‘before’ => ‘<div class=”home-feature-9″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘home-feature-10’, array(
‘before’ => ‘<div class=”home-feature-10″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘home-feature-11’, array(
‘before’ => ‘<div class=”home-feature-11″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘home-feature-12’, array(
‘before’ => ‘<div class=”home-feature-12″>’,
‘after’ => ‘</div>’,
) );genesis_widget_area( ‘home-feature-13’, array(
‘before’ => ‘<div class=”home-feature-13″>’,
‘after’ => ‘</div>’,
) );echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg –>’;
}
genesis_widget_area( ‘home-feature-14’, array(
‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-14″>’,
‘after’ => ‘</div></div></div>’,
) );}
genesis();
Thank you again!
February 27, 2015 at 2:07 pm #15195In the future you should add the
codetag when adding your code so it shows up properly here in the forum.All of the widgets are in order exactly as they appear. Each widget is listed right after –
* Display widget content for “Slider Wide” and “Slider” sections.So you can move them around in the order that you need.February 27, 2015 at 2:18 pm #15197Jason thank you for your reply!
Also thank you for your patience, you said that I can move the order anyway I wish to but am still confused on how to do this.
Do I take this section for 9,10,11,12,13,14 and simply move it up and paste it right after 1,2,3,4 like this below?
/** * Display widget content for “Home Feature 1, 2, 3, and 4″ sections. * */ function epik_home_loop_helper_middle() { if ( is_active_sidebar( ‘home-feature-1′ ) || is_active_sidebar( ‘home-feature-2′ ) ) { echo ‘<div class=”home-feature-bg-alt”><div class=”wrap”>'; genesis_widget_area( ‘home-feature-1′, array( ‘before’ => ‘<div class=”home-feature-1″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-2′, array( ‘before’ => ‘<div class=”home-feature-2″>’, ‘after’ => ‘</div>’, ) ); echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg-alt –>'; } genesis_widget_area( ‘home-feature-3′, array( ‘before’ => ‘<div class=”home-feature-bg”><div class=”wrap”><div class=”home-feature-3″>’, ‘after’ => ‘</div></div></div>’, ) ); genesis_widget_area( ‘home-feature-4′, array( ‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-4″>’, ‘after’ => ‘</div></div></div>’, ) ); } /** * Display widget content for the “Home Feature 9, 10, 11, 12, 13, and 14″ sections. * */ function epik_home_loop_helper_bottom() { if ( is_active_sidebar( ‘home-feature-9′ ) || is_active_sidebar( ‘home-feature-10′ ) || is_active_sidebar( ‘home-feature-11′ ) || is_active_sidebar( ‘home-feature-12′ ) || is_active_sidebar( ‘home-feature-13′ ) ) { echo ‘<div class=”home-feature-bg”><div class=”wrap”>'; genesis_widget_area( ‘home-feature-9′, array( ‘before’ => ‘<div class=”home-feature-9″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-10′, array( ‘before’ => ‘<div class=”home-feature-10″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-11′, array( ‘before’ => ‘<div class=”home-feature-11″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-12′, array( ‘before’ => ‘<div class=”home-feature-12″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-13′, array( ‘before’ => ‘<div class=”home-feature-13″>’, ‘after’ => ‘</div>’, ) ); echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg –>'; } genesis_widget_area( ‘home-feature-14′, array( ‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-14″>’, ‘after’ => ‘</div></div></div>’, ) ); }Or do I change the order here:
f ( is_active_sidebar( ‘slider-wide’ ) || is_active_sidebar( ‘slider’ ) || is_active_sidebar( ‘welcome-wide’ ) || is_active_sidebar( ‘welcome-feature-1′ ) || is_active_sidebar( ‘welcome-feature-2′ ) || is_active_sidebar( ‘welcome-feature-3′ ) || is_active_sidebar( ‘home-feature-4′ ) || is_active_sidebar( ‘home-feature-5′ ) || is_active_sidebar( ‘home-feature-6′ ) || is_active_sidebar( ‘home-feature-7′ ) || is_active_sidebar( ‘home-feature-8′ ) || is_active_sidebar( ‘home-feature-9′ ) || is_active_sidebar( ‘home-feature-10′ ) || is_active_sidebar( ‘home-feature-11′ ) || is_active_sidebar( ‘home-feature-12′ ) || is_active_sidebar( ‘home-feature-13′ ) || is_active_sidebar( ‘home-feature-14′ ) )For example I would write:
f ( is_active_sidebar( ‘slider-wide’ ) || is_active_sidebar( ‘slider’ ) || is_active_sidebar( ‘welcome-wide’ ) || is_active_sidebar( ‘welcome-feature-1′ ) || is_active_sidebar( ‘welcome-feature-2′ ) || is_active_sidebar( ‘welcome-feature-3′ ) || is_active_sidebar( ‘home-feature-4′ ) || is_active_sidebar( ‘home-feature-9′ ) || is_active_sidebar( ‘home-feature-10′ ) || is_active_sidebar( ‘home-feature-11′ ) || is_active_sidebar( ‘home-feature-12′ ) || is_active_sidebar( ‘home-feature-13′ ) || is_active_sidebar( ‘home-feature-14′ ) || is_active_sidebar( ‘home-feature-5′ ) || is_active_sidebar( ‘home-feature-6′ ) || is_active_sidebar( ‘home-feature-7′ ) || is_active_sidebar( ‘home-feature-8′ ) )as you can see above I moved 9,10,11,12,13,14 right after the “home feature 4”.
Thank you again, truly appreciate it!!!
February 28, 2015 at 9:04 pm #15207@m The first part is what he’s referring to. You would only need to move the widgets in that particular section.
The other section up top right under –
function epik_home_genesis_meta() {doesn’t need to be adjusted, so you can leave that as it is.It looks like you’ve done everything right. If possible, try and test it somewhere before putting it on your main site. Although if you’re using FTP to edit then you should be good to go since you can “undo” any errors if there are any.
March 2, 2015 at 10:24 am #15224Thank you Wes and Jason again for your help.
Unfortunately for me, I am not understanding yet how to move the whole block of 9,10,11,12,13,14 and make it show after the block #4.
Thank you for all your help, do not feel like bothering you again.
You have been very supportive and I appreciate it.
Thank you!
March 2, 2015 at 1:17 pm #15225@m Did the code not work? The way you adjusted it looks like it should work. I’m referring to this comment – https://appfinite.com/topic/moving-the-order-of-the-widgets-please/#post-15197 the top block of code.
I don’t want you to give up just yet, especially since you’re at the last step 🙂
If you can create a temporary FTP login, I can login and test it for you. Just let me know.
March 7, 2015 at 5:48 pm #15240Hey Wes, thank you for being so kind and patient.
I am sure you get bombarded every day by all of your Epik users :).
If the solution is simply moving the code of the section 9,10,11,12,13,14 all the way up and paste it right after the section of 1,2,3,4 like seen below, then it did not work, things have remained the same. Is that all that is involved in moving widgets?
Or do I need to modify something else please?
Thank you!
/** * Display widget content for “Home Feature 1, 2, 3, and 4″ sections. * */ function epik_home_loop_helper_middle() { if ( is_active_sidebar( ‘home-feature-1′ ) || is_active_sidebar( ‘home-feature-2′ ) ) { echo ‘<div class=”home-feature-bg-alt”><div class=”wrap”>'; genesis_widget_area( ‘home-feature-1′, array( ‘before’ => ‘<div class=”home-feature-1″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-2′, array( ‘before’ => ‘<div class=”home-feature-2″>’, ‘after’ => ‘</div>’, ) ); echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg-alt –>'; } genesis_widget_area( ‘home-feature-3′, array( ‘before’ => ‘<div class=”home-feature-bg”><div class=”wrap”><div class=”home-feature-3″>’, ‘after’ => ‘</div></div></div>’, ) ); genesis_widget_area( ‘home-feature-4′, array( ‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-4″>’, ‘after’ => ‘</div></div></div>’, ) ); } /** * Display widget content for the “Home Feature 9, 10, 11, 12, 13, and 14″ sections. * */ function epik_home_loop_helper_bottom() { if ( is_active_sidebar( ‘home-feature-9′ ) || is_active_sidebar( ‘home-feature-10′ ) || is_active_sidebar( ‘home-feature-11′ ) || is_active_sidebar( ‘home-feature-12′ ) || is_active_sidebar( ‘home-feature-13′ ) ) { echo ‘<div class=”home-feature-bg”><div class=”wrap”>'; genesis_widget_area( ‘home-feature-9′, array( ‘before’ => ‘<div class=”home-feature-9″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-10′, array( ‘before’ => ‘<div class=”home-feature-10″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-11′, array( ‘before’ => ‘<div class=”home-feature-11″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-12′, array( ‘before’ => ‘<div class=”home-feature-12″>’, ‘after’ => ‘</div>’, ) ); genesis_widget_area( ‘home-feature-13′, array( ‘before’ => ‘<div class=”home-feature-13″>’, ‘after’ => ‘</div>’, ) ); echo ‘</div><!– end .wrap –></div><!– end #home-feature-bg –>'; } genesis_widget_area( ‘home-feature-14′, array( ‘before’ => ‘<div class=”home-feature-bg-alt”><div class=”wrap”><div class=”home-feature-14″>’, ‘after’ => ‘</div></div></div>’, ) ); }Thanks again, truly appreciate it! I am sure a lot of users moving forward, will benefit from this post if they wish to move the display order of the widgets.
March 7, 2015 at 9:07 pm #15252Yes, by changing that part of the code (in the way that you did it), it’s supposed to work. Did that not work when you tried it?
That’s exactly how I’ve always done it……By editing the order of the widgets on the Home.php file. If it’s still not working, then I’m guessing it could be a caching issue. Do you have any cache plugins being used?
I can login and figure this out a lot faster if you can create a login for me. Just create a temporary login, and I can get this fixed Instantly.
March 10, 2015 at 2:11 pm #15257Hey Wes, I purged the cnd completely as I use Maxcdn and cleared all caches multiple times and it does not seem to work.
If there is a way I can message you privately, I will send you admin login into the WP of my site, I have it backed up in case something goes wrong, no worries.
Thank you very much, really appreciate it!
March 10, 2015 at 2:36 pm #15258Also I forgot to ask a small question if anyone can help me please. I need to remove the h1 tag from the logo, how do I do that?
Wish to remove it altogether or at least make it into h2. I searched for it in the php of Epik but could not find this function anywhere. Thank you!!!
March 10, 2015 at 9:45 pm #15261@m you can add the login info here in the forum, just make sure and click the box labeled “Set as private reply” at the bottom of the form.
March 11, 2015 at 8:20 pm #15269This reply has been marked as private.March 12, 2015 at 12:35 pm #15312@m can you provide a temporary FTP login? This is very important just in case there is an error somewhere, I don’t want the entire site to go down if we add something that conflicts with other PHP code (using the WordPress editor instead of an FTP program) and not be able to undo or go back from the error.
We can handle the original issue/question here on this thread. If you have a separate question/issue please create a new thread for that so we can keep the forum easier to search when others have similar questions. It’s easier to organize and manage when there is one topic or question per thread.
So just let me know if you can provide an FTP login so I can get the code working immediately.
March 18, 2015 at 4:59 pm #15351This reply has been marked as private.March 22, 2015 at 11:07 pm #15373Ok I see what happened. Thanks for sending me the FTP login, it took me 30 seconds to see exactly what was going on. I didn’t know you replaced the functions/sections in addition to the widget locations, so thats why it didn’t show up in the new order that you’re trying to do.
It should be fixed now. Each of those widgets in your home.php file are inside a function/section. This labels and groups the widgets together in separate sections that appear on your homepage. So If you look near the top you would have seen this originally –
remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_top' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_welcome' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_middle' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_mid_bottom' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_bottom' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );The last step was to reorganize the two sections labeled –
epik_home_loop_helper_mid_bottomwithepik_home_loop_helper_bottomand reverse the order that they appear since you reorganized those two sections in your home.php file. To do so, you would need to replace the code above with the following (I already did it for you) –remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_top' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_welcome' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_middle' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_bottom' ); add_action( 'genesis_after_header', 'epik_home_loop_helper_mid_bottom' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );Everything should be fixed now. Those two lines were the only thing that needed to be adjusted.
March 23, 2015 at 9:18 am #15390Wes, thank you very much!!! I appreciated it a lot.
Strangely I did not change the first part (functions) or maybe I did but do not remember.
Thank you again and stay well!!!
Wish you tons more success with your fantastic Epik theme!!!
March 25, 2015 at 12:44 am #15411You’re Welcome! Glad everything is working!
-
AuthorPosts
- The topic ‘Moving the Order of the Widgets Please…’ is closed to new replies.