Easy way to hide dates (css version) in wordpress

Easy way to hide dates (css version) in wordpress

Hello! In this article, I’d like to introduce my own implementation of the “Hide My Dates” plugin — one that is much simpler and faster. The development of this plugin, as expected, was inspired by the shortcomings of the original “Hide My Dates” plugin. Specifically — loading an extra CSS file, fetching data from the database, and the leftover garbage after plugin deletion.

I named my version similarly — “Hide Dates (css)”. The “css” part is because this version works entirely using CSS styles.

It’s very simple — the plugin consists of just one file: “/wp2fl-hide-dates-css/plugin.php”, which contains the entire logic.

The first thing that sets my plugin apart from “Hide My Dates” is the removal of the need to load a separate CSS file. Instead, the styles are directly injected into the site template. This can be done using the following code:

if(function_exists('wp2fl_hide_dates_css_wp_head') == FALSE):
	function wp2fl_hide_dates_css_wp_head()
	{
		echo '<style>.s-hdate:before{content:attr(title);}</style>';
	}
	add_action('wp_head', 'wp2fl_hide_dates_css_wp_head');
endif;

Using the wp_head hook, we inject the CSS style between the <head> and </head> tags, which outputs the value of the title attribute into the necessary HTML location.

The following filters:

add_filter('get_the_time', 'wp2fl_hide_dates_css_hd');
add_filter('get_the_date', 'wp2fl_hide_dates_css_hd');
add_filter('get_the_modified_time', 'wp2fl_hide_dates_css_hd');
add_filter('get_the_modified_date', 'wp2fl_hide_dates_css_hd');
add_filter('get_comment_date', 'wp2fl_hide_dates_css_hd');
add_filter('get_comment_time', 'wp2fl_hide_dates_css_hd');

trigger this function:

function wp2fl_hide_dates_css_hd($d = '')
{
	if(is_admin() == FALSE)
	{
		$d = '<span class="s-hdate" title="'.$d.'"></span>';
	}
	return $d;
}

which is responsible for modifying how dates are output in various contexts.

Just like the previous version of the plugin, this one hides dates inside the title attribute of a span tag, so that they can be shown using the CSS method described earlier.

In the next article, I’ll explain how to hide dates using the data attribute and the jQuery framework.

Posts on similar topics

Are you having problems with your WordPress site? Do you need additional functionality? A custom plugin or a new page?
Then write to me via the feedback form, and I will try to help you.

Write a comment

Your email address will not be published. Required fields are marked *