Category: Tutorials

Have you ever been browsing a website and wonder... how did they do that?  This is one of the things that are asked a lot in the WPStudio membership.  This past week one of our members was on a British news site and asked if the section displayed in the image below could be done in CSS?

There are three CSS properties that allow developer to take a straight block of code and allow it to display like the above image.

• column-count -  this property specifies the number of columns an element should be divided into.  By setting this property with a number, CSS will auto-divide the element (unless additional properties like column-width are declared).
• column-gap - this property specifies the gap (spacing) between the columns.
• column-rule - this property can set the width, style, and color of the rule (line) that appears between the columns (in the gap).
  • width - Options include: medium, thin, thick, and length (pixel width etc)
  • style - Options include: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • color - Options include any CSS color value.

Now let us look at a piece of example CSS that would be applied to the "content" area to make any wrapped code layout like the above screenshot image.

Recently I was asked how to "prevent my clients from messing up the look and feel of the site because the client loved to combine crazy colors in the text"?  This opens up two different avenues of response.  The first solution is to enhance your "training opportunities" for your clients.  This can be done in a number of ways:

• You can record a number of "getting started" videos and grant access to each of your clients.
• You can deliver a document/PDF/booklet/etc that contains instructions on how to use their site you built for them.
• You could include one-on-one training options as part of an ongoing maintenance package/plan.

While all of these above options may encourage your clients NOT to use their creative color patterns and font sizing within their blog (which many times may cause issues with site layout and such).  One of the easiest ways to cut these issues off at the pass would be to remove the "offending" buttons from WordPress' TinyMCE editor bar.

Recently it was asked if there was an easy way to use a WordPress shortcode to easily hide or show wrapped content on mobile devices.  While there are numerous plugins and even a few themes that offer this functionality out of the box, there can be issues when you change a plugin or theme.  So I put together some basic code that can be placed in either the active theme's functions.php file or placed in a plugin you may use on your WordPress website.

The two pieces of code below will enable two shortcodes to be used on your WordPress sites:

[hide_from_mobile]This is the content you want hidden from mobile browsers.[/hide_from_mobile]

&

[show_if_mobile]This is the content you will only show on mobile browsers.[/show_if_mobile]

The two pieces of code are as follows:

and

If you have any questions, you can ask them below.

For many WordPress developers, building a website where there is only a content producer who is going to access the Admin area of WordPress is fairly easy.  You know before hand which users will have access and you can prepare and lock down the site accordingly.  The "fun" begins with you begin allowing visitors / users / customers / clients to register for accounts on the WordPress site.

That's when THIS begins to happen for users...

Why should your subscribers even be allowed to see the "underbelly" of WordPress (as described by my older neighbor).  Yes, you probably want to offer the ability to update profile information for subscribers, but most developers are going to do that on the front end of the site, in an area that is much easier to style.  And while most "front end user profile" WordPress plugins may redirect logged in users to their new better looking profile/account pages, many of them don't block access to the Admin area.

This is where the good stuff happens. The following code does two things. It first checks to make sure the current user is NOT an Administrator and checks to see if that current user is trying to access any of the Admin pages in WordPress (essentially the <em>/wp-admin/</em> folder). If the code decides you shouldn't have access it simply redirects the page load to go to the homepage.

You can adjust the "location" of the redirection by changing the home_url() to a different URL.

This is an excellent code snippet to save and/or use for all your sites that you are working to "lockdown" and protect your users from having access to the admin areas of WordPress.