Category: How-to

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 applied to the “content” area to make any wrapped code layout like the above screenshot image.

.content {
  background-color: #00ffff;
  padding: 15px;
  column-count: 2;
  column-gap: 50px;
  column-rule-style: solid;
  column-rule-width: 1px;
}

Yes, it is as simple as that.  But if you really want to utilize these CSS columns in your site’s content it is important to also consider the responsive requirements for mobile devices.  If you were to leave these column-count declarations the display of the content area would have multiple columns on your mobile device making the content difficult to read.  You can use media queries to adjust the column-count to make the content’s readability much better.

@media screen and (max-width:480px){
  .content {
    column-count: 1;
  }
}

By setting the column-count property to 1 the other column properties are no longer necessary since no gaps exist.  The content that displayed in columns for regular browsers now will show as a single column on a mobile device.  Remember that the same concept can be applied to media-queries that target extremely large screens as you can add even more columns.

How do you use CSS column properties?  And if you want to read more about different CSS properties and different ways to use them in layout design, let me know in the comments below.

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' );

 

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 to see if that current user is trying to access any of the Admin pages in WordPress (essentially the /wp-admin/ folder).  If the code decides you shouldn’t have access it simply redirects the page load to go to the homepage.

function wps_redirect_non_admin_users(){
  if ( !current_user_can('manage_options') && '/wp-admin/admin-ajax.php' != $_SERVER['PHP_SELF'] ){
    wp_redirect(home_url());
    exit;
  }
}
add_action('admin_init', 'wps_redirect_non_admin_users');

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 “lock down” and protect your users from having access to the admin areas of WordPress.

How to Comment CSS

CSS

Placing comments in a CSS file or code block can serve multiple purposes.

  • CSS comments can be used to explain the concepts of a block of CSS.
  • CSS comments can be essential during the development of a site to turn on/off specific elemental stylings.
  • CSS comments can control a temporary change into a site that may be reverted at a later date.
  • CSS comments can be crucial to organizing the logical structure of a CSS stylesheet.

For whatever the reason used to comment CSS, commenting CSS code is a simple way to not allow the commented code or text to execute when browsers load a stylesheet upon a visit to the site.

Different methods of commenting CSS

Both single and block comments in CSS b begin with a /* (forward slash + asterisk) and end with a */ (asterisk + forward slash). Several examples of commented CSS using both the single and block comments:

/* Single line comment */
.css-class {
  font-size: 2em;
  margin: 15px 4px;
  text-align:center;
}

/*
Sometimes you might want
to extend your comments
into more of a block.
*/

 

There are no restrictions as to the number of CSS comments that are allowed to be used within a CSS code block or file. Plus, there is no “standard” as to how much styling you can give to your CSS comments, as seen in the example below.

/*
*****
  * General Site Style
  *****
  * It might be helpful to create
  * some groups of instructions
  * that are styled that help organize
  * the CSS contained below
  *****
*/
body {
  font-weight:bold;
  padding:25px;
}

 

Many times in large web projects, the stylesheets can grow in size quickly and become a beast to manage and maintain. In these types of projects, it is not uncommon to find table-of-contents commented into the CSS that is meant to make it easier to find the necessary CSS rules in the future.

/*
* CSS Table-of-Contents
*****
* Section 1 - Style Reset
* Section 2 - Global Settings
* Section 3 - Fonts
* Section 4 - Colors
* Section 5 - Header
* Section 6 - Menus
* * * Section 6.1 - Header Menus
* * * Section 6.2 - Footer Menus
* Section 7 - Body
* * * Section 7.1 - Images
* Section 8 - Footer
*/
/*** Section 1 - Style Reset ***/
...
/*** Section 8 - Footer ***/

Where to Comment CSS

CSS comments can be used in any location where CSS is used for a website.

  • CSS comments can be used within Inline CSS
    Inline CSS is when styling is applied to a single element directly in the HTML tag.

    <div style="color:#33cc00;/* border:1px solid #000; */">
      <ul>
        <li>List item one</li>
        <li style="color:red;">List item two in color</li>
        </li>List item three</li>
      <ul>
    </div>
  • CSS comments can be used within Internal CSS
    Internal CSS is a quick way to apply CSS rules directly to the HTML page that the internal CSS is added. The Internal CSS is added within the <header> section of the HTML site and wrapped with a <style>... Insert Inline CSS...</style> tag.

    <html>
     <head>
      <style>
        .class{color:#33cc00;}
        /* Added additional color */
       li.red {color:red;}
      </style>
     </head>
     <body></body>
    </html>
  • Finally, CSS comments can be used within external stylesheets as was talked about above.

Do you have a specific way of styling your CSS? How well is your CSS commented? Could another developer come alongside and quickly understand the processes you are using to style your sites? Never be afraid to “over-comment” your CSS (and your code in general).