There are lots of good plugins out there for displaying social media profiles on your site, but what if you want to use your own icons? And you want your client to be able to easily manage the links to these social profiles? The solution is to create a custom menu in WordPress with unique CSS styles assigned to each of those menu items. But how?

Here’s what we worked on: A custom menu with unique icons for Twitter, YouTube and Facebook:

After searching the web for how to add images to the WordPress custom menu, we tried the Custom Menu Images plugin with no success. We even tried some crazy workarounds like trying to put the image path inside the navigation label! WTW?! Crazy, but true. And it didn’t even work in the end. It printed out the character tag < reading the HTML instead of rendering it.

And then, we saw the light! In the form of the Screen Options pull down tab right there in the Custom Menu screen in front of our faces! Well, actually the light came from this post that told us where to look. How did we ever miss it? It was so obvious! Once you know where to look, that is. So here’s what to do:

1. Go into your Custom Menu (functionality added in WordPress 3.0) under Appearance > Menus
2. Click on Screen Options in the top right corner of your screen
3. Check the checkbox next to CSS Styles in the Show Advanced Menu Properties
4. Create your menu
5. In your menu item, in the CSS Classes field, enter the name of the CSS style you want to associate with that menu item. Just the name of the class without the period. Ex. “twitterstyle”
6. Go into your CSS file and add the style and add images and/or styles as you see fit.

That’s it. More coolness that Screen Options can do, Show more pages in your WordPress Dashboard.

This post was originally published at How to add images and styles to the WordPress custom menu on WP Garage - WP Garage - wordpress tricks, hacks, and tips.

I was recently working on a WordPress site, and I just couldn’t get my images to left-align with the text so that the text would wrap around it. It was wrapping in the text editor in the admin, but on the front end the image stuck out of the top of the text.

Rebecca, our genius Web Project Manager at illuminea, did a search and discovered on the WordPress Codex that a bunch of new styles are needed in your style.php file in order to get the images to do what you want from WordPress version 2.5 and up. If you are using an older theme, you may not have these styles in your style sheet. The same classes are used to align images that have a caption (as of WordPress 2.6).

Here are the styles – you can just copy and paste them into your style.css file or wherever your CSS styles are located:

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

This post was originally published at New CSS for aligning images, block elements and captions on WP Garage - WP Garage - wordpress tricks, hacks, and tips.