Make Your Website Fresh Again With These 7 Tips

Back in the day when websites were all about content, web design wasn’t too much of an issue. As long as you had amazing content, the overall look of your website wouldn’t matter. Of course, times are a-changin’, and keeping your website fresh and updated is now a default strategy for any site owner.
Site visitors have become more meticulous in choosing the company and brand to patronize, based on the websites that they visit. More than textual content and aesthetically pleasing web design, keeping your website fresh is of utmost importance to retain customers and encourage potential clients.
If your website has been around for a while – and you’ve been using the same design and theme for years – maybe it’s time for a little upgrading. Especially when your site begins to get a steady increase in traffic, returning visitors may want to see the same outstanding features in your site, but would also expect to have some changes that would make them more interested.
How Often Should Websites Be Updated?

Whether you own a personal blog, a corporate website or an e-commerce store, it is essential to keep your website fresh by updating it on a regular basis. The frequency of updating the website can be based on many factors.
For instance, it may be a waste of your effort to update a corporate website as often as you would an e-commerce store. If you are running an online store, you may have products posted online that are no longer offered, or you may have new products to sell.
This holds true for personal blogs, in which followers may want to receive new and fresh information from the blogger. As a general rule, publishing three new blog posts in a week is enough to keep your followers coming back.
Corporate websites are a bit difficult to update once the website has been published. However, some websites incorporate news releases and blog posts within their site, all of which can help increase the interest of online visitors.
Why Some Websites Fail to Capture a Good Following
The reasons why corporate websites fail may be due to the following reasons:

Not allocating enough resources to make it work (both money and time)
Article titles not strong enough to catch the attention of online visitors
Lack of useful, unique and informative content
Lacking the knowledge of using the right keywords
Not giving it enough time
Not measuring the effectiveness and ROI from blogging
Wrong choice of blogging platform

Tips In Making Your Website Fresh
In order to captivate the attention of online visitors – especially the ones who are returning and expecting more – you should create a website that is not only pleasing to the eyes, but is also full of information that they need.
If you want to make your website fresh like the morning dew, here are some tips to freshen up your pages:
1. Add a blog
What makes a website come alive is the amount and quality of information that makes visitors come back frequently. For instance, if you are running a business consultation firm, you may add articles that can help visitors understand about business and other topics related to it. This is on top of citing the services that you can provide.
Your online visitors would want your website to be a one-stop shop where they can receive tips on how to start and maintain a business, the sacrifices that an entrepreneur may face, the qualities of a good entrepreneur, and more.
While you may have created a list of topics that you want to feature on the blog, make your articles as concise as possible. A long article can bore out users, which can then eventually lead them to leave the website. On the other hand, a brief article piece may turn off search bots due to lack of authority in the topic.
2. Provide opportunities for discussion
Online visitors are not satisfied with merely looking at the products or services on a website. Some of them may have questions that they would want to be answered.
For this purpose, putting up a forum allows them to talk to other customers who have bought your product or sought your service. The forum will become a lively channel for people to exchange ideas, product reviews, and other experiences.
3. Add videos
We are in the age where videos play a very significant part of our life. For instance, adding tutorial videos for DIY websites can encourage online visitors and existing clients to view the video files.
As for other types of businesses or industries, marketing campaigns using videos are extremely powerful forms of media to hype up your company or business.
Of course, in order to pull this off successfully, you need a team solely for generating video content. This group of people may include (but is not limited to) camera personnel, videographers, video editors, segment directors, cinematographers, writers, and actors.
4. Repurpose old content
Old blog posts or articles may still be considered valuable for the current generation of readers, and the best way to put it back into circulation is by updating or repurposing the old content.
Here are some techniques in bringing life back to your old articles:

Write a spin-off article from a subtopic in the original post
Put links to your popular posts on the sidebar or as a list on a new page
Convert your old articles into a downloadable whitepaper
Reformat your old content into new forms of media, such as an infographic or a video
Post your links on social media, and use a throwback reference
Change the post date to today, and add new content

