Archive for CSS

How to Create an Automatically Updating Date Icon in WordPress

This is the first of several How To posts based on features of the World Reach web site I released in June 2012.

At the top of the sidebar of most pages of the site is a link to download the mission organization’s monthly prayer calendar. This link does a number of interesting things thanks to some nifty php code. First it shows the current date in the time zone of the organization’s headquarters. Second, it actively links to the correct month’s PDF calendar without any intervention on the part of their office staff.

Here’s how to create it.

Step One: Install the PHP Code Widget

Since PHP code will not execute in the standard WordPress text widget (which will only render HTML), you’ll need to install a widget that will allow it. I like Otto’s tried and true PHP Code Widget in the WordPress Plugin Repository.

Step Two: Insert the PHP Code in the Widget

Below is the code I’ve used to render the calendar icon and below that will be the explanation of what the various parts of the code mean.

//Render the Month
<div class="prayer-calendar-month">
<?php date_default_timezone_set('America/Chicago');   echo date('M'); ?>

//Render the Day
<div class="prayer-calendar-day">
<?php date_default_timezone_set('America/Chicago'); echo date('j'); ?>

//Render the Link
<div class="prayer-calendar" style="cursor: pointer;"
<?php date_default_timezone_set('America/Chicago');  echo date('m'); ?>-
<?php date_default_timezone_set('America/Chicago');  echo date('Y'); ?>.pdf');">

//Render the Text
<div class="prayer-calendar-text">Download the<br />
<?php date_default_timezone_set('America/Chicago');  echo date('F Y'); ?>
<br />Prayer Calendar

Render the Month

  • The div class prayer-calendar-month is important because we will use it to style and position the month text on the calendar icon with CSS.
  • date_default_timezone_set(‘America/Chicago’) is present to set the time zone of the date the code will render to central time. That’s important because PHP will use GMT unless you tell it otherwise. For a complete list of php time zone codes, click here.
  • echo date(‘M’) renders the current month in its 3 letter abbreviation. You can also render months in full (like January) or as its numerical equivalent (like 1 or 01). A letter code (like the j used here) tells PHP how you want the date to render. Here is a page that explains the letter codes and what they mean.

Render the Day

  • Again, the div class prayer-calendar-day is important for styling and positioning in the CSS that we’ll do in a moment.
  • Again, the date_default_timezone_set makes the date render in central time.
  • echo date(‘j’) renders the day of the month as a digit.

Render the Link

  • To make management of the Prayer Calendar easier for the office staff, I have set up the link to automatically update to the current month and year. The staff simply uploads a PDF named month-year.pdf (like 06-2012.pdf) to a specific location and the sidebar calendar will automatically link to the correct PDF. Also, this allows the staff to upload calendars months in advance and the link will always give the correct month.
  • The div class prayer-calendar will allow us to make the entire div clickable to the PDF link.
  • style=”cursor: pointer;” makes the mouse pointer change from an arrow to a finger when over the clickable div. Otherwise, the mouse will stay an arrow and users will not know the area is clickable.
  • onclick=” makes this div clickable and opens the link in a new window (tab).
  • The link renders as We get the current month and date with the same echo date functions used earlier.

Render the Text

  • Again the div prayer-calendar-text will be used to help position and style the text for the sidebar widget.
  • The text has PHP that echos the current month and year: Download the (Month) (Year) Prayer Calendar. The F and Y are php date letter codes for the full month name and 4 digit year.

Step Three: Style the Output with CSS

The CSS for the date icon is below with explanations of some of the more important parts below. In order to make this work, you’ll need a calendar background icon. I have placed the icon I used for the World Reach site here to the left. Many others can be found with a Google images search like this one.

.prayer-calendar {
	border: 1px #3A5275 solid;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width: 135px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
	background-color: #F9F9F9;
	background-image: url(/icons/Calendar2.png);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	box-shadow: 0 0 4px 2px #DEDEDE;
	height: 65px;

.prayer-calendar-month {
	position: relative;
	font-size: .65em;
	font-weight: bold;
	color: #fff;
	top: 12px;
	left: 23px;
	text-transform: uppercase;
	text-align: center;
	width: 50px;

.prayer-calendar-day {
	position: relative;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	top: 3px;
	left: 23px;
	text-align: center;
	width: 50px;
	letter-spacing: -2px;

.prayer-calendar-text {
	line-height: 1.2em;
	font-size: .75em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;


  • background-image: This places the calendar icon as a background image for the div
  • no-repeat: insures that the calendar icon displays only once and does not repeat across the div
  • background position: pushes the calendar icon 8px down and 8px to the right to give it a little spacing from the border
  • padding-left: pushes the rest of the contents of the div 65 px to the right so that the calendar icon is not covered up

.prayer-calendar-month and .prayer-calendar-day

  • position relative:basically allows us to do the specific positioning top and left we’re going to do below. If you don’t set position to relative, the top and left won’t work.
  • top and left:pushes the month text 12px down and 23px to the left of where it would have been rendered. This places the month text exactly in the blue strip of the calendar icon. I found that position by (lots of) trial and error.
  • width: this sets the width of the div for the month and day to the same width as the icon so we can center the text on the icon itself with text-align center.


  • Nothing special here. This just styles the appearance of the “Click here to download…” text.


How to Make the WordPress Editor Look Like Your Web Site

Why doesn’t the font match?

I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”

Yeah, but why doesn’t the font match?

WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation why. It’s not exactly a modern font. After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia, for whatever reason.

Getting Georgia out of your Visual Editor

The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.

Step One: Add Your Own editor-style.css File

What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.

Step Two: Tell WordPress to look for the editor-style.css file

Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code to your functions.php file to tell WordPress to look for changes you just added.

// Styling the visual editor with editor-style.css to match the theme style.

Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.

Nifty, huh? And now truly WYSIWIG.

The best part? No more having to explain why the font doesn’t look the same!

How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

.menu-twitter {
	text-indent: -9999px;
	background-image: url(images/twitter.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 100px !important;
	width: 50px;

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like then change the link in the css for the icon to this new location as below:

background-image: url( !important;

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Making a Sliding Search Box in WordPress

I’ve had a few people ask for the code to create a sliding search box like the one in the header of this site. It’s quite simple, really, and all done with CSS. The code to accomplish this is below. For those of you using iThemes Builder, which I consider to be the best WordPress theme available, it should work as is. The code should require only minimal modification (if any) for other themes. Just double check the CSS classes on each element to be sure they match what’s below.

In the sample below, the search box expands to the left due to the text-align on the widget area it’s in. That’s how I like it on my site. I just implemented it on a new site in development that has the text-align in the widget area set to center, so the search box expands in both directions at once. It’s a really nice effect. I’ll post the link once that site goes live.

The only thing you’ll need in addition to the code below is the image file for the magnifying class, which should be put in the images folder of your child theme.

← Here is the one I’m using (right click and save-as), or just use your own that’s roughly 20×20 pixels.

This code styles the plain unclicked search box:

.widget_search .search-text-box {
    -moz-transition: 400ms width ease;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease;
    background: url("images/search.png") no-repeat scroll 5px 6px #FFFFFF;
    font-size: 0.65em;
    height: 30px;
    padding: 0 10px 0 30px !important;
    width: 55px;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;

This code styles the search box when it’s been clicked:

.widget_search .search-text-box:focus {
    border: 1px solid #777777;
    box-shadow: 0 0 4px 2px #DEDEDE;
    font-size: 0.8em;
    width: 150px;