I know there are lots of WordPress tips and hacks kinds of sites out there. This site is designed to aggregate and categorize the solutions I find, and contains some original content as well. If you know of a post that should be included, you can submit it via the form at the top of the sidebar; particularly if you’ve posted a “how to” on your site- you can never have too many incoming links right? This site is somewhat inspired by CSS Globe, which is a great resource for web developers, linking out to all kinds of great tutorials, tips, hacks, etc…

So, check out SolutionsforWP.com. Submit your WordPress solution posts and bookmark it for the next time you’re trying to figure out a way to make something happen in WordPress.

*Props to ElegantThemes.com for the site design. I didn’t have time to do a custom theme for this site, and one of my favorite sources these days for AWESOME premium themes is Elegant Themes. You get access to all his themes for only $19.95 and they are not only beautiful, but have some great options on the back end, and I have found them to be easy to customize as well.

You know how sometimes you find that you’ve been doing things the hard way for a long time, and then realize that if you’d only taken the time to think about it, there was a much easier way to do it? That’s how I was with managing the images in my sites. Since WP 2.7 there have been some expanded media options, but I just never took the time to think about how I might put them to good use until recently. I was sizing each image in Photoshop and I could never remember which site needed which size- basically wasting a lot of time on something that WordPress had already simplified for me.

If you’re new to WordPress, you might not be familiar with the media settings, so here’s a brief run through:

Under the Settings section at the bottom of your admin options at the left of the screen, click on Media and it will take you to this screen. You can see that there are 3 size settings to play with: Thumbnail, Medium and Large.  When an image is uploaded to WordPress, it will automatically generate 3 image sizes for your use. You can still use the full size image you uploaded of course, but you can also choose to use the various sizes that are generated in different ways on your site. In my site, I use the thumbnail size in my second column on the home page, the medium size in the first column and the large size in blog posts.

Large size

If you do nothing else, you might at least want to set the max width on the Large size image setting.  You can see I’ve got mine set to 448 pixels. This is because I know that the maximum size image my main content column will hold is 460 pixels, and my images are styled so that there is a 6 pixel border around them. The height is set very large, since this will be variable and I don’t necessarily want to limit it. This ensures that I will never try and put an image in a blog post that is too wide for the column. In some themes, depending on the browser, if you put in an image (or video) that is too wide for the column, it will break the theme and send your sidebars down to the bottom.

So, what if you don’t know the maximum width your theme can use? You can usually find the width of your main column in the CSS stylesheet using a add-on for Firefox called Firebug. Check out my overview on using Firebug for how to find the CSS styles for your theme. You could also install the MeasureIt add-on for Firefox and measure the column.

Medium size

Unless you’re using the medium size for a specific purpose, as on my site, the best width for this size might be about half of the large size. This will give you an image that you can align to the left or right and still have plenty of room for your text to wrap around it and look balanced. You could also use the medium size for a second thumbnail size depending on how you use images in your site.

Thumbnail size

This will be the size of the thumbnails in your image galleries, if you use that function. It is also most handy for setting the size of thumbnails that are regularly used in magazine-style themes (here’s a good post by Brian Gardner on this topic), or if you use thumbnails in your archive pages (see example here).

So, that little overview is probably basic for some, but WordPress has so many great features these days, it never hurts to go over some of the ways they can be put to good use!

Create your mockup

When mocking up the site, always keep CSS in the back of your mind. Don’t let it stifle your creativity, but do keep in mind you’re going to have to translate your design into code and considering how you’re going to make that happen as you’re creating it is helpful. If you’re new at taking a design into code, then start simple. Once you have some practice, then branch out a little. I have found that just about anything I design, I can find a way to code it effectively, and pushing the limits each time expands my proficiency with CSS and WordPress.

Also consider the size of graphic elements as you’re designing. You want your site to load as quickly as possible. Use repeatable tile graphics where possible, and if you can use them in multiple places all the better. For example, your small gradient that you’re repeating horizontally across your nav bar can also be used as the background for a search button and for sidebar headings.

Print out or sketch your mockup and make notes

This step isn’t always 100% necessary, but depending on the complexity of what I’m trying to accomplish,  I often find it helpful to think through where all the divs are going to go on paper and make notes about border and background color codes as well. It makes it much easier to fly through the coding stage having thought through it all on paper first.

Slice your mockup

Do this after you’ve done the above step, as it might impact how you slice your images. Make your images as small as possible to accomplish the design. You only need a 1px wide slice of that nav bar background that repeats horizontally. Be sure you’re using the “Save for Web” option in Photoshop and compare file types to get the smallest size with the best result possible. I save my images as PNGs if possible because they are lossless, but I always compare what the file size is if I were to save in JPG at about 70% and if the JPG is smaller that’s what I go with. If I’m going to use transparency, I’m still erring on the side of caution and going with GIF for the most part because IE6 users will just see grey in the transparent areas of a transparent PNG. If the site is targeted to lower-tech users, this is a no-brainer. (I have a site where still 20% of the visitors are on IE6. Crazy.) But, if it’s mostly going to be a higher tech target, then transparent PNGs are the way to go, or just avoid transparency if possible.

