fixed page size on mobile, make sidebar widget at top on mobile
I want to use the twentytwelve theme to replace the theme I’m currently using (with a few modifications of course), but there’s just a couple of niggles I need to fix.
Firstly, I really like how the mobile theme works on a touch device. But, I need a sidebar text widget to appear at the top of any posts, but below the menu bar (as this piece of text is very important!). How can I do this?
Secondly, I need some pages to have the desktop layout even when viewing on a mobile device, or be able to define the size of the page without the mobile trying to resize it to fit its screen. The reason for this is a couple of pages have a Google Docs spreadsheet embedded in them, and one has a Google Calendar. If you allow the mobile theme, you cannot use them properly. So I need to know how to either disable the mobile theme for certain pages, or override the page size on certain pages.
Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.
Thanks for this advice. I’ve always just modified the default theme as I see fit (changing the theme name to avoid any issues) but having read how easy it is to create a child, I’ve done that instead.
Any advice on how to accomplish the problems in the original post?
1. Create a custom page template in your child theme with a widget-capable area at the top of the page. Obviously, you’ll need to register this new “sidebar” via the child’s functions.php file.
2. Again, a custom page template would seem to be the best approach for this. You should then be able to apply page template specific CSS – including fixing the width of the page – via the classes generated on the body tag by the parent theme.
OK – I’ve had a look at the parent theme fuctions.php. I’ve not delved into a functions.php before though!
I think this is the snippet which I will need to include in my child theme functions.php:
register_sidebar( array( 'name' => __( 'Main Sidebar', 'twentytwelve' ), 'id' => 'sidebar-1', 'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
Do I need to change ‘twentytwelve’ to ‘mychildthemename’? Do I need to change ‘sidebar-1’?
And when all that’s done – how do I get this sidebar to appear only when we view it on a mobile device?
Thanks for your help so far :3
You cannot re-use that code as is. You will have to create a new function in your child them that loads your new widget area:
register_sidebar( array( 'name' => __( 'New Widget Area', 'twentytwelve' ), 'id' => 'new-widget-area', 'description' => __( 'Only available using the Foo page template', 'twentytwelve' ), 'before_widget' => '<aside id="%1$s" class="widget %2$s">', 'after_widget' => '</aside>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) );
how do I get this sidebar to appear only when we view it on a mobile device?
You/re not going to be able to make it resolution specific. But then does that matter? Desktop viewers won’t even notice the fixed minimum width if you craft the CSS carefully.
The sidebar does not need to be resolution specific as it only contains text. It can break lines or whatever. How can I get this sidebar to appear only on a mobile device though? It will only need to be visible on the home page but if it appears on all then that would be even better. I know that I can create an index.php for my child and include an area for that widget to go to, but then it will be visible on all devices and pcs the same?
I’ve just tried it – I copied the base index.php into my child theme folder, and copied the sidebar PHP from sidebar.php straight into it, just below the header. I then went into the admin panel and added a text widget into the widget area.
Then for reasons I cannot for the life of me explain – the widget appears in EXACTLY the right place on the desktop version – and EXACTLY the right place in the mobile version.
Now – onto the second issue.
- The topic ‘fixed page size on mobile, make sidebar widget at top on mobile’ is closed to new replies.