challenges of customizing a wordpress website – part 2

this is a follow up on our previous article anatomy of wordpress design (part 1) published a few weeks ago.

I could start looking for a commercial wordpress theme. you think it is an easy working solution either right of the box or with only minimal tweaks. but after shelling about $45, you spend hours trying wade through the css to modify some layout elements. I decided to go to wordpress.org first and try to find a free theme that’s close enough to what I’m looking for. theoretically, any theme can be customized to look like any other. what is important is how long it’s gonna take to get the job done and importantly, within budget. wordpress.org has over a thousand free themes but looking for a suitable one can be pretty daunting. they’re not always categorized to match your own criteria. nothing abstract as ‘art deco’, ‘minimalist’ or ‘corporate’. so I googled some keywords like ‘free themes’, ‘minimalist’, ‘mobile friendly’ and I kept searching until I eventually found a theme that was very minimalist and best of all, responsive. it’s called ‘responsive’.

wordpress responsive design theme
original wordpress responsive theme

responsive design is a flexible theme framework with fluid grid system that adapts a website to a desktop screen, mobile devices or any other viewing environment. it offers a good compromise of making your page fit on a desktop monitor as well as other mobile devices such as tablets and smart phones. this type of design is also referred to as mobile-friendly, mobilized (mobile-ized) or simply mobile. the theme offered a lot of features and enough customization options to modify the layout to meet client’s requirements: a lot of widget areas, different templates as well as menu positions. it had everything a developer would love.

though it specified that it was woo-commerce compatible, we didn’t have any intention of using ecommerce. the home page offered an almost perfect configuration for our needs except that it had some extra features like menu options, search box, widgetized footer. the logo needed to be replaced, background color changed and a some css elements tweaked. at first, modifying the home page proved tricky. it already had content that was not easy to locate, much less to remove. I think theme developers do that intentionally so they can charge you to remove those tricky elements.

wordpress design customization
layout of the website after customization

after a few unsuccessful trials, I decided to talk to the developer. I got a few tips for a workaround, then downloaded a few slider plugins, installed them with minimal configurations and let the client test drive them. once she made her selection, I thought all that I needed to do was adjust the size of the image display. centering the slider on the page proved to be tougher than I anticipated. after trying everything without finding a perfect solution, I settled for a less than perfect one, at least for now.

my determination was unflinching. I gave it some time then decided to take a serious look into the plugin files. I found a file that mixes css rules with conditional php functions. since I got a fairly good understanding of the code, I started suspecting the rule that was the culprit. after making some modifications, I saved the file. upload. then check the live webpage after refresh.  a couple of more trials, and the slider was perfectly centered. it’s a good feel when you get on top of a tough issue like that.