> WP247 Body Classes wordpress plugin resources analysis

WP247 Body Classes wordpress plugin resources analysis

Download This Plugin
Download Elegant Themes
Name WP247 Body Classes
Version 1.0
Author wp247
Rating 100
Last updated 2015-03-04 05:16:00
Downloads
27
Download Plugins Speed Test plugin for Wordpress

Home page

Delta: 0%

Post page

Delta: 0%
WP247 Body Classes plugin has no negative impact on PageSpeed score.

Home page PageSpeed score has been degraded by 0%, while Post page PageSpeed score has been degraded by 0%

WP247 Body Classes plugin added 6 bytes of resources to the Home page and 6 bytes of resources to the sample Post page.

WP247 Body Classes plugin added 0 new host(s) to the Home page and 0 new host(s) to the sample Post page.

Great! WP247 Body Classes plugin ads no tables to your Wordpress blog database.

Add unique classes to the body tag for easy styling based on post attributes (post type, slug, and ID) and various WordPress "is" functions:

  • 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()
  • $post->post_type
  • $post->name
  • $post->ID
  • $user->nicename
  • $user->id
  • $archive->slug (e.g. Category slug, Tag slug, etc.)
  • $archive->id (e.g. Category id, Tag id, etc.)

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

Use these classes in your styling to provide a better browsing experience for your viewers.

Custom Body Classes

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.

Example

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; }

Screenshots

Resources added by plugin to Home page/Post page in kB
Total size of resources for Home page/Post page in kB
Random Theme Tests
HappenStance screenshot

HappenStance

by: tomastoman

11063
100%
Dewdrop screenshot

Dewdrop

by: timsainb

21422
0%