5. Add event calendars
Want to let your site visitors expect something from you at specific days of the year? Send them alerts on key events of the year for your website – say, your company’s founding anniversary or an upcoming event. This technique keeps your website fresh and new, without having to add too much content (and only by using your existing calendar).
This strategy can be helpful for schools or non-profit organizations where they can have several activities lined up every month. This helps students, officials or members to be updated with the latest events.
6. Adding high-quality images or cinemagraphs
Online users usually stop at websites with attractive and colorful images. Lately, cinemagraphs have been trending in web design, since it can create a visually striking story that increases the interest of online visitors. These cinemagraphs has been found to have a positive impact on the click-through rate (CTR).
In other words, keep tabs with the latest image design trends, so that your site photos won’t look stale and obsolete.
7. Change the overall website design
Over time, the design of your website may look outdated. Because of this, there is a need to be aware of the latest trends that can help encourage online visitors to stay and browse through the whole website. Being left with a design that has been in existence for more than 10 years may not encourage people to stay, since recent web designs provide a more pleasant experience to the users.
On the flip side, it may be necessary to retain the style of the page where the customers have been accustomed to. It’s up to you to decide where your site visitors are leaning towards, in terms of changing your web design.
However, if your website is recently plagued with errors and threats of malware, then it may be time to update your website design, both on the front and backend. More than aesthetics, one of the biggest reasons to change your site design is security.

Updating a website requires time, effort and money. But instead of looking at this as a burden, it should be perceived as something worthwhile. Not only will it help to increase the traffic on your website, but it may also increase the revenue for your business.
We hope you find these tips on making your website fresh again helpful. On a final note, your motivation for updating your website should be customer satisfaction – that your site visitors will be happy browsing through your site and getting an amazing user experience.
The post Make Your Website Fresh Again With These 7 Tips appeared first on Web Designer Hub.

Essential E-Commerce Site Design Techniques To Prevent Shopping Cart Abandonment

E-commerce shop owners understand the importance of the shopping cart. Unfortunately, some online business owners have to deal with customers abandoning their shopping cart before making a purchase. You can prevent shopping cart abandonment by your customers, by improving their online shopping experience.
Shopping Cart Abandonment At A Glance
According to the Listrak Shopping Cart Abandonment Index, ecommerce websites lose at least 75% of potential buyers before users cross the line and convert in a best-case scenario. On the other hand, 4 out of 5 shoppers abandon the shopping cart before making a purchase.
In addition, shopping cart abandonment averages as high as 87% for checkout pages and increases to as high as 90% during Fridays and weekends as revealed by this article. Aside from that, among the different sectors, the travel industry registered the highest abandonment rate at 85%.
Site Design Tips To Avoid Shopping Cart Abandonment
Now that you have a clearer picture of the state of e-commerce marketing, here are 5 tips on enhancing your customer’s online shopping experience and prevent them from abandoning the shopping cart:
1. Push For A Remarketing Campaign

First things first, you need to accept the fact that there are customers who will abandon their carts. The good news is that you can lure them back to your ecommerce website with remarketing campaigns.
By trying to lure them back, you are giving yourself a chance to get visitors convert, which can be unlikely in today’s multi-device online environment.
There are many online tools that you can use for remarketing shopping cart abandoners. You can use, for example, Facebook Ads to remarket your products to visitors. Google AdWords can also be effective especially for products that may not be visually appealing to visitors.
2. Be Transparent with Costs

When shopping online, customers expect to pay only one cost. To them, nothing can be more frustrating than discovering that they are being bombarded with tons of hidden cost particularly shipping. Data published United Parcel Service (UPS) reveals that one of the highest costs associated with online retail is shipping.
As much as possible, be crystal clear with shipping costs. Statistics from Kissmetrics reveal that 28% of online shoppers will abandon their shopping cart when faced with hidden shipping costs. After all, your customers deserve some transparency on your part.
3. Offer Money-Back Guarantee

