Selecting WordPress elements for styling

Web design has been a passion ever since I finished mu secondary tier of education. With the advances of web technologies, that passion is getting even stringer by the millisecond.

One annoying problem I have run into with web design is the aspect of object selection from a framework. Given a framework (e.g. WordPress) that spits out HTML as required by the site’s administrative editor, the page structure and layout may be alien to a web designer whose task is to pretty the site up.

WordPress will be the case study because The love for this framework has grown over the past couple weeks.

There are fields in WordPress that look the same, especially when styled by a previous theme. But they have two mutually exclusive structuring. For example, assuming you have the default WordPress setting on your site, you should have a blog page (which is also your homepage), an About page that explains more about your organisation and a Contact page through which your site visitors can contact you. On your homepage, WordPress also provides you with a “Hello WordPress” post that’s basic with one comment. This post also has a Peekskill page somewhere in the mayhem of your sitemap (this is not important to U’s at the moment). But on that page, the same post is replicated. The difference between the post on your homepage and the perma-page post is the number of posts per page. Everybody on board? Yes…okay. If you notice, these two versions of the blogpost have a title that captions it. From a layman’s perspective (which I personally have used a couple times), these two objects on the page should be defined the same way. But if you delve into the source, you will realize that they are subtly different. Targeting (or selecting) these contents can be troublesome. If they were two completely different objects, selecting each of them will be easy but in this case, one has to be carefully meticulous.

However, bright minds in the human race have come up with some free solutions to this subtle problem. The first attempted solution to this problem was “View the Source Code”. This concept was rapidly employed by browsers across the web design world. Huge breakthrough for stylists. But this meant stylists had to put up with all tha junk from HTML Architects (a.k.a the page layout). The hunger for an easy way out gave birth to some innovative ideas. Most of them are functionalities directly built into browsers or plugins which you can install on the briwser. Some of these are Developer Tools for Safari and Chrome, Firebug or Firequark for Firefox, and God-knows-what for Internet Explorer. Please don’t go googling the term “God-knows-what”. I really don’t know what Internet Explorer has to help designers accomplish this task. That being said, if you download and install God-knows-what, please comment and post a link to it so I can check it out too.

These help but not as much as the tool I stumbled upon recently. It’s called SelectorGadget . This provides minimalistic selections for the objects you want to select just by clicking on them. It also introduces a concept known as Rejection, a complement of Selection — which is pretty cool and CSS should catch up on that soon.

I employ you to check it out. Your salary will be an easier way to select elements on an already made site. Check it out and make increase your rate of production.


2 thoughts on “Selecting WordPress elements for styling

Share your knowledge

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s