Many times my clients discuss about customization and looking at a wordpress theme demo, it is difficult for them to figure out what aspects of the theme can be easily customized. This post will be a short tutorial on How to Customize a WordPress Website and website design in general.

Most Design Elements are Defined and Styled with CSS

Cascading Style Sheets or (CSS) is used to define how a website looks like. Back in the day when cross browser compatibility was not an issue and multiple devices were a think of furture, it was not a huge deal how to define the style elements of a website. Designers and developers extensively used the “Style” attribute of HTML elements to define the style. The Style attribute still applies and can be used to style html elements. It is not recommended to use the Style Attribute to style html elements and there are a number of reasons why. To name a few cross browser compatibility , responsive design, ease of debugging, design patterns are a few aspects.

This blog post is for CSS newbies or people who are not very advanced with CSS. The Intent is to provide an explanation on how CSS works and contributes to style of a website, the benefits and providing a way to customize style according to taste.

Most Modern WordPress themes are designed with fluid html elements using the “<div>” tag. It will be wrong to say that only WordPress themes are designed extensively with “<div>”. Actually most modern websites are developed with “<div>”. “<div>” elements can be nested and a desired layout can be achieved by defining CSS Rules that apply to various “<div>” elements.

I will give a short example on how a typical “<div>” element looks like and how a CSS class can be defined to style it:

<div id=”outerdiv” class=”outer”>

This is the outer div. We can put an image here as well and style it

<div id=”innerdiv” class = “inner”>

This is the inner div. We can put whatever html elements here and style them

</div>

</div>

There are different ways that each developer defines their CSS Styles and CSS classes. For example, you can define a style for the html element by its ID. Lets say I want to make the background color yellow for the outer div, I will define the following CSS:

#outerdiv{

background-color:yellow;

}

The # character indicates that we are defining the stle by element ID. Alternatively we can also define the CSS as:

.outer{

background-color:yellow;

}

Defining a style for ID is most common for very specific HTML elements. It will allow to a single element and nested elements can inherit the styles. Classes are mostly used to provide a reusable design scheme for similar elements. I did a short video that describes some hacks and techniques on how to identify various divs and their CSS and define custom CSS for your wordpress website. The How to Customize WordPress Website is embedded on this page:

How to know specific Styles defined on a particular Website ?

A Browser basically renders html returned as a result of an http request. It sees all the static or dynamically generated content and renders the page for the user. Most browsers today provide developer tools that can be used to view particular style information for various html elements defined in a page. As described in the video, this started with “Firebug” which was an “add-on” to Mozilla Firebug. The tool became very popular among developers and it was very easy to figure out exact html, css and different client side gimmicks that websites use.

When Google Chrome came out, a “Developer Tools” mode was built right into it. Thanks Google for making it developer friendly ! We appreciate it. I am a big fan of Google Developer tools and the ease of use it offers to view and test styles , css and create javascript (jquery) on the go.

How to Customize WordPress Website 1

You can go to any website that you like, hover over the element you like (or select it), right click on it and select “Inspect Element” in Google Chrome and you will see the “Developer Tools Window” that pops up. As displayed in the screenshot below, you see the html of the page on the left side and the Styles tab will display the element style and CSS of the Website. You can hover over elements to highlight them in the browser and define specific styles for debugging in the styles window.

How to Customize WordPress Website 2

 

Another great thing that makes our job of how to How to Customize a WordPress Website super easy is the built in intellisense of the Google Chrome Developer Tools. This makes your life easy as you dont have to memorize all the css classes supported by CSS. You can type in a few characters and it displays all the suggestions for CSS Classes and style elements. This is displayed in the screenshot below:

How to Customize WordPress Website 3

Finally, when you like what you see on the screen its time to update the content and put the CSS in your custom CSS modules or Child Theme. Simply grab the whole CSS Class which means “Copy that” and paste it inside of your Custom CSS module or Chile Theme’s “Styles.css” and you are done.

How to Customize WordPress Website 4

Do I need a Child Theme if I dont have it already ?

If the only thing you are modifying is “CSS” or styles, really the short answer is NO. Many WordPress themes and Theme development frameworks support “Custom CSS” built in to the theme and you dont have to do anything special. However if your theme does not support it, you can install “Custom CSS” WordPress Plugins. I talk about one in the Video Embedded on this page !

And this is How to Customize a WordPress Website !!

At IDesignsmart, we conform to Standards, deliver high quality work on time at the most affordable rates. We provide awesome WordPress Services, WordPress Web site consultation, Responsive Design and Custom Plugins. Learn more about our WordPress Services here. If you are looking for WordPress Training with Screenshare, Competitive quote on WordPress Professional Services or WordPress Developer in Atlanta, contact me Today !.