One of the major challenges faced by online retailers is rejection and hesitation on the part of customers. On your part, you need to remove these hesitations and uncertainties from shoppers. An effective way to do this is by offering money-back guarantees.
For any online store, getting the trust of your customers is important. Remember that online shoppers only see images of what they are planning to buy. They cannot touch or feel the actual product, and will rely on whatever information you provide them.
While e-commerce has gone a long way, there is still a huge amount of doubt on the part of customers that e-commerce retailers should address.
By offering money-back guarantee or other assurances, doubts by the customer will be greatly reduced. Removing hesitations of the customer will bring the focus to the product itself. In other words, you should do whatever it takes to remove any doubts that your customers may be having.
4. Speed Up Page Loading

A recent report revealed that shopping cart conversion rates drop by 7% for every second of delay in loading a page. For online shoppers who do not have the patience to wait for the page to load, a slow loading website could mean lost business for you.
As much as possible, you should optimize your page so that it loads quickly.
In order to speed up your website’s loading time, you should make sure to do the following:

On-page technical elements should be well-optimized.
Images should be optimized while maintaining the balance of quality and speed.
Reduce the use of ad network trackers, social plugins, and poorly implemented tags that can only slow down page loading time.

5. Correct Any Errors In Your Conversion Pathways

User behavior plays a huge part in converting visits to sales. It is your job to make sure that the interaction of your customer with your site is straightforward. It is extremely important to check any “leaky” area in your conversion pathway.
There are many concerns that you need to address in order to identify potential errors in your conversion pathway. Some of these include the effect of traffic on your conversion rate, bottlenecks in product pages, and confusion on the part of visitors when navigating your website.
There are other elements beyond your control that you should also be aware of, such as delays in your customer placing their order, the financial institution or payment gateway processing the payment, and others. You do not want your customer abandoning their purchase just because they were not informed if their order was successfully placed.
6. Ensure Easy Navigation Between Cart And Store

As an online retailer, it is your job to deliver convenience to your customers. You do not want your customers buying somewhere else just because they cannot navigate your online store. The easier it is for them to move from your cart to the store, the more likely they are to make a purchase.
The bad news is that this is the most difficult to correct. In fact, even e-commerce giants like Amazon continue to experiment with their checkout system. Optimize the shopping experience to make it easier for customers to make purchases.
7. Give Shoppers Multiple Payment Options

The reward that you can get for providing shoppers with a satisfying shopping experience is them making a purchase. However, if you provide only one way to make payments, chances are they would change their mind and cancel their purchase. It is therefore important that you offer customers several payment options.
While credit card is still the preferred payment method, some consumers look for other channels for completing online purchases. Aside from PayPal, mobile payment systems like Apple Pay and Google Wallet are on the rise.
Offering customers multiple payment options lessens the likelihood that they will abandon the shopping cart.
Final Word
Taking these tips into consideration can go a long way in ensuring a worthwhile online shopping experience for your customers. At the end of it all, they could end up buying one of the products you are offering.
The post Essential E-Commerce Site Design Techniques To Prevent Shopping Cart Abandonment appeared first on Web Designer Hub.

Pros and Cons of Putting a Sidebar on your WordPress Site

How websites look these days is light years away from past web design standards. Two decades ago, AOL was a big name in the internet, while Microsoft was on its way to introducing Windows 98. Google wasn’t even around that time, and it was only in 1998 that they were launched into the virtual world with a simple design because they focused on function rather than form.
Well, hello there, old Google layout!
Over time, the web design industry has undergone so many updates and upgrades. Along with these changes is the shift in how visitors become prospective clients of an e-commerce site such as Shopify or followers of a blog. One of the biggest and most influential upgrades in the past few years is the rise of content management system (CMS) frameworks such as WordPress to make website creation as easy as pie.
The rise of the sidebar
WordPress was one of the pioneers of the use of sidebars. In the past, the sidebar is a non-negotiable section of a webpage for the sole purpose of offering a much more convenient way to add new content and expand the functionality of a website.
However, things have really changed dramatically for web design. Gone are the days when you had to follow standard structures such as a sidebar menu and a main column for content. In recent years, different kinds of website layouts have sprung up, many of which don’t make use of a sidebar.
The need for a sidebar
The question for any website developer or business owner is this: “Do I need to put a sidebar on my WordPress website?”
To answer this, you need to know what your goals are in making the site in the first place. From this mission, you can already determine whether a sidebar is necessary or not.
Elements of the sidebar
WordPress sidebars come in many variations, but all of them have one thing in common: widgets. The power of the sidebar comes with the ability to expand the content and enhance the layout of a webpage by reserving some space for other important parts of your site.
Here are some of the common items found in most WordPress websites:

Email subscription form
Social media accounts of the blog
Popular posts
Archive of previous posts, usually presented by month and year
Blog statistics
Site visitor’s location
Search box
Author box
Related posts

These items are usually placed in the sidebar as widgets, for easier insertion, editing, or removal. Take note that these are just a handful of widget possibilities for the sidebar.
Most WordPress themes have incorporated a sidebar, but you can customize your site to have either zero or more.
Advantages of the sidebar
Website owners have enjoyed the benefits of using a sidebar, some of which include the following:
Connection to social media
Promotion of your company or blog’s social media profiles on a sidebar may increase the probability of being followed on social networking sites. This allows the reader to get updates about the website or blog. The goal of this technique is really to increase followers and gain traction in terms of popularity and lead generation.
Adding social media links on the sidebar is very useful when you want to create a huge fan base for an advocacy or brand awareness.
Lead generation and potential conversion
An email subscription form on your sidebar allows your site visitors to receive newsletter updates about your company or website. This is useful to increase readership, disperse information on updates about upcoming activities, and connect with your loyal followers.
Additional space for more information
Some readers may want to get additional information or related posts about the article on a page in your website. Presenting internal links and related information about the page that the visitors are viewing will increase the chances of them staying longer and even returning for more. If readers see that your website is able to provide what they are looking for, their loyalty and potential for returning will become stronger.
Disadvantages of the sidebar
However, while there are advantages, there may also be some drawbacks in putting a sidebar on your site. Here are some of them:
Disruption in site design
Sidebars may become a distraction to the overall look of the website. Some website owners feel the need to put everything on the front page, leading them to put more than 4 sidebars on a single page! Having too much content on a single page could be overwhelming for your site visitors, and may even turn them off and lead them to visit your competitor websites instead.
Website owners who want to focus on clean and minimalist design may choose to forego sidebars so that the attention of the reader goes directly to the main content.
Redundancy of information
Some web developers have the tendency to emphasize the message of the main content by either repeating the thought on the sidebar or crowding the sidebar with keywords. Although this may appear as a good SEO strategy, having repetitive content on the main window and the sidebar may put off your site visitors, and consequently bring your search ranking down.
No intended use
If your main purpose for putting a sidebar on the site is to merely follow some trend or make use of what the default WordPress installation is offering, then a sidebar may not be necessary for you. No matter how many widgets you put, there is no point in adding a sidebar if it looks unnecessary in relation to your main content.
Ultimately, it boils down to one important point: The use of the sidebar depends on the intention of the site owner. If you think there is a need to make use of the sidebar, make sure that you choose the right widgets to enhance your content rather than create fluff.
Here’s a final tip for those who are still hung up on the need to use sidebars: You don’t have to put a sidebar on the homepage or landing page. A lot of WordPress themes already allow the placement of sidebars in specific pages or sections where they may be relevant to the content.
What really makes a visitor interested to stay on a website is a good balance between content and design. Make sure that the sidebar contributes to that objective instead of destroying it.
The post Pros and Cons of Putting a Sidebar on your WordPress Site appeared first on Web Designer Hub.

Behind the scenes: A/B testing at Highrise

