Jun.04.2007

WordPress Date Button

Small Potato

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:

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.gif

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.gif

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.

What's Next?
Dean:

Very nice, SP. Glad to see another theme tutorial. :)

pay:

Nice tutorial.

Small Potato:

I’ll write some more tutorials soon. Don’t forget the upcoming downloadable wordpress theme tutorial. I’ll try to finish that within this month, but I have a lot going on.

seo-sem:

very nice tutorial.
can u share button psd file

Web King:

Hello Seo-sem,
It’s so easy to create that kind of button. Just create one rectangle with rounded corners and copy it, apply desired color, by adding selecting the points you can also create a little arrow at bottom as shown, or use a creative alternative. And you will be done with it. I will give a try right now, like to learn by myself. ATB

seo-sem:

Thanks Web king,
thanks for your tips,but the problem is that i am a very begineer in photoshop and this button is what i always wanted and needed.So i asked small potato to share if he can.
I tried many times to make this type of button but could not succeed.

UKStevieB:

Cheers for this, I tried to add something akin to this in my adaptation of the theme I am using at the moment but I couldn’t quite figure out what needed to be changed. I will give it a try this weekend. :-)

Small Potato:

@Seo-Sem – Remind me when the Pride is finished. I’ll send you a copy of the psd.

seo-sem:

@Small Potato-Thanks will definetely remind you.
BTW: I loved you blog very much,great blog indeed

Shibani:

Cool. Will try this soon.

gio:

nice tutorial! i will definitely incorporate this one to my themes.

apple:

great tutorial! let me try this one.

Jesse:

Thanks! I need date icon, see if I can do this tuts.

grazitaly:

Very Nice tutorial!

La salvación cuando uno no sabe que hacer… » Links 28/06/07 - Esqueleto del pac-man:

[...] Son fotos del momento antes de que ocurriera un accidente. [Via El bloggeo] – La fecha – Aca les dejo un tutorial de como hacer una imagen de fecha para que aparezca en todos sus posts [...]

SCARTY-dot-COM = My insanity! » Date Button CSS style.:

[...] For more explanation go to: wpdesigner.com [...]

How To Create Popular WordPress Themes » WPDesigner:

[...] the design includes a date button? Date buttons are eye candies. Theme users really love [...]

ladynada:

you read my mind, or I read yours… I knew that I wanted a date button when I went to make a new theme. So I put one in. I wish I had seen this tutorial. I took your other 16 lesson tutorial though.

Say, uh.. you know what many date button designers forget to do? Add the YEAR in somewhere.. the year does not have to be in the button. I added the year in another area.
http://heartdaughter.com/blogs/elijah/

I am very fussy about the date being prominent at the beginning of a blog entry. I want to read FRESH SCHTUFF!

nada

Rosina Lippi:

Under every post title I have the number of the post: “Post No. xxxx” At some point I’d like to show this number graphically, with a medaillon type bug. Can I follow the same procedure shown here?

Small Potato:

There’s no reason to you can’t rearrange it to work like a date buton.

rajanz:

Hey that was Kool !!!!

Simple, consice but complete.

Brett:

May be a stupid question, but how do I make the abbreviated Month appear in UPPERCASE?

Small Potato:

text-transform: uppercase;

Totally:

Hi

Great tutorial!

Im new to designing my own themes, where excatly and which files do I need to add the code?

Lori:

I’ve been doing all your tutorials – THANKS. I, too, love the date button and searched for a template that used it. NOW that I can build my own templates, thanks for showing me how easy the date button is.

How To: Adding a Date Button To Your WordPress Blog:

[...] adding something like this to your theme, Small Potato has a great write up explaining how to add a WordPress date button. The only step that requires a little bit of thought is getting an icon to use for the background [...]

ITryIt » Blog Archive » (ITryIt推荐文章)怎样创建受欢迎的 WordPress 主题:

[...] 设计是否包含有日期块？ 日期块(英文)是个养眼的东西，主题用户非常喜欢它。 [...]

Carly:

Ooh, I clicked this to see what it was, and I am very glad I did, I must use this soon!

Josh(ua/y):

I personally would suggest using span tags as opposed to div ones – at least to surround the number and month individually – because having the date spread across multiple lines will look silly with CSS turned off. It’s overall more semantically correct.

