WordPress Customization

I presented some tricks to customise word-press. Here is more info and resources.

First the link to the the word-press blog I showed.

You can find a whole bunch of free templates available that you can use to change the look of the blog but a major part of each template is a CSS file that defines the visual elements of the page.  Using word-press admin you can go to ‘Editor’ under ‘Appearance’ section and further customise it. (The same feature is available for Tumblr and Cargocollective and some other CMS frameworks)

Here is a tutorial for learning CSS and HTML. (cheat sheets: CSS, HTML). Though knowledge of css and html is helpful for the project and also very useful skill in general, it is not required for customising wp.

A great tool to do simple hacks is Firebug. After installing it in Firebug as an add-on (There are instructions and tutorials available in the Firebug site) you can right click on different sections of the page and see the HTML code creating that section and the css  styles creating its look. You can edit the values to see the effects live but the results of the changes you make are not permanent. It is just for debugging.

After finding the correct css style, you can apply the changes in the editor of word-press (or Tumblr, HTML page, etc.) to make the changes permanent.

New versions of Firefox and Chrome are coming with ‘inspect element’ feature out of the box but only Firebug allows online editing.

The simplest trick is to remove an element from a page. For example you may want to remove the comment section from word-press. You just need to find the CSS code related to that section and add ‘display: none;’ to its css styles.

Always backup the CSS file on your computer before changing it because a missing ‘;’ or ‘}’ may make your page completely messed up.




Leave a Reply

Your email address will not be published. Required fields are marked *