Pick a theme to use as a base

I go back through themes I’ve done in the past and choose the most similar one to the new one and copy it over to use as a starting point. If you’re relatively new to designing themes for WordPress and don’t have that option, here are a couple of alternatives:

1. Start with the default theme that comes pre-installed with WordPress.
2. Use a free theme, but be sure to choose one that has easy to modify code.  Be sure to leave the attribution in the footer to the original author if you’re not changing the theme much.  My DIY Theme can be a good choice as I’ve deliberately made it uncluttered and simple to be easily customized.
3. There are some very good “blank” WP themes. There is a list of themes and other resources at DesignMag, and here are three blank themes from Refueled.
4. Buy a license for a premium theme. I have found that any of Brian Gardner’s premium themes are very easy to customize. I’ve worked with A LOT of themes and his would be my first choice any day.
5. Use a WordPress theme generator and customize the result. The PixoPoint generator looks excellent. I used this one a couple of years ago and it worked well. Here’s another and another.

Code!

Make sure all your sliced images are in the images folder for the theme and dive in. I always code directly in a live WP installation on my test site. You can also set up WP locally on your own computer. I’ve done this, following these instructions (beware, it’s a bit hairy). If you’re still learning CSS you might find my post on playing around with CSS directly in your browser via Firebug helpful. You’ll definitely want to install Firebug either way. It makes it very easy to see what bits of CSS are affecting each element, and when your site goes all wonky because you’ve forgotten to close a div, it makes it much easier to track it down.

Validate and test

This is an important step and one that’s easy to overlook. Use the W3C Validator to find errors in your code. I found diagnosing the problems to be a real challenge at first in some cases, but don’t let that deter you from ensuring your code is valid. Be sure to test your site in every browser you can. You can install multiple versions of IE on your computer with this tool.

Let me know what questions you have. What do you find most difficult about this process? Anywhere you’re getting stuck I can help you with?

Don’t get boxed in

It’s easy to get boxed in by the way most WP sites are set up, and think that WP is not the right solution for a site because it’s not a blog. I have found, however, that the best way to approach a site, is to decide how you want to present the content and then figure out how to make WordPress do it. It is so flexible, and there are so many plugins, hacks and specialized themes for managing content that I have yet to work on a site I didn’t think it was the best solution for.

First design the car, then put the engine inside

The best way to approach a site you’re going to run with WP is to first decide how you want the site to look and function and then figure out how best use WP to drive it. For example, with our new site My Social Buttons, Char and I weren’t intending it to be a blog. (We happened to put a blog on there after the fact, but that was really secondary.) We just wanted a site that would have pages with different categories of social media graphics, that linked back to the designer of each set. The solution ended up being a combination of custom fields and some fancy if/then logic to hook everything together managing the content in the most efficient way.  I also had to figure out how to have the blog posts look like a regular blog and the posts with icons and graphics remain as they were.

Don’t let limited experience limit your design

One important thing I want you to know: I didn’t know how to do any of that stuff before this site. I used to think that people who did fancy and unusual things were PHP and WordPress experts. Some of them are, but the truth is that many developers are just like me, learning one thing at a time, solving one problem at a time with the help of support forums, the many helpful bloggers out there who post what they’re learning, and my friend Google. Become familiar with what is possible with WordPress, then figure out the solutions as you go. If you’re trying to do it, chances are someone else has done the same thing in the past and written a post about it on their blog, or posted a question in the support forum.

More examples

Our site is just one example. College Crunch is another example of using WordPress as a CMS, and Glamorati is another interesting use of WordPress. I’d list more examples, but there’s already an article at Performancing that covers this in depth: 48 Unique Ways to Use WordPress.

I have had several clients tell me of bad experiences with designers in the past who were difficult to work with and they didn’t feel they had gotten a good value for their money.  In the end, they regretted having hired them. When you are looking to launch a new site and have chosen to invest in a professional design, how do you go about choosing a good designer? How do you tell a good one from a not-so-good one?

What is “good”?

“Good” is a rather subjective term isn’t it?  There are designers who do great work, but who are not necessarily great to work with and vice-versa.  I won’t get into what good design is here, because others more expert than I am have written on the subject quite well.  In the end, you will want to find someone whose work you admire who creates visually appealing, easy to use sites who is also helpful, responsive, flexible, and sticks to established timelines.

Start with their portfolio