Thanks for sharing though – this article is most certainly one for the bookmarks!

25 hacks para dinamizar seu Wordpress! — Bytes a Go-go!:

[...] Botão para data. Faz com que a data seja mostrada dentro de um botão, mas usando apenas texto. [...]

Blog Verde » 25 Hacks pra dinamizar o Wordpress:

[...] Botão para data. Faz com que a data seja mostrada dentro de um botão, mas usando apenas texto. [...]

Creating Date Icons for WordPress : webrehash.com:

[...] first site I found was WPDesigner and they had a good tutorial on creating the date buttons.  It wasn’t quite what I was [...]

Joseph:

Hello,
Thank you in advance!!

My page: http://sunruby.com/make-friends/
Where exactly do I insert that code so that the icon is right to the left of the post heading?

Small Potato:

Joseph – Sorry I edited your comment to remove the codes, but this is not where you should ask for support of tips. Please head to the forums.

Generally, css goes anywhere you like. As for xhtml and php, place it wherever you want it to show up.

hammy:

Thanks a lot, dude… I was fretting over this issue for a long time. I finally got it. But somehow, the settings seems to have screwed up my layout… I have to debug that now… But still, thanks a lot. :)

ALDRINV:

which file am I going to place the codes? (sorry newbie here) ;p

Ilyas:

Very nice small potato. I like it.

Small Potato:

Aldrinv – This tutorial is not for newbies.

63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design:

