Community Forums › Forums › Archived Forums › Design Tips and Tricks › Order of Home Page Widgets for Responsive Mobile Phone Design
Tagged: responsive
- This topic has 4 replies, 2 voices, and was last updated 9 years, 3 months ago by Tonya.
-
AuthorPosts
-
January 10, 2015 at 6:10 pm #136945AmyAnneMember
I'd like to change the order of the widgets that show on my home page when I view it on a phone (it's not such a big issue on my iPad. . . I'm sure on smaller tablets it's got the same issues.) The flow of the responsive page doesn't make much sense when as just a reader.
I am using the Blossom theme from Restored 316.
The Widget areas in question are in two areas- Top Left and Top Right. . . but there are two widget areas in Top left and then the wide widget with two widgets half the width below it.
Ultimately, I'd like to see
Home-Top-Right (slider)
Home-Top-Left (Images with titles similar to menu)
Home-mid-trueleft (scrapbooking)
Home-mid left (this is actually the one that reads Photography on my blog. . . it's really the middle of that area)
Home-mid right (classes)But ultimately, I really want the three mid widgets together.
Currently it goes
Home top-right (slider)
home mid-left (photography)
home mid-right (classes)
home top-left (Images with titles similar to menu)
home mid-trueleft (scrapbooking)Here's the code for the front page. . . I'm assuming that's where the order is set and not the functions.php where the widgets are registered:
<?php /** * This file adds the Home Page to the Blossom Theme. * * @author Restored316 * @package Blossom * @subpackage Customizations */ add_action( 'genesis_meta', 'blossom_home_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * * @since 1.0.0 */ function blossom_home_genesis_meta() { if ( is_active_sidebar( 'home-top-left' ) || is_active_sidebar( 'home-top-right' ) || is_active_sidebar( 'home-bottom' ) ) { remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'blossom_home_sections' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); add_filter( 'body_class', 'blossom_add_home_body_class' ); } } //* Display content for the home sections function blossom_home_sections() { echo '<div class="home-top">'; echo '<div class="home-right">'; genesis_widget_area( 'home-top-right', array( 'before' => '<div class="home-top-right widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-mid-left', array( 'before' => '<div class="home-mid-left one-half first widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-mid-right', array( 'before' => '<div class="home-mid-right one-half widget-area">', 'after' => '</div>', ) ); echo '</div><div class="home-left">'; genesis_widget_area( 'home-top-left', array( 'before' => '<div class="home-top-left widget-area">', 'after' => '</div>', ) ); //* Add my new true left widget below top left genesis_widget_area( 'home-mid-trueleft', array( 'before' => '<div class="home-mid-trueleft one-half widget-area">', 'after' => '</div>', ) ); //* End of this customization echo '</div></div>'; echo '<div class="home-bottom">'; genesis_widget_area( 'home-bottom', array( 'before' => '<div class="home-bottom widget-area">', 'after' => '</div>', ) ); echo '</div>'; } //* Add body class to home page function blossom_add_home_body_class( $classes ) { $classes[] = 'blossom-home'; return $classes; } genesis();
Amy Anne Jenkins
http://www.amyannejenkins.comJanuary 10, 2015 at 8:26 pm #136949TonyaMemberHey there,
If you wanted to reorder widgets on all mobile devices, you can do that on the server side in the functions.php by using the conditional wp_is_mobile().
Otherwise, if you want to leave the larger tablets alone, such as the iPad, then you'll need to address it on the client side via positioning within the style.css using the @media queries for each of the mobile devices. This approach is much more labor intensive as you need to look at each device and then set the proper absolute positioning. For this one, if you are skilled with CSS, then you can use tools such as FirefoxDeveloperEdition and view the individual sizes and/or http://responsive.nutsandboltsmedia.com/?url=http%3A%2F%2Fwww.amyannejenkins.com. I typically use both tools. If you are not as skilled, then you'll want to hire a developer to help you.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampJanuary 12, 2015 at 2:28 pm #137227AmyAnneMemberThe css @media queries controls the order in which these are loading?
I get that it controls size and spacing.
My hunch was that it's loading the this way because it's loading the two sections in that order home right (which has the slider and the mid-left/mid right) and then home left (which has the top left and then my new widget)
I'm wondering if the solution wouldn't be to create a middle section put the three mid widgets in that area which are the ones that are currently causing the issues with the order of the home page on the single column responsive view- I'm assuming because one is in the top left section and the other two are in the top right section- and they should be together in that view.
Amy Anne Jenkins
http://www.amyannejenkins.comJanuary 12, 2015 at 3:06 pm #137234AmyAnneMemberThat did the trick. . . . Ended up taking code from another theme and creating a middle section with three widgets. . . and now they load together.
Amy Anne Jenkins
http://www.amyannejenkins.comJanuary 22, 2015 at 6:45 am #138254TonyaMemberHi again,
Sorry for the late reply. I haven't been receiving emails from the forum for some reason. I'm glad you got it worked out.
Cheers,
Tonya 🙂
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts
- The topic ‘Order of Home Page Widgets for Responsive Mobile Phone Design’ is closed to new replies.