Highrise launched in 2007 and was a leader in teaching folks about some successful marketing split tests. Today we’ve got a few new lessons. First let’s talk a bit about strategy, and then I’ll share a couple important results we’ve seen.When to stopHere at Highrise, we split test constantly. Since these can take quite a lot of time to reach statistical significance, and I want to keep using our time efficiently, it’s important to have another test ready in the queue as soon as one completes. Even if it’s changing a word on a single button.But it’s super easy to get stuck. We run dozens and dozens of experiments and often end up with nothing. No changes. Or the new stuff just makes things worse.So when do you stop? It’s helpful to come up with some baselines. We look at other products out there, our past, and our sister product Basecamp. How are we doing compared to those baselines? In some cases we’re behind, so those are ripe areas for testing. Other areas we’re on the baseline, and have decided our time is better spent elsewhere.Don’t get lazyHere’s a lesson that came to us at great cost: we weren’t measuring enough variables. When I took over Highrise in 2014, we immediately started split testing an entire new marketing site design. We compared the old and new site’s signups. Waited until we had a statistically significant result. And bingo. Saw the new site was doing better, and switched all our traffic over to it.We were befuddled then when we saw our growth plateau. What were we doing wrong? We’ve been improving the product at a super fast pace. People seem really happy.Turned out we were measuring the wrong thing. We were split testing total signups which include free and paid.When we dove in, we saw our new marketing site had actually hurt our paid conversions but improved our free conversions masking the overall impact. And those free conversions weren’t upgrading at a high enough rate to make up for it.But that’s not the whole story either. People who were still signing up for our paid plans, were now more often signing up for the cheaper plan instead of what was our most popular plan — a more expensive one. Totally changing our revenue mix.The lesson: measure more detail than you think you need to. Put the extra work into splitting up the different variables that are important to you in your split test regime.It could also be worth paying for a data scientist to come in and make sure you’re doing the right thing. I’ve been split testing marketing sites for many years, but it took Noah Lorang at Basecamp to open my eyes that we were doing something pretty stupid. And it didn’t take him long either. This doesn’t have to be an elaborate project. Just make sure you you’re testing the right things. Don’t get lazy. Or you could pay an expensive price like we did.Some interesting resultsToo many plansOne change we made when we relaunched our marketing site was to our plans page. We went from this:to this:I wasn’t in love with the change, but I didn’t hate it either. It brought our new, more minimal, aesthetic to the plans, and it also addressed one thing we heard from some customers: “Do you have a bigger plan?”We did! We just didn’t advertise it. So let’s add that. Can’t hurt?Well it did hurt (like I mentioned above — we just didn’t see it soon enough). Paid signups went down and people started signing up more for the Basic plan.When we moved back to something more akin to the old design:Paid signups went back up 51.4%. And our new revenue improved 67.6%!!Quite the mistake and improvement. Why the difference? Probably easy to guess that more plans doesn’t mean better. Too many choices. The extra choice probably just made for too much anxiety and killed people’s desire to sign up. And the original design, really made things a no-brainer: “Here, don’t debate, just sign up for this.”The free link also became bigger in our changes that weren’t working well, encouraging folks to bail into that plan. So we bumped the font size back down to what it was originally.Revisit old hypotheses and assumptionsAnother interesting result we just bumped into was an explainer video we had on our features page.I remember when we added that over a year ago; we split tested it of course. Though again, a mistake we made, we only split tested total conversions.Recently we decided maybe the explainer video wasn’t up to date enough (Highrise is improving at a very fast clip), but before removing it, we tested three things: removing it, leaving it at the bottom of the page where it was, or moving it to the top.Removing it improved our free signups by 53.2%! And didn’t change our paid signups at all.Why would getting rid of a video sitting at the bottom of a page that doesn’t get a ton of our traffic make that much of a difference?It’s also an important reminder that not all customers behave the same way on the site. Maybe folks who are more anxious about signing up spend more time pouring over the details of our features and how we present them. Then they bail into a free plan. What can we do to take advantage of that information? Maybe offer the free signup at the bottom of the features page? Improve our call to action on that page stressing free trials? Lots of options when you get more granular about what you’re testing.It’s also worth rethinking a lot of assumptions and hypotheses that we thought we knew a couple years ago. Not just because our testing is more thorough. But also because maybe these things have changed since then. Maybe an image or a video or some copy that converted well just doesn’t have the same impact today. Maybe the consistency of those images with other assets have changed (logos and styles in screenshots). Maybe, simply tastes have changed since we tested those.Just a couple recent lessons from us. Stay tuned for a lot more. There’s some really interesting changes we’ve been testing and haven’t gotten quite right yet, but have angles on improving...P.S. You should follow my YouTube channel, where I share more behind the scenes of Highrise and how history, psychology, and science help us run our own business. And if you find yourself overwhelmed while managing your customer relationships, customer support, or the tons of people you communicate with, check out how Highrise can help!Behind the scenes: A/B testing at Highrise was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

