Author: Ben Whalley

The ::before pseudo-element adds content that appears before an element, and therefore the ::after pseudo-element adds content that appears after an element. This allows you to add elements such as icons or symbols to your code using just CSS.

The syntax of the ::before pseudo-element uses double colon.

selector::before {
	// CSS rules
}

The pseudo-element can be used to add an asterisk symbol to highlight required fields on forms. The content property is required for both the ::before and ::after pseudo-elemnt to add the element needed.

.form-label::after{
  content:'*';
  color: red
}

Lately, I’ve been having caching issues when trying to amend some CSS on various sites. In fact, this has plagued me for quite a while. I would usually force a page to reload regardless of the cached content or use a common hack such as renaming the file to something like style-v2.css. However, since moving hosts to AWS even this seems not to give me the most recent version.

The following is a method that always serves the newest file each time the page reloads. The filemtime() function returns the last time the file was changed as a Unix timestamp.

// Enqueue custom styles
function enqueue_custom_styles() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css', array(), filemtime( get_stylesheet_directory() . '/custom.css' ), 'all');
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles', 99 );

More information about filemtime() can be found in the PHP documentation here.

Maintaining WordPress sites is an important part of my day to day workload. In short, it pays the bills. However, repetitive practices always make me want to find an alternative approach.
A recent client asked me to update the copyright dates that are within the footer section of the website. Rather than come back in a year to repeat the process I endeavoured to find a way for the change to happen dynamically.

The site is built on WordPress so a simple PHP solution would be required.

This method requires access to the footer.php file which can be achieved through the theme editor section of the WordPress backend.

<p>Copyright 
&
copy; <?php echo date(“Y”); echo ” “; echo bloginfo(‘name’); ?></p>