Code for Today's Date

[BP]

Does anyone have the code to add "today's date" in the Header Right widget area in the Prose theme?

---

Brad

[nutsandbolts]

First, add the following to your custom functions (this allows you to use shortcodes in widget areas and sidebars):

// Enable shortcodes in widgets
add_filter('widget_text', 'do_shortcode');

After that, add the following (also in custom functions) to create a shortcode that will display the date - props to @srikat:

// Add today's date shortcode
add_shortcode('todays_date', 'get_todays_date');
function get_todays_date($atts) {
	// return date('F j, Y');
	return date_i18n( get_option( 'date_format' ) );
}

Then you can use [todays_date] in the Header Right widget area to display the shortcode.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BP]

Thank you! NutsandBolts. That's cool.

Can you please tell me how to align the date right and change its color.

---

Brad

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BP]

http://www.solotopia.com/

---

Brad

[nutsandbolts]

Is the date on there right now? If it is, I can't see it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BP]

No. I remove it because it didn't look good.

---

Brad

[BP]

See it here: http://www.webscapeproductions.com/ Black font, center.

---

Brad

[nutsandbolts]

Okay, here's what worked for me on a test site.

In your text widget, assign a div class to the shortcode like this:

<div class="thedate">[todays_date]</div>

Then in your stylesheet, you can do this:

.thedate {
color: #fff;
float: right;
}

See if that works for you and let me know. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BP]

Works! But creates white space between header and nav bar in small mobile devices when testing here: http://www.studiopress.com/responsive/ Do you know how to prevent that?

---

Brad

[nutsandbolts]

Hmm... Try giving .thedate a background color just like the header and see if that gets it. I think we'll probably have to do a little more than that, though, so if that doesn't work...

(1) Assign a background color to #header .widget-area

(2) On your 960px media query, change the padding on the header from this:

@media only screen and (max-width: 960px)
#header {
padding: 10px 0;
}

to this:

@media only screen and (max-width: 960px)
#header {
padding: 15px 0;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[BP]

I really appreciate all your help, but this is getting too complicated. The date is not all that important, so I'm just going to put it in another widget (which your code enabled) or use the one that's available in the primary nav extras (and use Genesis Prose Extras plugin to switch their locations.)

Thank you for your time and efforts.

---

Brad

[Author]

Posts