Customizing post created date in wordpress

We would have been bored by seeing the default post created date style in wordpress themes. Of course many themes came with ultimate post created and last updated date styling options.

But when you have a paid/customized theme then you can not switch to other or new themes often just to customize post created or last updated date in wordpress.

I could able to see lot of plugins to customize the post created date, but using plugins always create a optimization and security issues, so always try to bring the expected functionality through coding instead of going with the plugins.

Before the customization : Javadomain.in look,

before last updated stylig.PNG

 

Let’s start  changing the post created date style:

find the content.php file and add the below snippet in the post loop:

In some themes post article iteration has been done directly inside the content.php file,  in my theme it is in content-excerpt.php.

First change in any one file, then you can copy paste the same changes in content-* (content.php, content-single.php, content-excerpt.php etc.,)

Snippet to be included or pasted in your content.php file:

[php]

<div class=”custom_mb_header” style=”float:left;”>
<div id=”DIV_1″>

<div id=”DIV_2″>
<?php echo the_time(‘j’); ?>
<br id=”BR_3″ />
<?php echo the_time(‘M’); ?>
</div>
</div>
</div>

[/php]

 

Where to include the above snippet:

In content.php file include exactly after the “the_title”

I included in the theme 1

[php]

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”image-container-responsive”>

<a href=”<?php the_permalink(”) ?>” title=”<?php the_title(); ?>”><?php the_post_thumbnail(‘wp-macchiato-medium-thumb’); ?></a>
</div>

<div class=”details-container”>
<div class=”custom_mb_header” style=”float:left;”>
<div id=”DIV_1″>

<div id=”DIV_2″>
<?php echo the_time(‘j’); ?>
<br id=”BR_3″ />
<?php echo the_time(‘M’); ?>
</div>
</div>
</div>
<h1 class=”title”><a href=”<?php the_permalink(”) ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></h1>
<div class=”entry-meta”>

[/php]

After including in the ngdeveloper.com theme:

[php]

<?php the_title( sprintf( ‘<h1 class=”entry-title post-title”>’, esc_url( get_permalink() ) ), ‘</a></h1>’ );?>

<div class=”custom_mb_header” style=”float:left;”><div id=”DIV_1″><div id=”DIV_2″><?php echo the_time(“j”); ?><br id=”BR_3″ /> <?php echo the_time(“M”); ?></div></div></div>

<div class=”postmeta”><?php smartline_display_postmeta(); ?></div>

[/php]

 

CSS Style to include in style.css:

[css]

#DIV_1 {
box-sizing: border-box;
color: rgb(186, 186, 186);
float: left;
height: 50px;
left: -83px;
text-size-adjust: 100%;
width: 70px;
column-rule-color: rgb(186, 186, 186);
perspective-origin: 35px 25px;
transform-origin: 35px 25px;
border: 0px none rgb(186, 186, 186);
font: normal normal normal normal 11px / 16.5px Arial, Helvetica, sans-serif;
outline: rgb(186, 186, 186) none 0px;
}/*#DIV_1*/

#DIV_2 {
box-sizing: border-box;
color: rgb(246, 247, 249);
float: left;
height: 44px !important;
text-align: center;
text-size-adjust: 100%;
width: 50px;
column-rule-color: rgb(246, 247, 249);
perspective-origin: 25px 22px;
transform-origin: 25px 22px;
background: rgba(0, 0, 0, 0) url(“http://ngdeveloper.com/wp-content/uploads/org.jpg”) repeat-y scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(246, 247, 249);
font: normal normal bold normal 12px / 15px Arial, Helvetica, sans-serif;
margin: 10px 0px 6px;
outline: rgb(246, 247, 249) none 0px;
padding: 7px 5px;
}/*#DIV_2*/

[/css]

 

To hide the meta date from the theme:

[css]

/*Hiding the existing meta date from the theme */
span.meta-date{
display:none;
}

[/css]

 

After modifying the above snippet, posted date look changed this way,

after posted stylig.PNG

 

Things to Note:

Here I have displayed only the date and month of the posted date.

If you want year also to be included then change the snippet refering below,

 

To display the date

[php]

<?php echo the_time(“j”); ?>

[/php]

 

To display the month:

[php]

<?php echo the_time(“M”); ?>

[/php]

 

To display the year:

[php]

<?php echo the_time(“Y”); ?>

[/php]

 

To display the Date Month Year:

[php]

<?php echo the_time(“j M Y”); ?>

[/php]

Do remember F displays full name of the month, where as M displays only the first three letter.

 

Do not use the_date() function which just displays only one post per date. If you have posted more than one post in a day then it will display the date only for the first post and all the remaining posts will display empty.

 

Update:

Please do carefully while adding or modifying the snippet, always take the back up before modifying anything.

I have missed “<a href=”%s”>” to add this after the modification, so link did not work in index page. 🙁

You guys don’t make these silly mistakes and it should be only content-excerpt page, do not add it in content-single.php page.

Then I added this,

[php]

<?php the_title( sprintf( ‘<h1 class=”entry-title post-title”>’, esc_url( get_permalink() ) ), ‘</a></h1>’ );?>

[/php]

 

Update: [Oct 22nd 206]

This customized created post date styling is removed for some other options to include. So you can not see the same styles as explained in this in ngdeveloper.com

 

 

So always use the the_time() function in wordpress.

To read more about formatting the date and time in wordpress have a look at “Formatting date and time in wordpress codex“.

Leave a Reply