WP247 Body Classes 2.1

by

It’s been a few years since I’ve added any new features to the WP247 Body Classes plugin. Today the plugin has been updated with a few new features and a few minor changes:

  • Removed Notifications Plugin co-requisite
  • Fixed Settings API for PHP v7
  • Updated Admin Favorites
  • Added Individual Post Body Classes
  • Added User Roles Classes
  • Added User Capabilities Classes
  • Added Mobile-Detect version 2.8.34
  • Added Mobile-Detect version 2.8.37

So, now you can tailor your web pages with even finer granularity. Imagine hiding a section of the page based on a user’s role or their capabilities. Or, imagine tailoring your web pages based on a body class specified for an individual post or group of posts. Before now, you could do this based on categories but that has it’s own limitations. Now, you can add body classes to individual posts. Say you have 3 posts that need some special treatment. Just add a body class (say “something-special”) to each post and then write your CSS for body.something-spacial { … }. It’s that easy.

Hope you enjoy the new features. Please let me know if there’s something else that might be beneficial.

WP247 GeneratePress Pre-Footer Widgets

by

GeneratePress is an awesome WordPress® theme with incredible flexibility. I was using it recently for a project I was working on and needed an extra widget area at the bottom of all web pages that had a different background from the regular footer widgets section. This need resulted in what I am calling the WP247 GeneratePress Pre-Footer Widgets plugin.

The WP247 GeneratePress Pre-Footer Widgets plugin for WordPress® adds an additional widget section to ther GeneratePress theme immediately before the footer section. It works just like the GeneratePress footer widgets and can be styled the same way as the GeneratePress footer widgets in the WordPress® Theme Customizer. In addition, if you have GeneratePress Premium installed, the WP247 GeneratePress Pre-Footer Widgets plugin will provide additional Customization options for the Pre-Footer section.

Like the GeneratePress Footer Widgets, the WP247 GeneratePress Pre-Footer Widgets Pre-Footer Widgets section can contain from 1 to 5 widgets. Here is an example of the Pre-Footer Widgets section. The area with the green background is the Pre-Footer Widgets section with 4 html widgets defined.

WP247 Extension Notification System

by

The strength of WordPress® is in it’s ability to be customized through the use of extensions (plugins and themes). Over time, these extensions are enhanced to provide new features or to comply with changes to core WordPress®. To avoid distributing flawed extensions and possibly disrupting the websites that use those extensions, extension developers need to communicate with their extension users that changes have been made and are available for testing. Unfortunately, WordPress® does not provide a mechanism for extension developers to communicate with the administrators of the sites using their extensions.

The WP247 Extension Notification System was developed to address this void. The WP247 Extension Notification System provides a standard interface for WordPress® extension developers to communicate important information about their extension to their extension users.

Two WordPress® plugins comprise the WP247 Extension Notification System:

  • The WP247 Extension Notification Server plugin runs on the extension developer’s WordPress® website and distributes notices to the client WordPress® site’s administrator(s) when the client site inquires about new notices.
  • The WP247 Extension Notification Client plugin runs on the extension user’s WordPress® site and queries the extension developer’s WordPress® website for any new notices and then displays all unexpired notices that have not yet been dismissed.

 

Creating a Dynamically Shrinking Sticky Header in WordPress Based on Scrolling

by

In this article, we are going to show how to create a dynamically shrinking sticky header in WordPress based on how far the user has scrolled down the page using the wp247 Body Classes plugin’s new Scroll Classes as described in wp247 Body Classes 2.0.

First of all, what are we talking about? Well, check out the header of this page as you scroll down. It shrinks as you scroll down the page and grows as you scroll back. Here’s how we did it.

Step 1: Install wp247 Body Classes

In our site’s WordPress backend:

  • Go to Plugins->Add New
  • Search for the plugin ‘wp247 Body Classes’
  • Click the “Install” button
  • Click on “Activate”

