WordPress Design Disasters

A custom WordPress design will help you stand out from all the other sites based on this publishing platform. But if the design is not done correctly, a customized WordPress theme can leave plugin's which functions do not appear correctly and many other visual and performance problems.

A custom WordPress design will help you stand out from all the other sites based on this publishing platform. But if the design is not done correctly, a customized WordPress theme can leave plugin’s which functions do not appear correctly and many other visual and performance problems. Here we discuss how easily you might fall into this trap yourself and the best way to proceed in order to avoid that.

So you have installed WordPress on your website and started to make blog posts to it. Already you are happy with the ease with which you can quickly get fresh content out there on your website, with only very limited skills required to do it. And the longer you have your WordPress blog for the more comfortable you become with using the WordPress publishing interface.

Soon you are so comfortable with WordPress that you decide that it would be nice if you could just change that header image at the top of the screen. You have already taken a look at the CSS file, and the other PHP files and you think that it is really not difficult to simply change the URL of the image for the image you would actually like to use instead.

You make the change to the required line in the CSS file, and hey presto, to your delight you see that you have indeed changed the image to the one that you would like to use instead. You have already started on your adventure in creating a custom WordPress design. But beware! Because this is where things can become very treacherous indeed unless you’re cautious!

For after looking a little closer at your new header image you realize that it does not quite fit right into the top of the blog. A little bit of the image is not being displayed. Alternately, the entire image is being displayed, but it is also repeating some of the images again right at the side of where the image is supposed to end.

This is a common problem when you try to create a custom WordPress design. You see the original theme was created for specific image size, and if your image is not exactly the same size, then you will have to make some changes. However, this is not that difficult and you soon find that you can edit the required code in the main CSS file for the blog and everything looks great again!

Not long after this, you decide that you would like a fancy navigation system on your blog. You have seen some wonderful free navigation panels available from DynamicDrive.com or JavaScriptKit.com and you think that one of them would look great on your own website to help your visitors in navigation. So you install it on your website and take a look at it when it’s live.

Your custom WordPress design really is starting to look good now. But then you notice that the navigation panel does not perform as it did in the demo. You notice that it does not actually fit properly into your fancy blog. But not to worry, you have edited the CSS file before to make a fix, and you can do it again, right?

So after some trial and error, you find the appropriate line of code that needs altering, and before you know it you have found a way to make that great navigation system fit into your blog after all. Now all your visitors can see the same great looking navigation panel on your blog that you have everywhere else on your website.

Whoever said that making a custom WordPress design was difficult? You just made another change and everything looks great. All those people on the internet who say that editing WordPress themes is not straightforward do not know what they’re talking about, right? Well, it’s just as well you feel this confident because now you’re thinking that those sidebars could do with a little tweaking.

Sure, the sidebars look great already, but if you could just change them a little bit, then you could add one or two features into them that you wanted to do for a while now. You wanted to add those banners for that affiliate product you really like and want to promote on your blog to make some extra missions. Well, that should not be too difficult, you’ve done it before right?

So you resize the sidebars, after some effort altering a line of code at a time and refreshing your blog in your browser to see what the effect of each change was, and before you know it the sidebars are the perfect size to fit in all sorts of advertising media. You happily start to add the banners and other content you want to be displayed within.

This custom WordPress design stuff is easy you think as you behold your fancy looking, easy to navigate and an effective new blog, which is also well monetized with the advertising media of your choice, and also fits in that email list subscriber form that you have everywhere else on your website. At this stage though, the one thing that would be nice would be if you could actually move the sidebars out so that they are right on the edge of your viewable screen to leave more room for content in the middle, plus it would match the style of the rest of your website.

And so you begin tweaking the main CSS file once more. This time it takes a lot more effort to make the sidebars move out to the edge of your screen, but eventually, you manage to make it happen. It took far longer than you thought it would, and you had to change several lines of code within the CSS file, but just as you have done all along you made a change to your WordPress design and everything looks good.

As time goes by you make yet more changes, nothing major, only small tweaks here and there, but gradually your blog looks nothing like the theme it was originally supposed to be, and frankly good riddance to it because you now have something far better. As you hoped all along your custom WordPress design is helping you to differentiate yourself from all those other websites out there whose owners have not got the sense to make simple little changes that would dramatically improve their blog!

Sometimes they are just lazy you think to yourself. Or maybe they are just too stupid, you say to yourself with a little laugh, as you think about how cleverly you managed to make all of those changes all on your own over the months.

At this stage of the article, you may have noticed that the recording theme is the desire to alter some element of a WordPress blog. You will also have noticed the fact that changes were made to the code in the CSS file on a sort of trial and error basis. In fact, many people have learned to alter themes by changing one line of CSS code at a time, and refreshing their blog to see what effect the change had on their blog.

However, this is where it starts to get really serious though. Because even if you constantly check to see what changes are made with every alteration, it is quite easy to miss the changes if you are only using one browser, or much worse still, one screen resolution! That’s right, something that looks fine in one browser may not actually function in another browser, and something that looks great at one screen resolution might look terrible at another screen resolution.

The screen resolution problem is the worst of the two issues because most browsers are capable of displaying and supporting the same basic functions, although not all monitors are created equally! Some of your website visitors might be using an extremely old monitor with a small screen resolution, while others might have a brand spanking new monitor with an amazing screen resolution. And if you are not very careful your fancy new blog can look terrible on a different monitor!

If you take away one lesson from this article it should be this:

WordPress theme functions are dependent upon more than one line of code in the main CSS file. Some times there are several lines of code that need to be altered in order to make the one change. If you do not alter each of the necessary lines of code exactly correctly then you will almost certainly get unexpected results. If you do not notice immediately any changes that are detrimental to your blog, then you might forget to change them back again. From this point on further changes can have a wild impact upon your blog, and without having adequate backups of your original CSS file, created again after each change, then you might create a blog that is a disaster on the eye!

So always make backups, always test each and every single change, always view your blog in all screen resolutions, and above all learn more about WordPress theme CSS files before you even begin. Your custom WordPress design depends upon it!

Brandon-P

Brandon-P

Leave a Replay

About Us

At WP Website Lab our goal is not to sell you a website but rather serve you with the entire web experience so that you see a return that’s is worth your investment.

Recent Posts

Follow Us

Weekly Tutorial

Sign up for our Newsletter