Lots of ways to add an ID to the `body` element

The following is a guest post by Trishah Woolley. Over the years, Trishah has collected a ton of code snippets that to the job of adding IDs and classes based on some variable information, like the URL or data from WordPress. Each of these snippets were either either collected from documentation or a similar online resource, or written by Trishah based on standard features of the language and API's involved.

Over the time I have been doing WordPress web design, there are occasions when I have needed to add an ID or class to the <body> tag. For example: This often happens when integrating a 3rd party into WordPress that creates its own pages that WordPress doesn't recognize. Or I need more nuanced classes for the site design I'm creating.
To change the look of these pages in a way that the styles are scoped just to that page, we need a way to target just that page or category of pages. Below are some of the ways I have found helpful to add IDs and classes to the <body> of both non-WordPress (but still PHP) and WordPress pages.
PHP Variations
#01 - Add ID from the URL
This will strip the forward-slash, `.php`, and the `?pg=`, from the URL and use the rest as an ID. Change the array to match your particular situation.
$page = str_replace(array('/', '.php', '?pg='), '', $_SERVER['REQUEST_URI']);
$page = $page ? $page : 'default';

<body id="<?php echo $page ?>">
<body id="directorytest12345">
#02 - Add ID and Class from URL
This looks for the `?` in the URL and turns what comes before it into an ID and what comes after it into a class.
list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);

