Secure Your WordPress and ClassicPress Development

If you develop WordPress or ClassicPress plugins professionally or as a side hustle, it is important to recognize security issues. With WordPress powering large swaths of the internet, code security should be a vital part of your development. In this light, I wanted to share several key areas of security that every WordPress and ClassicPress developer should be mindful of during their development of code projects.

Don’t Let Direct Access Occur

While many web hosts are built around allowing access to files that reside on the server, we shouldn’t allow our plugin files to be accessed directly.  We need to make sure that its only “WordPress itself” that is accessing the plugin files. The best way to handle this is to perform a conditional check at the top of the plugin files that makes sure the file isn’t being accessed from outside WordPress or ClassicPress.
<?php if ( ! defined('ABSPATH') ) exit;

Escape the Data Anytime Output Happens

It is very important that any time we are fetching data out of the WordPress database that the data is clean and valid and isn’t going to cause harm due to unexpected output results. This security aspect goes hand-in-hand with input sanitization (talked…

Read more

Require a Specific Password Length

Many of the leading WordPress security plugins have the ability to force/require strong passwords for users. But one of the requests I’ve received from people is if there is a way to require passwords to be of a certain length. It seems that some users who work with clients are finding that some clients will reset a password to something “easier to remember” but not entirely secure, or the developer is trying to enforce a specific “password policy” and one of the aspects of a policy specifies a certain number of characters.

How to Set a Password Length Requirement

Setting a password length requirement is fairly easy since WordPress already provides a hook that occurs before a password is actually reset.  The hook is validate_password_reset, and it allows developers to verify aspects of the user-entered password before passing it through the password reset function. Here is an example code snippet:
add_action('validate_password_reset', 'wps_password_min_length_val', 10, 2); function wps_password_min_length_val($errors, $user){ if( strlen($_POST['pass1-text']) < 12 ){ $errors->add('password_too_short', 'ERROR: Password is too short.'); } }
The basics of this function (which can be placed in an active theme’s functions.php file or a custom plugin) are as follows:
  • The WordPress hook being used is validate_password_reset.
  • The function is comparing…

Read more

Using Dashicons in WordPress Themes

Many WordPress users learn about using Dashicons when they go to create their first Custom Post Type and assign a Dashicon to represent that Custom Post Type in the Admin menu.  But then the frustration begins as soon as you attempt to use a Dashicon on the frontend of the site. The developer resources at WordPress.org make it extremely easy to copy/paste either the Glyph, HTML, or CSS version of a Dashicon.  But if you have ever tried to copy/paste a Dashicon into a widget area or a post you would have experienced the frustration of nothing showing up. Why Dashicons? The reason the Dashicon doesn’t show up on the frontend is that the Dashicon stylesheet is not being enqueued to be used on the frontend.  So here are two code snippets you can use to start using Dashicons on your WordPress website immediately. Add Dashicons as a Dependency
function load_my_styles(){ wp_enqueue_style( 'mycustomstyle', get_stylesheet_uri(), 'dashicons' ); } add_action( 'wp_enqueue_scripts', 'load_my_styles' );
Simply Enqueue Dashicon Stylesheet
function enqueue_dashicons(){ wp_enqueue_style( 'dashicons' ); } add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );
I hope this helps you take advantage of Dashicons in your WordPress site.  Let me know how you utilize font icons in your web development.

Read more

The Power of the Body Class in WordPress

For many WordPress users who are stepping beyond the basics of WordPress and starting to customize different parts of a site based on the site’s template hierarchy, it can get pretty daunting to figure out WHICH page template is being used to render WHICH part.  The heart of this answer is in understanding more about WordPress template hierarchy. There is even a very useful visual map to help find your way to the right template. But this post is focused on another seldom talked about feature in WordPress that works with every properly coded theme.  I’m talking about the body class.
<body <?php body_class(); ?>>
The above code can be found in almost all WordPress themes and will output the multiple classes being used on a specific page in the HTML body element.  For example, if you were to visit a blog post page and look at the source code, you might see the HTML body element and corresponding classes that look like this:
<body class="post-template-default single single-post postid-2675 single-format-aside logged-in admin-bar no-customize-support one-col c1">
This long string of classes actually tells us a LOT about what area of a site the visitor is viewing along with other bits…

Read more

Eliminate the JUMP from WordPress Read More Link

WordPress has a method of splitting your content to only show the “top half” on the is_home() conditional location.  (This is normally the “Blog” feed page in WordPress.  It could be your homepage, or it could be a custom page depending on your theme and setup.)  This “splitting method” is called the “Read More” link. The “Read More” link is identified as <!--more-->  in the code/content area of your WordPress post/page.  The location in your post content that contains this “Read More” link will return an active link from the blog feed to the full post page.  What happens next when a reader clicks on the “Read More” link presents the “issue” that WordPress owners experience. The “Read More” link jumps to the place in the code where the <!–more–> tag had been placed, essentially chopping off the top of the post.  While some themes and designs may not be bothered by this experience, many developers create custom user experiences that differ from the blog feed and the individual post page.  Therefore the “Read More” link jump can be a jolting feeling for the readers. The following piece of code can be placed in the active theme’s functions.php file and will remove the jumping element of the “Read…

Read more

Take Control of the WordPress Auto-Paragraph Tag

WordPress has a function called wpautop() that very kindly “autowraps” and adds paragraph tags (<p></p>) around elements of your content.  While this is extremely helpful for users, those that may be more unfamiliar with HTML and those that only want to use WordPress as a content publishing platform.  Those users that desire more control over the structure of the site may want to manage what elements exist or don’t exist in the content structure. For a long time, WordPress users have had access to filtering out the wpautop() function by adding a simple line of code to their functions.php file of their active theme folder.
remove_filter( 'the_content', 'wpautop' );
But the above code can also leave users with an unintended issue.  This code snippet will remove ALL the auto-inserted paragraph tags.  To truly have control over when and where this wpautop() function interacts with content, we need to be able to manage this on an individual post/page level. This is where WordPress’ Custom Fields come to the rescue. If you do not see a metabox on your post/page editor screen, you may need to enable the metabox to be visible from within the Screen Options located inside the drop-down tab in the upper right of your screen window.

Read more

Use CSS Columns for Better Content Layout

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 developers 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…

Read more

Create a Shortcode for Mobile Content

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]Content you want hidden from mobile browsers.[/hide_from_mobile]

&

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

The two pieces of code are as follows:
function wps_hide_from_mobile_shortcode( $atts, $content = '' ){ if ( wp_is_mobile() === true ) { $content = ''; } return $content; } add_shortcode( 'hide_from_mobile', 'wps_hide_from_mobile_shortcode' );
and
function wps_show_if_mobile_shortcode( $atts, $content = '' ){ if ( ! wp_is_mobile() === true ) { $content = ''; } return $content; } add_shortcode( 'show_if_mobile', 'wps_show_if_mobile_shortcode' );
 

Read more

Only Allow Administrators Access to Admin Area

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 beforehand 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 the 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 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…

Read more