A good designer will have examples of their work available- not only graphic examples, but live sites as well.  Does the majority of their work appeal to you?  Are they easy to navigate and use, or merely pretty to look at?

Get some references

If you’re not referred to the designer by someone you know who has already worked with them, it is a very good idea to get some references, just has you would if you were going to hire an employee.  I recently had a call with a potential client who said he had contacted a former client of mine to ask about their experience working with me.  That was the first time to my knowledge someone had done that.  Why?  If you’re going to pay for a professional service, and in many cases give them a deposit up front, don’t go into it blindly, hoping it will turn out okay.  There is no way to know what someone will be like to work with unless you ask someone who has “been there, done that.” Any decent designer would be glad to give you some references to contact.

Good designers are in demand

Unless they are just starting out and looking for new clients, a good designer will be in high demand and will be booking work out weeks and months in advance.  This might be frustrating if you’re in a hurry to get a site up, but you may need to be willing to wait for the person you want.

Good designers are not cheap

As it is with most things- you get what you pay for. That is not to say that you won’t run across someone who is undervaluing their work and end up with a great deal. But for the most part if you want a good designer, you need to know that their time is valuable and that ultimately the money you spend is an investment in your own success.

Good designers ask a lot of questions

Good designers want to know what appeals to you, what your goals are for your site, what your target “customer” is like, and what is going to make your site unique.  They are going to have to ask plenty of questions to get a good sense of what is going to make your site successful and make you happy.

Making clients happy is the goal of any smart designer, because we know that the best way to get good clients is for them to be referred by other happy, satisfied clients.

To change the style of your images, first insert them as you normally do, and then click on the HTML tab (or in Blogger it says ‘Edit HTML’). Look for the code that calls the image you want to work with- it will start with ‘<img src= ‘. We’re going to insert some “inline” CSS styling into the HTML tag just before the /> that ends the tag for that image.

Example:

Suppose my image tag is <img src=”http://randaclay.com/me.jpg” />. Here’s how that image shows up with no inline styling applied:

Now, let’s suppose I want to add a thick black border around the picture. Right before the /> that ends the tag, I’m going to insert: style=”border: 3px solid #000000″ (you can find the six-digit HTML color codes here; ‘px’ is short for pixels).

<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000″ />

Maybe I’d like there to be a space between the border and the actual picture:
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px” />

Now maybe I’d like that white space to actually have a color:
<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px; background-color: #66ff99″ />

Now let’s apply some styling so that the image appears on the left of the paragraph and has a good amount of margin between it and the text:

<img src=”http://randaclay.com/me.jpg” style=”border: 3px solid #000000; padding: 3px; background-color: #33cccc; float: right; margin-left: 20px” />

For this one, I actually needed the paragraph text over here to the left to be after the image tag in the code.

If your theme automatically styles your images with borders and you’d like to remove the border, use style=”border: 0px”

For a complete reference of CSS styles available to you, see the W3School CSS reference.  I hope you find this to be helpful. If you get stuck while trying this out, let me know in the comments below.

The plugin is great and if you use it as a widget, it’s pretty easy to use right out of the box, but my client wanted some customization to the sidebar section, so we needed it to be outside of the widgets in the sidebar. There were a couple of coding tweaks that were necessary, which I’ll list here, just in case you run into some of the same problems I did as you install the plugin.

• Be sure to call your sideblog category ‘Asides’, otherwise it won’t work properly. The category name doesn’t show up anywhere except the permalink anyway. If you don’t want to call it Asides, be sure to change the name of the category in the php tag that calls the widget.
• The posts in the Asides category were also showing up in the main body of the blog for some reason. This page in the WordPress codex will be helpful if you have that problem as well.
• If you don’t want your Asides category to show up in your main category listing, you can check out these instructions in the codex. This only works if you’re not using sidebar widgets. If you’re using widgets, this post in the WordPress forum gives the answer to excluding the category from the list.

What is a template tag? Template tags are used within your blog’s code to display information dynamically. They pull information from your mySQL database that your blog runs on, and allow you to display it using a simple via a PHP tag. PHP is the coding language that makes your blog work, while CSS is the code that makes your blog look the way it does.

To display the time, first we need to find out what the template tag is from the list in the WordPress codex. You’ll see if you follow the link, all the various template tags available. In the Date & Time section, we see that the template tag for the time is “the_time”. Clicking on the link for that tag gives us more detail about the options available, and even gives us an example exactly like what we’re looking for.

Now, we need to know where to put it in our theme files. We’ll use the DIYTheme as an example, but the code for your theme should be pretty similar. If you go into the Presentation tab, and then choose Theme Editor, you’ll see the list of files available for editing on the right side. Click on the one called “Main Index Template” or “Index” or something of that nature, and you’ll see the code in the left side window. Before you make any changes, copy all the code in the window and paste it into a text document somewhere, just in case it gets goofed up. Then, find the section with the following code in it (not too far down in the DIY Theme):

