Everything went fine with the import except there were lots of weird characters in many of the posts. Since these nasty little characters are caused by character set issues, I made a few adjustments and then used a plugin that I found to convert all the tables to UTF-8 called Convert WP Database to UTF-8. That got rid of most of my weird characters but I was still left with hundreds of posts that had the dreaded “black diamond question mark” symbol in them. It looks like this: �

Scary, isn’t it?

If it had just been a few posts, I would have just edited them and gone about my merry way. But edit over 400 posts? No way.

My Google searches came up with a great post on dig.wp (one of my favorite sites) about cleaning up weird characters in a database

Bingo! Exactly what I was looking for.

If you are plagued by those ugly little black diamond question marks, here’s how to send them packing. Run the following query on your database (instructions for using phpMyAdmin follow).

UPDATE wp_posts SET post_content = REPLACE(post_content, '�', ''); 

What I’m doing with this query is replacing the black diamond question mark with just a blank space. If you want to insert something in place of the black diamond question mark, you would put it between the single quotation marks.

A few important notes:

1. The query above works for a default WordPress install where the table prefix is wp_ . If your table prefix is different (and it should be), then replace wp_ with the appropriate prefix.

2. Make sure to take a backup of your database before doing this. You never know.

To run this query in phpMyAdmin:
1. Click on your database name, on the left.

2. Click on the SQL tab in the top right area.

3. Enter the query in the big white box there and then click the little oval “go” button in the lower right of the screen.

You should receive a message shortly that the query ran successfully.

I hope this solves your dreaded dark diamond question mark problems. I think this is a great way to quickly clean up a messy database without pulling out most of your hair.

To customize a specific widget, you’ll need to edit your style.css file in your WordPress theme. You’ll find this in your theme’s folder on your server (wp-content/themes/your-theme-name/style.css) and you can also access it within the WordPress dashboard. Go to Appearance – Editor. You’ll see the style.css file for the activated theme at the bottom of the list of files on the right and this file will be open in the editor for you by default.

CSS Rules – a very brief explanation

In the style.css file you will see lots of lines of code that look similar to this:

#wrap {

background-color: #fff;
margin: 15px auto;
overflow: hidden;
padding: 0 0 20px;
width: 980px;
-moz-box-shadow: 0 1px 2px #999;
-webkit-box-shadow: 0 1px 2px #999;
}

These are CSS rules. Each CSS rule has two main parts: a selector, and one or more declarations.

W3schools.com has a great diagram that illustrates CSS Syntax.

Finding the name of the widget you want to style

The first thing that you need to do is find the name of the widget that you want to give individual styling to.  The easiest way to do this is by using the Firebug plugin for the Firefox browser. While viewing your blog, put your cursor over the widget you want to style and right click. You will be able to view the source code (html) and see the name of the individual widget. Alternately, you could right click anywhere on the screen while viewing your site and then click on View Page Source or View Source (depending on your browser.) This will open another window that will display the pages’ html

In StudioPress Themes, widgets are typically styled in the CSS using a generic definition based on the class (which is “widget”), that affects all of them.  This class is defined using one of these selectors:

• #sidebar .widget
• #homepage .widget

When WordPress generates the html from the widget code, it gives each widget an ID name and class name, along with a generic widget class. Here is what the html may look like, depending on what widgets you are using:

<div id="sidebar" class="sidebar widget-area"><div id="text-353240355" class="widget widget_text">

From the html code source above, we can see that the ID name of the first widget is “text-353240355 which is what we need to customize that specific WordPress widget and the class name is “widget” (from class=“widget widget_text”.)

All we need to do now is add a new CSS selector to style the selected widget.  In this case, let’s say that we want to add a specific font color and bold the text.

In order to affect our selected widget, we use the name that we found above, in the CSS definition:

#sidebar  #text-353240355 { 
color: #CC0099; 
font-weight: bold;
} 

Since we only provided settings for two items, the rest of the styling will come from the generic rule through inheritance. That rule, for this example, looks like this:

#sidebar .widget  {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
}

