Add unique classes to the body tag for easy styling based on various attributes (archive, user, post, mobile, scrolling) and WordPress "is" …
Add unique classes to the body tag for easy styling based on post attributes (post type, slug, and ID) and various WordPress “is” functions:
Add post specific classes to the body tag in the post editor. Use any class name you want to uniquely style an individual post or a set of posts.
Add classes based on user scrolling through the page. You can check things like:
Add classes based on the results from mobiledetect.net’s Mobile_Detect script. This script parses the value passed by the browser in the HTTP_USER_AGENT string. Consequently, mobile detection is more of an art than a science and, unfortunately, is not perfect. You can check things like:
This plugin adds classes to the html body tag indicating:
whether or not the requesting device is a mobile device (.is-mobile or .is-not-mobile)
the type of post being viewed (.is-? where ? is the post type (page, post, whetever special post types are defined) ).
E.g. .is-page or .is-post
the slug of the post being viewed (.is-?-! where ? is the post type and ! is the post slug).
E.g. a post with slug “hello-world’ would have class .is-post-hello-world
the ID of the post being viewed (.is-?-# where ? is the post type and # is the post ID).
E.g. a post with ID “1” would have class .is-page-1
whether or not the requested page shows archived results (.is-archive or .is-not-archive)
If the page being displayed is an archive
the type of archive being viewed (.is-? where ? represents the type of archive (author, category, date, tag) )
E.g. .is-author
the slug of the archive being viewed (.is-?-! where ? is the archive type and ! is the archive slug)
E.g. a category with slug “uncategorized’ would have class .is-category-uncategorized
the ID of the archive being viewed (.is-?-# where ? is the archive type and # is the archive ID)
E.g. a category with ID “1” would have class .is-category-1
How far down the page the viewer has scrolled in pixels or as a percentage of viewport height or as a percentage of document height
Post specific class(es) that are set in the post editor
Use these classes in your styling to provide a better browsing experience for your viewers.
Create your own Custom Body Classes by adding your PHP code in the “Custom Body Classes” section.
Here’s an example. Not sure why we would want to do it, but suppose we want to do some custom styling when the page is being displayed to someone that can manage WordPress options. We might enter something like:
if (current_user_can('manage_options')) $classes[] = 'user-can-manage-options';
Then we can use the body.user-can-manage-options qualifier in our CSS styling.
Suppose you have a large h1 top margin that you want to eliminate on mobile devices to avoid a lot of white space. After activating the wp247-body-classes plugin and indicating that the .is-mobile class is desired, all you need to do is add this line to your CSS:
body.is-mobile h1 {
margin-top: 0;
}
Suppose you have a sticky header but want to shrink it by dynamically reducing the top and bottom padding from 25px to 5px as the viewer scrolls down the page based on 20 pixel scroll increments up to 80 pixels of scrolling:
Set WP247 Body Classes Scroll setting to “Scroll by Pixel” with a 10 pixel increment and an 80 pixel limit and then add the following to your CSS:
body.is-scroll-20-px header {
padding-top: 20px;
padding-bottom: 20px;
}
body.is-scroll-40-px header {
padding-top: 15px;
padding-bottom: 15px;
}
body.is-scroll-60-px header {
padding-top: 10px;
padding-bottom: 10px;
}
body.is-scroll-max-px header {
padding-top: 5px;
padding-bottom: 5px;
}
In the WordPress backend:
That’s it. You’re now ready to customize your viewer’s browsing experience.
Added Mobile_Detect 3.74.0
Added Multipage Body Classes
Added is_singular()
Fixed is_single(), is_sticky()
Updated wp247 URL
Fix post type for Custom Individual Post Body Classes
Removed Notifications Plugin corequisite
Fixed Settings API for PHP v7
Updated Admin Favorites
Added Custom Individual Post Body Classes
Added Mobile-Detect version 2.8.34
Added Mobile-Detect version 2.8.37
Added User Roles Classes
Added User Capabilities Classes
Fixed Settings API bug
Added Scroll Classes
Added page categories, post categories, and post tags options
Added ability to choose Mobile-Detect Version
Added Mobile-Detect version 2.8.26
Improved performance
Improved memory footprint
Added security to disallow script direct execution
Removed namespace use in WP247 Settings API to due errors
Made all admin classes unique to WP247 in order to avoid conflict in Admin Settings API
Corrected potential ‘active_tab’ storage conflict in Admin Settings API
Implemented Mobile classes based on mobiledetect.net’s Mobile_Detect script
Fixed PHP Error in wp247-settings-api
First release on 2015-March-1