and then just add in the template tag for the post time wherever you’d like. I added it after the date:

Click the Update File button, and it will save your changes. Visit your site and make sure the changes worked. Keep in mind that your theme may also have a Single Post file where the code looks very similar to the one we just edited, that you may want to add the same template tag to. And, that’s all – that was easy right?

If you only have IE on your computer, you will need to get Firefox, and then get the add-on for Firefox called Firebug. Once that is installed you will see a little bug icon in the bottom of your browser:  Open the web site you’d like to edit, and click once on that icon. That should open a pane at the bottom of your screen that looks like this:

One of the things you can do with Firebug is edit the CSS for the page right in that pane, and see the results of the changes you made in the page above immediately. This does not affect the CSS that is saved in your WordPress theme editor at all – this is just temporary in the window/tab you have open in Firefox.

Edit the CSS in Firebug
So, let’s say you’ve downloaded the DIYTheme and you like the header with the water droplet and you want to change the sidebar headings to a blue color to match. You can see what piece of the CSS the headings are styled in by clicking CSS and then click Inspect. Then mouse over the elements in the page – see how they get a blue box around them? Mouse over one of the sidebar headings and then click on it once, to tell Firebug that’s the element you want to inspect. In the right side of the Firebug pane, you’ll see the various pieces of CSS code that affect that heading. If I do this in the DIYTheme demo, I see this:

H5 designates the heading, and below it are the styles applied to that heading. The first line says “color: #000000″ which means the font color is styled with the color code for black. Now we need to go find that piece of CSS and edit it. In the Firebug pane, click CSS then click Edit, and scroll down until you see that section of code- about a quarter of the way down in the DIYTheme. Then you can click on the color code and change the 000000 to something like 003399 for a nice blue color, (check this page out for a list of hexidecimal color codes) and voila, you have blue headings!

Edit the CSS in your theme
If you’ve made changes you like, and would like them to be permanent, then do the following:

• Go into your Admin panel in WordPress, and go to the Presentation tab and click on Theme Editor.
• Make sure you’re in the Stylesheet file, and first make a backup copy of the CSS by selecting all of it and pasting it into a Notepad document on your computer.
• Then make the same change in the CSS as you did using Firebug, and then click the Update File button at the bottom.
• If you make lots of changes and just want to copy over the entire file, you can highlight all the code in Firebug (Cntl-A to select all, Cntl-C to copy it) and paste it over top of your current CSS (Cntl-A to select all, Cntl-V to paste the new code over top), and then save.

I would encourage you to play around with the CSS in Firebug, to get comfortable with making changes. You might want to refer to the CSS Reference Guide to see all the different types of style selectors that are available to you. It’s a great way to learn CSS and to get comfortable making changes with no worries!

Any questions? Ask in the comments!

Several months ago I did a post on productivity as a part of a group writing project. Vivien at Inspiration Bit has a new group writing project going on a similar topic – time management, which is something I think most of us deal with on a daily basis. I have a toddler at home and with the increasing number of opportunities that are coming my way, I am finding that it is very important to maximize my time. I have to make every minute that I have available to work count, because there are never enough of them! Here are some things I do to help with time management:

1. Don’t waste time. This seems rather obvious doesn’t it? I used to waste a lot of time watching stats, checking e-mail often, keeping things in my feed reader that might be sort of amusing, but were just time suckers. I had to ruthlessly eliminate things that were pulling me off track.
2. Carry a notebook. In my post about Moleskine notebooks I mentioned that I had started keeping a notebook with me at all times. So, for example, If I have 15 minutes to wait at the doctor’s office, I can begin to formulate a blog post or sketch some logo ideas.
3. Keep a calendar. I used to just sort of keep a running list of things that I needed to do in my head and just get them done as quickly as possible. Now, with work backing up I can no longer keep track of everything, nor can I give clients a feel for when I could begin their project unless I keep a calendar in which I plan out projects, estimating the number of hours things will take. This goes a long way towards eliminating stress as well, since I have a clear plan for getting everything accomplished on time.
4. Work anywhere and everywhere. I use online tools like GMail, Google documents, and WordPress so that I can work from any computer. If I end up an my parents’ place with time to kill, I can turn on the laptop and get some things accomplished.
5. Break all tasks into small bits. If I have even one minute, I sit down at the computer and do something. Every little thing I can do gets me closer to finishing a task.
6. Learn to say no. That is a hard one for me… really hard. I want to do everything! I want to help everyone that e-mails me and needs something designed, fixed, written, etc. but I just can’t. Saying no does get easier the more I do it.

Even with all of my efforts, I still feel as though I could do a better job managing my time. Do you have any tips for me?