Mobile Conditional Tags

[jackirt]

Hi all,

I'm using the conditional statement below to move my site title & description from the header to above the sidebar widget area. However, I need to specifically target the ipad in landscape orientation, as this orientation displays the sidebar. (I need to add this orientation to the else statement) Is there a conditional tag that specifically targets this?

//* Reposition Title Area
if ( wp_is_mobile() ) {
	add_action( 'genesis_header', 'genesis_do_header' );
} else {
    remove_action( 'genesis_header', 'genesis_do_header' );
    add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_title' );
    add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_description' );
}

Thanks!

[carasmo]

Why?

To answer your question, there is a plugin called Mobble which has classes that target devices. You can open up the plugin and see what classes you can use. Server side tech (which is what you are doing now) doesn't check orientation, that would be CSS or jQuery. Better with CSS and flexbox.

I would re-think why you are doing this. You can move content above or below with Flexbox (css) which most of the modern mobile browser will handle. There's many ways that are easier to reorder content. You can even hide the content where it is, clone it with jQuery, and appendTo the area, mixing jQuery and CSS media queries.

http://caniuse.com/#feat=flexbox

---

Genesis Theme Customization and Help

[jackirt]

This is just the best way for me to design my theme is all. The header gets in the way with the fixed sidebar, and the code I listed above works perfectly fine with how it's currently set up.

I was just wondering if there is a conditional tag for the ipad landscape, or if there is a way to target it with a width.

[carasmo]

To style for orientation and/or width ranges you would use CSS media queries.

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

---

Genesis Theme Customization and Help

[jackirt]

Yes I understand that.

I need a piece of code that goes something like this:

//* Reposition Title Area
if ( max-width 960px() ) {
add_action( 'genesis_header', 'genesis_do_header' );
} else {
remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_title' );
add_action( 'genesis_before_sidebar_widget_area', 'genesis_site_description' );
}

I can't add the add_action statements in CSS

[carasmo]

There is nothing that I know of that detects server side orientation changes. You can detect device types with Mobble, not orientation. You can move things up and down with Flexbox in CSS and hide and show with regular CSS or you can clone chunks appendTo and so forth with jQuery. That's all I can think of.

---

Genesis Theme Customization and Help

[Author]

Posts