Home Tutorials WordPress Date Button

WordPress Date Button

Author

Date

Updated on

Category

I don’t know what’s up with the date button, but you seem to really love it. Yea, you! Today, we’re going to learn how to create a date button for WordPress. Here it is in the three simple steps:

WordPress Date Button

First – Type the code

(Do not copy and paste. Type it out.)

<div class=”post-date”>
<div class=”month”><?php the_time(’M') ?></div>
<div class=”day”><?php the_time(’d') ?></div>
</div>

For organization sakes, here’s how it should look like in your source codes:

date button codes

What the codes actually mean:

<div class=”post-date”> – I’m starting a box or DIV named “post-date.” I could’ve named it “little-potato.”

<div class=”post-month”> – Within the post-date box, I’m starting another box for the month.

<?php the_time(’M’) ?> – Here’s where I use the PHP function the_time(’M’), to call for the abbreviated month name. For example: JUN for June. On my date button example, it’s June instead of JUN because I haven’t coded it to call for the abbreviated version.

</div> – The month box ends here.

<div class=”day”> – The day box starts here.

<?php the_time(’d’) ?> – Using the PHP function the_time(’d’), I’m calling for the day number, which will be a two-digit number. For example: 03.

</div> – The day box ends here.

</div> – There’s nothing else to add to my date button so I’ll end the post-date box or DIV here too because I have to close everything in the order that I open them.

(For more display options for the date, go to php.net.)

Second – Create the background image

You’ll need some kind of design software, like Photoshop, to design your date button background image. Here’s my date button background image:

date_button_template

Third – Style it

This step requires you to know a little bit about CSS and it depends on personal preference because your background image will be different from mine. But, here is the basic:

.post-date{
float: left;
display: inline;
margin: 0 10px 0 0;
background: url(images/date_button_template.gif) no-repeat;
}

date_button_template.gif should be the name of your image. images/ is the location of the image folder. If you store your images in a different folder, change images/ to match the location of your image folder.

The Pride theme, which includes the use of a date button, will be released soon.

Previous articlePreview: Pride
Next articleOne Way To Use Custom Fields

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

Recent comments