So to customize a specific widget, add the additional or overriding declarations to the specific selector {#sidebar #text-353240355}.

For example, the generic rule above has a setting for a background color of white (#fff), but suppose you want your selected widget to have its own unique background color of black (#000) and you don’t want any borders on your widget. You would then add the declarations to the specific widget rule like this:

#sidebar #text-353240355 {
background-color: #000;
border: none;
color: #CC0099; 
font-weight: bold;
}

The background and border declarations in our specific widget rule above will override the background and border declarations in the generic widget definition. However, your widget will still retain the 10px padding which is specified in the generic rule.

So that’s the basics. If you’re new to CSS, I would encourage you to take the time to review the tutorials on W3Schools: http://w3schools.com/css/

Over the years, I’ve redone my site numerous times. There’s always a new theme that catches my eye. But there’s something about working on client sites that leaves little time to tweak out your own. So while I tried to at least keep my site looking orderly, I was painfully aware that it wasn’t really conveying my personality or my abilities. Sharon and I had pondered putting together just the right look and branding for my site over the years, but just never carved out the time to complete it.

Finally, we both had a few moments of inspiration. With a plea of “help!” from me and a bit of direction, Sharon worked her design magic to come up with what you see on WP Fab today: a 5-star makeover.

I knew I wanted to use the new Genesis Magazine theme as the basis because I like the clean look of it and felt it would be a good background on which to showcase client projects. Sharon knew my favorite color is purple and incorporated that into the look of the site. The logo, using the 5 stars as it’s theme, just felt like it fit, as I always strive to deliver 5-star service. I also feel it’s a perfect fit for the type of sites that my collaboration with Sharon produces: her fabulous design and layout combined with my WordPress knowledge and customization.

At last, I feel I have a look and brand that I can move forward with. It’s a great feeling.

I’ll be doing a series of posts soon to show the whole 5-star WordPress makeover, from start to finish, so you can see what Sharon and I could do for you.

Renée Coppinger wanted to revamp her current site and give it a stylish look. The end result is a bold and chic site, if I do say so myself, thanks to the brilliant design work of my partner in WordPress, Sharon at Asi Asi Design.

For the Stylemakers International site, I started with the Genesis Lifestyle theme and made several customizations, one of the most noticeable being the large featured images on the home page.

I also added a top navigation bar and created left and right subsections. The left top navigation bar contains icons for RSS, Facebook, and Twitter with appropriate links to those accounts. The right area of the top navigation holds the site search. The top navigation bar was a feature of the Classic StudioPress Lifestyle theme but is not a part of the Genesis Lifestyle theme.

A small logo in the lower left footer, outside the main body of the site, completes the classy look of the site.

Project manager Amy Laff asked me if I could convert her client’s site to WordPress, and of course I said yes.

I replicated the current layout and look of the non-WordPress site and converted it to a WordPress site, which makes it much easier for the client to manage and update.

It’s called Social Media Widget and it’s a super easy way to add social media icons with their links to your sidebar. All you do to make the icons for the services you want to display is enter the URL for that service. The widget creates the icons for you from one of five included icon packs. You get to choose the icon pack you want to use. And if none of those icon packs make your day, you can even use your own set of icons.

This widget has a bunch of options. It supports over 40 social media sites and yes, that includes Google +1. It also has a section where you can input up to six custom icons. You just type in the URL of the icon image you want to do and the corresponding URL you want it to link to.

Want more? You’ve got it. You also have three icon size options (16px, 32px, and 64px) plus four options for animation of the icons when you roll over them with your cursor.

I haven’t had much time to play with this widget but I can tell you that it made my day. I think you’ll really find it handy.

Tim and Jerry, the co-owners of TRYChips, are on a mission to get the couch potatoes of the world up and moving. They created TRYChips as a healthy alternative to the sugary “energy” snacks out there. (Let me tell you…TRYChips are delicious. Thanks Tim and Jerry for getting me addicted to those dehydrated bananas!)

Tim and Jerry had picked out the Outreach theme and were happy with the look of it, so we added his logo to it and customized a new sidebar to appear next to the homepage gallery.

After some little tweaks here and there and a bad experience with an e-commerce plugin that both Tim and I won’t soon forget, their site is a place where all their “TRYbe” can connect and find out about the latest challenging events….and get a bag of those addicting bananas.

Thanks Tim and Jerry! You’re a blast to work with.

In February 2011, the ladies at Sassy Hong Kong came to me to help them launch their new sister site, SassyMamaHK. Hester provided me with a detailed project outline and graphics. Hester is a pleasure to work with because of her attention to detail and clear information and instructions she provides me with.

Just like the SassyHongKong site, we again used the Genesis Lifestyle theme. They wanted to replicate the clean, minimalistic look of Sassy Hong Kong.

Featured Customization Since the ladies have a style all their own, they wanted something other than the typical sharing buttons for Twitter and Facebook on their site. They also wanted to include links to print the current post and to send via email to a friend. Hester provided me with the graphics they wanted to use and I custom coded a section that appears at the end of each of their posts and right above the comments section. Here’s a screen shot:

Additional coolness of this customization: the Twitter button automatically shortens the URL of the post that gets sent to Twitter.

The gals liked this custom sharing section so much that we added it to Sassy Hong Kong as well.

For this site, I teamed up once again with WorkITGibratar, Gibraltar’s social media experts, for their client Fiduciary Marine Services Limited. The clients chose the Genesis Enterprise theme for their site.

I went to work installing WordPress and the needed plugins. We put up a temporary “coming soon” page for the site so that we could work on it behind the scenes. Sharon at Asi-Asi Design completed the design, which included large graphic for the top of each page to provide a clear visual representation of the subject of the page.

The client wanted a place to make their newsletters and other documents available for download. To help manage and track the downloads of these documents, I installed the Download Manager plugin.

One special customization I provided is the News Feed Page. I custom coded this page to pull the news feeds from several different sites so that the client could provide industry-related news on their site.

It was a pleasure working with WorkITGibraltar and Asi-Asi again and I look forward to many more happy collaborations.