Step 2: Set the wp247 Body Classes Scroll by Pixel Settings

Again, in our site’s WordPress backend:

  • Go to Settings->Body Classes
  • Click on the Scroll Classes tab
  • In the Scroll by Pixels section:
    • Click on is-scroll-mid-px
    • Click on is-scroll-##-px
    • Click on is-scroll-top-px
    • Set the Scroll Increment to 5
    • Set the Scroll Start to 30
    • Set the Scroll Limit to 200
    • Click the Save Changes button at the bottom of the page

Step 3: Set the Styling for the header

And again, in our WordPress backend:

  • Go to Settings->Body Classes
  • Click on the Custom CSS tab
  • Entered the following CSS in the CSS Textarea:

  • Click the Save Changes button at the bottom of the page

Step 4: Test and adjust

That’s it. We now have a header that dynamically shrinks as the viewer scrolls down the page. Why? As the viewer scrolls down the page the appropriate is-scroll-?-px classes are added to the body tag indicating how far down the page (in pixels) the document has scrolled. The CSS body.is-scroll-?-px properties then automatically adjust the padding in the heading and the visibility of the tagline.

We could have made it smoother by only adjusting 1 pixel per interval instead of 2 pixels. But, hopefully, you get the idea.

wp247 Body Classes 2.0

by

After a couple of years using the wp247 Body Classes plugin, I’ve added a new feature that I couldn’t find anywhere else. It started out just wanting to know whether or not the page content had been scrolled. It ended up being so much more.

The wp247 Body Classes plugin can now provide multiple Scroll classes that can be added to the body tag depending on how the parameters are set. It can be as simple as the visible content is at the top of the page (is-scroll-top) and the visible content is not at the top of the page (is-not-scroll-top) to as complex as the visible content is 13 pixels from the top of the page or the visible content is more than 5% of the viewport height from the top of the page.

Scroll Classes Settings

General Settings

The general scroll settings simple indicate that the content is/is-not scrolling or the content is/is-not at the top of the page. The general scroll classes are:

  • is-scroll-top
    • indicates the top of the document is at the top of the page
  • is-not-scroll-top
    • indicates the top of the document is not at the top of the page
  • is-scroll
    • indicates the content has scrolled (a synonym for is-not-scroll-top)
  • is-not-scroll
    • indicates the content has hot scrolled (a synonym for is-scroll-top)

Scroll By Pixel Settings

The Scroll by Pixel settings allow you to be as granular as you want with scroll measurement. You can measure as little as 1 pixel difference in scrolling.

Parameters
  • Scroll Increment (in pixels)
    • how many pixels between changing the class?
  • Scroll Start (in pixels)
    • how many pixels before we start indicating that we are no longer at the top of the document.
  • Scroll Limit (in pixels)
    • how many pixels before we stop measuring and indicate that the limit has been reached.
Generated Body Classes

Scroll By Pixel is activated by selecting one or more of the following body classes to be set. All Scroll By Pixel classes end with a -px suffix.

  • is-scroll-top-px
    • indicates that the content has scrolled less than the Scroll by Pixels Start value from the top of the screen
  • is-scroll-mid-px
    • indicates that the document has scrolled between the Scroll by Pixels Scroll Start and Scroll Limit values
  • is-scroll-#-px
    • where # is the number of pixels, indicates the number of pixels the content has scrolled
  • is-scroll-max-px
    • indicates that the Scroll by Pixels Limit has been reached

Scroll By Viewport Height Settings

The Scroll by Viewport Height settings allow you to set scroll classes based on a percentage of the viewport height.

Parameters
  • Scroll Increment (in percentage of viewport height)
    • what percent of the viewport height must be scrolled between changing the class?
  • Scroll Start (in percentage of viewport height)
    • what percent of the viewport height must be reached before we start indicating that we are no longer at the top of the document.
  • Scroll Limit (in percentage of viewport height)
    • what percentage of the viewport height must the content be scrolled before we stop measuring and indicate that the limit has been reached.