<body id="<?php echo $page ?>" class="<?php echo $class ?>">
<body id="directorytest" class="12345">
#03 - Add ID from file name
This removes the `.php` and uses the file name as the ID:
<body id="<?=basename($_SERVER['PHP_SELF'],'.php')?>">
<body id="test">
#04 - Add ID from First Level Directory
This will grab the first level directory and use it as the ID.
$url = explode('/', $_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';

<body id="<?php echo $dir ?>">
<body id="directory1">
WordPress Variations
WordPress has a native function for applying classes to the body:
<body <?php body_class(); ?>>
Which results in output like this, depending on what page you are on:
<body class="single single-post postid-245501 single-format-standard">
But you can still do more, like combine it with techniques from above and add classes of your own.
#05 - WordPress: Add a Class to Default Body Class
Add your own class to the ones generated by WordPress with this:
<body <?php body_class('class-one ); ?>>
<body class="page page-id-2 page-parent page-template-default logged-in class-one">
#06 - WordPress: Add Multiple Classes to Default Body Class
You can add multiple classes like this:
<?php body_class(array("class-one", "class-two", "class-three")); ?>
<body class="page page-id-2 page-parent page-template-default logged-in class-one class-two class-three">
#07 - WordPress: Add ID and Class to Body Tags
This just may be my favorite! It does the same as the one above but adds the new class to the WordPress' body_class:
list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);

<body id="<?php echo $page ?>" <?php if (function_exists('body_class')) body_class($class ); ?>>
<body id="directorytest" and class="page page-id-2 page-parent page-template-default logged-in 12345">
#08 - WordPress: Use the Slug
<body id="<?php echo $post->post_name; ?>">
<body id="slug">
#09 - WordPress: Conditionally Add Extra Classes
This a body class to the ones generated by WordPress with conditional if() logic. For example, here we're using the is_shop() boolean logic provided by WooCommerce:
<body <?php if (is_shop()) { body_class('shop'); } else { body_class(); } ?>>
<body class="page page-id-2 page-parent page-template-default logged-in shop">
#10 - WordPress: Add the Slug to the Body Class Defaults
We can also alter the output of the body_class() function by filtering it. We could do this in `functions.php` or our own functionality plugin.
Here we'll add the slug:
function add_slug_body_class( $classes ) {
global $post;
if (isset($post)) {
$classes[] = $post->post_type . '-' . $post->post_name;
return $classes;
add_filter('body_class', 'add_slug_body_class');
<body class="page page-id-2 page-parent page-template-default logged-in page-slug">
#11 - WordPress: Add to Body Class using function.php Filter
Add the following to functions.php:
function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
add_filter('body_class', 'my_body_classes');
Then it would output like this, just calling body_class() directly without doing anything else:
<body class="page page-id-2 page-parent page-template-default logged-in my_body_classes">
#12 - WordPress: Raw Filtering of Function using Functions.php
This is how you would add a single class of any name:
function my_body_classes( $classes ) {
$classes[] = 'class1';
return $classes;
add_filter('body_class', 'my_body_classes');
<body class="page page-id-2 page-parent page-template-default logged-in class1">
#13 - WordPress: Raw Filtering of Function using Functions.php to Add Multiple Classes, Conditionally
function my_body_classes( $classes ) {
$classes[] = 'class1';
if (is_shop()) {
$classes[] = 'shop';
return $classes;
add_filter('body_class', 'my_body_classes');
Becomes this on a non-shop page:
<body class="page page-id-2 page-parent page-template-default logged-in class1">
Becomes this if the logic comes out true, i.e., on a shop page:

#14 WordPress: Remove Classes from Default Output using functions.php
With this you can remove classes from body_class():
function adjust_body_class($classes) {
foreach ($classes as $key => $value) {
if ($value == 'class-to-remove') unset($classes[$key]);
return $classes;
add_filter('body_class', 'adjust_body_class');
If we started with this:
<body class="page page-id-2 page-parent page-template-default logged-in">
And removed "page-parent", we'd get this:
<body class="page page-id-2 page-template-default logged-in">
#15 WordPress: Add the Category
Adds the category to body_class():
function add_category_name($classes = '') {
if (is_single()) {
$category = get_the_category();
$classes[] = 'category-'.$category[0]->slug;
return $classes;
Example URL:
<body class="page page-id-2 page-parent page-template-default logged-in category1">
#16 WordPress: Add the Category via functions.php Filter
You can also do it via filter:
function add_category_to_single($classes) {
if (is_single()) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
// add category slug to the $classes array
$classes[] = $category->category_nicename;
// return the $classes array
return $classes;
add_filter('body_class', 'add_category_to_single');
Example URL:
<body class="page page-id-2 page-parent page-template-default logged-in category1">
#17 WordPress: Add Browser Class Name
WordPress provides some Global Variables including booleans values on what browser is in use. You can add those to the body class as well:
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

if ($is_lynx) $classes[] = 'lynx';
elseif ($is_gecko) $classes[] = 'gecko';
elseif ($is_opera) $classes[] = 'opera';
elseif ($is_NS4) $classes[] = 'ns4';
elseif ($is_safari) $classes[] = 'safari';
elseif ($is_chrome) $classes[] = 'chrome';
elseif ($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';

if ($is_iphone) $classes[] = 'iphone';
return $classes;
add_filter('body_class', 'browser_body_class');
Example with Chrome:
<body class="page page-id-2 page-parent page-template-default logged-in chrome">
Careful not to rely on these for important functionality! User agent testing, as this uses, is known for causing more problems than it solves.

Lots of ways to add an ID to the `body` element is a post from CSS-Tricks
Source: CssTricks

Cactus Cafe

For more than 30 years, the Cactus Cafe has been the soul of live acoustic music in Austin. A local gem in a sea of music tranquility, Cactus Cafe provides a unique, intimate experience that both artists and audiences are unlikely to find anywhere else. It’s a rare place that showcases music in the way that every true fan hopes to experience their favorite artist: live, up close and personal. It’s a place where audiences can savor the music they love. But did not provide any information about the venue or give customers any indication of the awesomeness they were about to experience. And while Cactus Cafe’s word-of mouth reputation has reached every corner of Austin, they lacked the ability to connect with artists and customers online.Read more