[...] WordPress Date Button (Source: WP [...]

63 essenziali Wordpress Hacks, Tutorials, Help Files e Cheats : technorati.it:

[...] WordPress Date Button (Source: WP [...]

Wordpress Tutorials/Hacks « The house of software freeware:

[...] WordPress Date Button (Source: WP [...]

Tutorials you don’t need - unless you’re an idiot | Cranky.nu:

[...] Related Tutorials: CSS Date Blocks for Blogs Creating a Blog Entry Date Calendar Icon Look with CSS Coding a Date Icon with xhtml and css. Web 2.0 Date Icons For Your Blog Create a ‘Calendar style’ WordPress date format WordPress Date Button [...]

63 Essential Wordpress Hacks, Tutorials, Help Files and Cheats | Speckyboy - Wordpress and Design » ???(JASMIN):

[...] WordPress Date Button (Source: WP [...]

Heartnn’s ?? » ????Wordpress????:

[...] ????WP??????????????????????????????????????????????????????????WPdesigner.com?????? [...]

Worldwide Brands:

Very cool tutorial!

Andy:

Hi Guys,
we are running an “Article Writing Contest”
$600 worth prizes to give away.
Please check the link below to participate in the contest …

http://blogs.qualitybusinesslinks.com/

Just 1 article and you can win $$$
We hope to see your article entries soon ..
Good Luck.
-Andy

Phodana:

Great, exactly what I seaarched…

????Wordpress???? : ?????:

[...] ????WP??????????????????????????????????????????????????????????WPdesigner.com?????? [...]

????Wordpress???? at ????:

[...] ????WP??????????????????????????????????????????????????????????WPdesigner.com?????? [...]

How To: Adding a Date Button To Your WordPress Blog | [Blog Tutorials]:

[...] adding something like this to your theme, Small Potato has a great write up explaining how to add a WordPress date button. The only step that requires a little bit of thought is getting an icon to use for the background [...]

How to create a WordPress date button or format date in WordPress | The How To Do Things Blog:

[...] of WordPress and even PHP. The entire process of creating nifty WordPress date buttons is explained in this blog post. Technorati Tags: wordpress, date format, wordpress date [...]

Jedem Post sein Datum - Erstellung einer Datum-Badge | Lionstarrs Linux Blog:

[...] es sehr gute Tutorials, wie man die Date-Badge auch in dem eigenen Weblog unterbringt. So z.B. das Tutorial auf WPDesigner, nach dem ich hier gearbeitet [...]

40+ Most Wanted Wordpress Tricks and Hacks:

[...] Create really cool WordPress date button [...]

40+ Most Wanted Wordpress Tricks and Hacks | ???? - ???????? - Best Articles of the Day:

[...] Create really cool WordPress date button [...]

30???Wordpress??:

[...] 10?????? [...]

30???Wordpress?? | Yansen's Blog:

[...] 10?????? [...]

30???Wordpress?? | ????:

[...] 10?????? [...]

????? » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

???? » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

WP.ORG.CN | 30????Wordpress??:

[...] 10?????? [...]

Skylog » Blog Archive » links for 2008-06-17:

[...] WordPress Date Button (tags: wordpress) [...]

?????–51dzz.com » 30???Wordpress??:

[...] 10?????? [...]

????BLOG » Blog Archive » 40+????WordPress??:

[...] 10.????????? [...]

PP BLOG# » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

9??? » 40+ Most Wanted Wordpress Tricks and Hacks:

[...] Create really cool WordPress date button [...]

Más de 40 consejos y trucos para Wordpress:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

30???Wordpress?? - ???????:

[...] 10?????? [...]

40 consejos y trucos para Wordpress | aNieto2K:

[...] Crea fechas elegantes ( Pon un calendario a tu WordPress) [...]

40 ????? ?????????????? ????????/????? ??? WordPress:

[...] ????????? ? ????????????? ???? ????? ? WordPress [...]

40 trucos muy buenos para wordpress | Wotevar:

[...] Pura estética y puro gimp. |enlace| [...]

Locjan:

whay we cannot copy paste? why we should type it. what the different

feli:

thanks for the tip, excellent tutorial!

Mas de 40 trucos y hackeos para Wordpress | Pboza:

[...] 10. Crear botones de fecha muy chulos para WordPress [...]

40+ Most Wanted WordPress Tricks and Hacks | Blogging Tips:

[...] Create really cool WordPress date button [...]

Web Grafi 2.0:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

40 Consejos para optimizar tu Wordpress » Comenta o Muere | Actualidad, Humor, Tecnología, Política, Ciencia, Música… y otros muchos temas de los que merece la pena hablar.:

[...] Crea fechas elegantes ( Pon un calendario a tu WordPress) [...]

Cosas por hacer luego de instalar Wordpress | Durmiendo Afuera:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

vsFish » 30???Wordpress??:

[...] 10?????? [...]

41 trucos y consejos para Wordpress « Helektron.com:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

Antibioticos « SoLo Se Que No Se NaDa:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

IndoProTech.com:

[...] 43. WordPress Date Button [...]

???? » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

enettyideoppy:

tests time mashine

30????WordPress?? | ????--????|????|????|????|WordPress??:

[...] 10?????? [...]

30????Wordpress??????????? | abe design studio:

[...] 10????? [...]

63 correções, tutoriais, arquivos de ajuda e dicas essenciais para Wordpress | Rafael Bernard Araújo:

[...] Botão de data do WordPress (Fonte: WP [...]

???????30???Wordpress?? | Idiigo.com:

[...] 10?????? [...]

Trucos y consejos para Wordpress | Seosistems:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

??? » 30???Wordpress??:

[...] Create really cool WordPress date button [...]

Los 40 trucos mas importantes de Wordpress « Camyna.com:

[...] Crea fechas elegantes ( Pon un calendario a tu WordPress) [...]

tefly:

very useful tutorial. i will try it

Más de 40 consejos y trucos para Wordpress « El Cubanito Web:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

kalev:

nice tutorial

WordPress ????40+?????????? - WordPress???:

[...] 10. Create really cool WordPress date button [...]

???:

???????? ?????.

????:

?WP???????????? WordPress ????

?????WordPress Date Button
WordPress ????40+??????????
????hitigon
??????????????
????????????????????????????????…

Vocescuola - Wordpress: bottoni data:

[...] di creare bottoni data particolari, una rapida ricerca è trovo il tutorial di wpdesigner: WordPress Date Button. Probabilmente conoscete già wpdesigner in quanto ha prodotto una cinquantina di temi di WordPress [...]

25 WordPress Tricks and Plugins to Make Your Blog Stand Out | Oragle:

[...] 17. Making a Brilliant Date Button Make a brilliant date button for your blog… change all sorts of things so it matches your theme too! Homepage [...]

Volkan:

great tutorial! let me try this one. thanks…

Alle:

Hey I’ve made the code and the button but I am unsure on where to put the code in the theme?

30???Wordpress?? | T.E.M.P:

[...] 10?????? [...]

Tutoriale si hack-uri pentru wordpress ( lista mare ) at elbandito.us:

[...] WordPress Date Button ( Sursa: WP [...]

??????? ??????:

?????? ????????

30?Wordpress?? | ??°CLEVER8:

[...] 10?????? [...]

Basilakis:

WOW that is cool, what i needed!

40 ?????? ????? ??? Wordpress | Listeria.ru:

[...] ??????? ????????? ?????? ??????? [...]

Katya:

easy and clear that what i like you for

?ahin:

ohh.Nice post thaks..

RCDM » Blog Archive » 40 consejos y trucos para Wordpress (muy interesante):

[...] Crea fechas elegantes ( Pon un calendario a tu WordPress) [...]

RCDM » Blog Archive » 40 consejos y trucos para Wordpress (muy interesante):

[...] Crea fechas elegantes ( Pon un calendario a tu WordPress) [...]

Redbots » 30????Wordpress??:

[...] 10?????? [...]

WordPress ????40+? : ?1981?2??????:

[...] 10. Create really cool WordPress date button [...]

WordPress ????40+? - ?1981?2??????:

[...] 10. Create really cool WordPress date button [...]

Useful CSS related links - MikkoLehtinen.com:

[...] WordPress Date Button Posted on 06.27.2008 to CSS Subscribe to comments Comment | Trackback |  SHARETHIS.addEntry({ title: “Useful CSS related links”, url: “http://www.mikkolehtinen.com/css/useful-css-related-links/” }); [...]

km:

I believe putting wordpress date button is just for decoration only.

kronicdreamer:

nice work…

jose thomas:

yaa, date button is important in blog. I studied to create it.

Thanks

ElazigLee:

Thanks

Gift:

????? ?????????? ??????!

Ted:

Real handy. 3 nice and easy steps of coding.

Wordpress ile ilgili 155 kaynak « YEAH28 - Her ?ey Sizin ?çin:

[...] Blog. 124. Huge Compilation of WordPress Code. 125. 4 Simple ways to Speed up WordPress. 126. WordPress Date Button. (Source: WP Designer. 127. Wicked WordPress Archives in One Easy Step! . 128. Make Yourself [...]

40 consejos y trucos para Wordpress | ProyectoAurora.com:

[...] Crear un bonito botón para mostrar la fecha en WordPress, ver cómo. [...]

nvxiao:

Create really cool WordPress date button

Best of WordPress Tutorials – More than 100 recourses | Tutorials | .:Lirent.net Hacks:. | All about Web 2.0, SEO, PHP5, Ajax, Adsense, Unix/Linux, Free Stuff, OpenSource, Designs, Wordpress, Hi-Tech etc:

[...] WordPress Date Button [...]

iPod Dude:

Nice tutorial. I love the fact that it is nice and sweet and right to the point.
THanks

Electric Vehicle News:

It took me a while to find this tutorial – I wasn’t quite sure what to search for and I finally found you. Isn’t there any kind of plug-in that can do this or does it need to be custom coded?

Electric Vehicle blog:

And are the numbers on the button text or images?

30???Wordpress??:

[...] 10?????? [...]

Jane:

Thank you for this tutorial, it was useful for me in my blog

John:

Jane, I have seen you blog, good luck with it! Please check my one and give your idea what to do next?
http://bodrum.turkeytravelinfo.net

Wordpress ile ilgili 155 kaynak : ZDaYLaN.CoM:

[...] Blog. 124. Huge Compilation of WordPress Code. 125. 4 Simple ways to Speed up WordPress. 126. WordPress Date Button. (Source: WP Designer. 127. Wicked WordPress Archives in One Easy Step! . 128. Make Yourself [...]

???? » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

???? » Blog Archive » 30???Wordpress??:

[...] 10?????? [...]

Wordpress ile ilgili 155 kaynak |:

[...] Blog. 124. Huge Compilation of WordPress Code. 125. 4 Simple ways to Speed up WordPress. 126. WordPress Date Button. (Source: WP Designer. 127. Wicked WordPress Archives in One Easy Step! . 128. Make Yourself [...]

41 Wordpress Tricks & Hacks | Tips For Web Users:

[...] Create really cool WordPress date button [...]

Andres:

Hi: Do you know any plugin or any way to search post by category and date showing a calendar, like this:
http://www.elmostrador.cl/index.php?/noticias/legales/

Thanks.

Susan:

This is quite handy, thanks for the information!!

Customized Date Section - DIY Themes Forums:

[...] trying to figure how to work this. I want to create a calendar background for my posts like here: WPDesigner WordPress Date Button Since I can’t edit the php directly, I tried using Thesis hooks. I created a custom [...]

bopdilly:

Excellent site! I wish the owner to develop and please all! http://sex-free-online.ru/map.html

videoonlinego:

It is not out-of-date information? Because I have other data on this theme. http://video-online-go.ru/map.html

????Wordpress???? | ??? ??????:

[...] ????WP??????????????????????????????????????????????????????????WPdesigner.com?????? [...]

GeorgeJ:

This is an excellent tutorial. I found it very interestintg and understandable…..which is a big deal because I’m relatively new to wordpress. I plan to use customized post dating on my next blog about Sleep Apnea Pillow. I will be returing to this page for more knowledge and wisdom soon. Thanks SP!

Turkey:

I have been trying to apply it on my blog Turkey but can not…

Q?? » Blog Archive » ????Wordpress????:

[...] ????WP??????????????????????????????????????????????????????????WPdesigner.com?????? ??? – ??? (??COPY?????????????) [...]

41???????wordpress???? | ????---?????:

[...] 10.??????????????? [...]

cssframework » 40+??????WordPress?????:

[...] 10.??????????????? ???????????????????? [...]

40+??????WordPress????? - EventID???:

[...] 10.??????????????? [...]

Web Design Showroom:

So simple. I’m starting to understand how easy WordPress is to customise – all you need to know is the simple tag and a bit of HTML and Bob’s your Uncle!

Thanks

???? » Blog Archive » 40+??????WordPress?????:

[...] 10.??????????????? [...]

mike:

Yvj8h5 hi! how you doin?

rsa-blogger:

Superb article friend!!!!!

forex-ideas:

I like this article!!!!! :-)

forex-shares-stocks:

Friend your articles are mind blowing!!!!! :-)

Mother-is-god:

Excellent article friend!!! keep it up!!

forexmarketing-solutions:

I read many of your posts!!!!!!!!!!! its excellent

cam balkon:

does it make cpu problem?

Wordpress Hacks Guide | CSS Experiments:

[...] 36. WordPress Date Button (Source: WP Designer) [...]

promovare site:

great tutorial!

Thanks!

Wordpress???40???????Wordpress??????? : ??????? - Internet Marketing:

[...] 10.??????????????? [...]

kookimebux:

Hello. And Bye. :)

Face The World » 40???????Wordpress???????:

[...] 10.??????????????? [...]

Complete Wordpress Theme Tutorial « Kolmex:

[...] Create really cool WordPress date button [...]

My Journal | Sayagi project:

[...] Blog. 124. Huge Compilation of WordPress Code. 125. 4 Simple ways to Speed up WordPress. 126. WordPress Date Button. (Source: WP Designer. 127. Wicked WordPress Archives in One Easy Step! . 128. Make Yourself [...]

40+ Most Wanted Wordpress Tricks - o2webdev:

[...] Create really cool WordPress date button [...]

Wordpress ile ilgili 155 kaynak : Spaksu Blog:

[...] Blog. 124. Huge Compilation of WordPress Code. 125. 4 Simple ways to Speed up WordPress. 126. WordPress Date Button. (Source: WP Designer. 127. Wicked WordPress Archives in One Easy Step! . 128. Make Yourself [...]

John Nasta » Blog Archive » Wordpress tips & tutorials:

[...] WordPress Date Button (Source: WP [...]

40+??WordPress?????????/?? - ???:

[...] 10.??????????????????????????????????? [...]

???????? » Blog Archive » ?WP???????????? Wordpress ????:

[...] ?????WordPress Date Button [...]

???:

????????????,????,????,??????,????,??????,????,????,3G??,CDMA???.

clickeran@gmail.com:

gr8!!

bokspol:

nice!!

garden:

date button??

rehersal:

word press date button works

bass-sen:

date button is important!!

mail_manmadan:

clever work!!

Joseph Buarao:

wow.. cool.. I will implement this to my theme..

ancajasjc:

simple yet an coll for wordpress.. needless for the calendar widget..