Generated Body Classes

Scroll By Viewport Height is activated by selecting one or more of the following body classes to be set. All Scroll By Viewport Height classes end with a -vh suffix.

  • is-scroll-top-vh
    • indicates that the visible content is less than the Scroll by Viewport Height Start percent of the viewport height from the top of the screen
  • is-scroll-mid-vh
    • indicates that the document has scrolled between the Scroll by Viewport Height Scroll Start and Scroll Limit values
  • is-scroll-#-vh
    • where # is the percent of the viewport height, indicates the percent of the viewport’s height the content has scrolled
  • is-scroll-max-vh
    • indicates that the Scroll by Viewport Height Limit has been reached

Scroll By Document Height Settings

The Scroll by Document Height settings allow you to set scroll classes based on a percentage of the document height.

Parameters
  • Scroll Increment (in percentage of document height)
    • what percent of the document height must be scrolled between changing the class?
  • Scroll Start (in percentage of document height)
    • what percent of the document height must be reached before we start indicating that we are no longer at the top of the document.
  • Scroll Limit (in percentage of document height)
    • what percentage of the document height must the content be scrolled before we stop measuring and indicate that the limit has been reached.
Generated Body Classes

Scroll By Document Height is activated by selecting one or more of the following body classes to be set. All Scroll By Document Height classes end with a -dh suffix.

  • is-scroll-top-dh
    • indicates that the visible content is less than the Scroll by Document Height Start percent of the document height from the top of the screen
  • is-scroll-mid-dh
    • indicates that the document has scrolled between the Scroll by Document Height Scroll Start and Scroll Limit values
  • is-scroll-#-dh
    • where # is the percent of the document height, indicates the percent of the document’s height the content has scrolled
  • is-scroll-max-dh
    • indicates that the Scroll by Document Height Limit has been reached

Conclusion

The new wp247 Body Classes Scroll Classes can be used to enhance your visitor’s browsing experience. Want to see it in action? Check out the header of this page as you scroll. Try scrolling with your keyboard. Try scrolling with your mouse scroll wheel. Try it by clicking the scroll bar buttons. Try it by slowly dragging the scroll bar. Pretty cool, huh? Want to see how it’s done? Check out this article on Creating a Dynamically Shrinking Sticky Header in WordPress Based on Scrolling.

wp247 Get Option Shortcode

by

We’ve all been there, hard coded some text in our WordPress sites that exists in a WordPress option and then later changed the WordPress option value but forgot about the hard coded text throughout our website. Then, later discovered the inconsistency and had to go through and find and fix all occurrences of the hard coded text.

I am a big fan of the Shortcode Exec PHP WordPress plugin and have used it some for this type of situation. I would set up a specific shortcode for each type of data I needed. It became apparent that many of these shortcodes were pulling WordPress options data. So, to make life a little easier, I created a WordPress plugin to retrieve options data via a shortcode.

Introducing the WP247 Get Option Shortcode WordPress plugin. This plugin allows you to include WordPress options anywhere shortcodes are accepted.

Syntax

[wp247_get_option option=”desired-option” default=”desired-default” scope=”desired-scope“]

where:

desired-option is the option to be retrieved from the WordPress wp_options table.
Default: none

desired-default is the default value to be returned if the desired option does not exist.
Default: “”

desired-scope indicates which type of option is to be retrieved. scope=”site” will retrieve options using the WordPress get_site_option function. All other values are ignored and the WordPress get_option function will be used to retrieve the desired option value.
Default: “”

Examples

Include the WordPress site URL in some text somewhere:

This is my site’s URL: [wp247_get_option option=”siteurl”].

results in:

This is my site’s URL: http://old.wp247.us.

Set up a copyright notice in a footer widget:

Copyright &copy; <a href=”[wp247_get_option option=’siteurl’]”>[wp247_get_option option=’blogname’]</a>. All rights reserved.

results in:

Copyright &copy; <a href=”http://old.wp247.us“>WordPress 24x7</a>. All rights reserved.

displays as:

Copyright © WordPress 24x7. All rights reserved.

More wp247 Body Classes

by

Well, the wp247 Body Classes WordPress plugin has been out for a couple of weeks now and a few people have started using it. One person asked if it could indicate whether or not a mobile user is on a tablet. The simple answer was No. But not any longer.

Unfortunately, there is no easy way to determine the mobile device type. But, after a bit of searching, I came across a great little script from mobiledetect.net called, you guessed it, MobileDetect. This script does a lot of interrogation of the HTTP_USER_AGENT string to determine all types of mobile attributes – including if it is a tablet.

wp247 Body Classes now supports adding classes to your <body> tag based on the MobileDetect script. So, now you can go really crazy, like tailor your web design based on .is-tablet vs. .is-phone, or .is-ipad vs. .is-kindle, or .is-ios vs. .is-androidos, or .is-chromebrowser, or (well, you get the idea).

Hope this comes in handy for someone. And, if you have any other ideas of Body Classes that you would like to see added to wp247 Body Classes, then please drop us a line.

wp247 Body Classes

by

Last week, while working on a website for my daughter’s up-coming wedding, I had the need to tailor the styling for mobile devices. I didn’t like the amount of white-space above all of the headings. I am using a stock theme (which I actually bought) called Game Over by Cosmo Themes.

My requirements were:

  • I needed to be able to work with any off-the-shelf WordPress theme.
  • I needed to be able to drive styling based on whether or not the viewer was on a mobile device.
  • I needed to be able to include custom CSS styling entries.

It seemed to me that the simplest solution would be to write a WordPress plugin to test wp_is_mobile() and add a ‘is-wp-mobile’ or ‘is-not-mobile’ class to the <body> tag. And that’s exactly what I did. Voila! Works great. Now I can use custom CSS styling using body.is-wp-mobile as a CSS qualifier.

Well, as you can guess, things didn’t stop there. I found the need to do styling based on other attributes as well. So, I went through all of the WordPress is_?() functions and came up with a list that I thought would be helpful. Perhaps I went a little overboard. The end result is the wp247 Body Classes plugin.

WordPress Functions

Here’s the list of the WordPress functions included in the first release:

  • wp_is_mobile()
  • is_home()
  • is_front_page()
  • is_blog()
  • is_admin()
  • is_admin_bar_showing()
  • is_404()
  • is_super_admin()
  • is_user_logged_in()
  • is_search()
  • is_archive()
  • is_author()
  • is_category()
  • is_tag()
  • is_tax()
  • is_date()
  • is_year()
  • is_month()
  • is_day()
  • is_time()
  • is_single()
  • is_sticky()

The resulting Body Classes are basically the function name (with underscores changed to dashes) when the function returns true, or put a ‘not-‘ after the ‘is-‘ if the function returns false. As an example, is_home() would result in a is-home class being added to the <body> tag if you are on the home page and would result in is-not-home class if you are not on the home page.

For some of the functions tested, additional classes can be included if the function returns true. As an example, if is_author() returns true, along with the is-author class being included in the <body> tag, is-author-(author-nicename) and is-author-(author-id) may also be included – just in case some author’s are more special than others :).

Want to use this plugin on your WordPress website? It’s easy:

  • Login to your website’s Dashboard
  • Navigate to Plugins->Add New
  • Type “wp247 body classes” in the “Search Plugins” box and press enter
  • Click on the “Install” button
  • Click on the “Activate Plugin” link
  • Navigate to Settings->Body Classes
  • Select the Body Classes you want to be added to the <body> tag of your web pages
  • Start using the new Body Classes in your styling.

That’s it. Enjoy!