Display Post Publish Date with Custom Styling

Display Post Publish Date with Custom Styling (Kadence Pro Advanced Users)

For advanced users who own a copy of the Kadence Pro package, we have a custom solution to display how many days ago a post was published, complete with CSS styling.

This solution involves adding a shortcode to your WordPress site, which can be done by modifying your theme’s functions.php file or by creating a new snippet. Once set up, you can use the shortcode 293 days ago to display the publish date in a “days ago” or “hours ago” format, styled according to your preferences.

This snippet will display how many hours or days ago the post was published!

I use fluent snippet plugin for all my functions, js, and CSS:

FluentSnippets – The High-Performance file based Custom Code Snippets Plugin

Implementation Steps:

Add the Code: Insert the following PHP code into your theme’s functions.php file or a custom plugin

2. Use the Shortcode: Place the 293 days ago shortcode in the content of any post, page, or widget to display the “days ago” text.

Example:

If a post was published 6 hours ago or 3 days ago, using the shortcode 293 days ago will display:

3 days ago  or 6 hours ago

Styling Customization:

The CSS class .days-ago is applied to the output of the shortcode. The following styles are included in the days_ago_shortcode_styles function:

font-weight: bold; – Makes the text bold.
color: #0073aa; – Sets the text color. You can change #0073aa to any color you prefer.
font-size: 16px; – Sets the font size. You can adjust the size as needed.

Feel free to customize the CSS to match your website’s design.

Note: This solution is designed for advanced users who are comfortable editing PHP files and have access to the Kadence Pro package for additional customization options. Additionally, you will need to know how to design a custom post loop within Kadence Elements. Please ensure you have a backup of your site before making any changes.

Notes:

“These scripts, CSS styles, and plugins are designed to work best with minimal interference from themes or other plugins. If conflicts arise, adjustments may be needed.
Please note that they must be used as is.”

Let me know if you’d like any further refinements!