When you are a returning visitor to wilwebs.com, you will know by now that I enjoy working with WordPress theme frameworks.
Such a framework allows you to create a website from scratch without the need to code.
In this post, I want to have a closer look at the words “without the need to code”.
Is it really true? Is it possible to create a website with a WordPress Theme Framework without any programming knowledge? The short answer is: Yes, however…
Building a website requires:
- structure – in case of WordPress websites this structure is created with PHP
- styling – you use CSS to decorate the structure, and to shape the design
WordPress theme frameworks are great because they take care of the website structure for you, so that you do not have to worry about PHP knowledge.
And in the event that you do need some custom PHP, someone before you probably has found himself in a comparable situation and came up with a solution already. This solution and the necessary code will most likely be available; pre-cooked, ready to be injected into your functions.php file.
So again, you do need for you to worry about PHP programming skills when you are considering creating website with a WordPress theme framework.
When it comes to CSS, however, a basic understanding of cascading style sheets will make your life a lot easier and creating websites even enjoyable. No matter what framework you prefer – although some frameworks are more demanding than others in this respect.
So you need some basic CSS skills. But how much knowledge of CSS is really required?
Well, you will need to know what a CSS property is addressing. Otherwise, you will not be able to set the proper value for that property. If you do not know the difference between a padding and a margin, you might end up frustrated.
Although, I have been working with several WordPress theme frameworks, I yet have to encounter a framework where I do not have to add some CSS manually. Not that this is strictly necessary to complete the website, but because I like to do stuff my way. And because it is almost impossible for a framework to cover absolutely everything.
In addition, CSS is still evolving. CSS3 for example offers many new possibilities. As of today, these have not been incorporated (fully) in the frameworks. Of course, CSS3 is not an official W3C standard yet, but this time the browser vendors are the thriving force behind CSS3.
This does not mean that you have to become a web designer or a CSS ninja. But there is a lot of gray between being a well-trained front-end designer and having zero knowledge of CSS. Furthermore, I am sincerely convinced that investing a little time in getting familiar with CSS will pay off – quickly.
Nipping from the CSS Bowl
It is not my intention to launch a CSS course here, since there are enough excellent resources available on the net already. However, I do want to lift a corner of the veil.
Cascading Style Sheets like the style.css of your theme are just a stack of CSS rules.
Let us have a look at an example of such a CSS rule:
The rule above defines that hyperlinks are presented blue (with the hex code #0000ff) and underlined.
This CSS rule contains two declarations, each composed from a property (color and text-decoration) and a value (#0000ff, respectively underline).
The a selector refers to the HTML anchor tag which encloses hyperlinks. HTML tags are very common CSS selectors, just like the id (preceded by a #), and classes (preceded by a dot).
Basically, an id and a class has the same purpose; labeling selectors so that you can distinguish these in order to style them differently. However, an id needs to be unique in a given webpage, and can therefore only occur once on a page. Contrary to an id, a class can have many occurrences within a page.
Just to illustrate this with an example; a webpage can only have more than one menu, but only one primary navigation. And each menu on its turn can have many menu items (hyperlinks).
The combination of an a tag and a class allows you to style the links in the navigation bar differently from the hyperlinks in a post. In such case you could use the selector a .menu for the menu link instead of just a as in the CSS rule above.
A combination of an id with one or more classes is another possibility. For example, you can style the common elements of the primary and the secondary navigation by applying menu classes.
Firebug – the CSS Companion
When you want to customize the styling of a specific design element, you first need to know which selector to address – otherwise you will not be able to restyle that element.
A great tool for this purpose is Firebug, which is available as an add-on for Firefox, as the Firebug Lite Extension for Google Chrome, and as a bookmarklet for all major browsers. Let us take a short test ride with Firebug.
Below every post on this blog you see a Genesis Box. When I created that widget area, I noticed that the bullet list was not aligned the way I wanted it to. In such a situation, there is Firebug to rescue.
To start Firebug in Firefox, you can either click the Firebug icon, hit the keyboard shortcut [F12] or right click the area you want to examine and select Inspect Element with Firebug.
In the image above, the upper part shows a fragment of the webpage. The window below the webpage is the Firebug window displaying the source code of that page fragment. When you point to a selector in the source, Firebug will mark its counterpart in the webpage.
As you can see, the class selector that I need to style the bullet list is the class genboxlist. So when I dived into the style.css file, I knew what to customize.
Another example of an id versus a class; in the image a little above the genboxlist, you see an id gensis-box. Hence, there can only be one genesis-box on a page, while there can more than one genboxlists.
It is really no rocket science, but it does make the difference between fighting or enjoying web design – no matter whether it concerns CSS sec or working with a WordPress theme framework.
What is the best way to learn CSS? Well, that depends from the amount of time and money you want to spend, and how seriously you are with web design.
Basically, you can take two approaches when learning CSS: ad hoc or structured.
The ad hoc way is a matter of learning by doing, trial and error, training on the job. When you stumble into some CSS that you do not understand, you can ask Google. But of course, this requires that you know what to query – you cannot resolve a problem, when you are not able to define it.
You could check online resources like:
The other day, I checked out the book Illustrated Guide to Front-End Development, a gentle introduction to front-end development and CSS.
This 53 page book is currently on sale at MightyDeals for only $10. When you do not have any knowledge of CSS, and prefer the ad hoc way, this little book might give you a head start.
When you prefer a more structured and in-depth approach to learning CSS, I can recommend the following books:
- CSS The Missing Manual – no HTML, but just the CSS stuff (Amazon.com, BookDepository UK)
- Head First HTML and CSS – dramatized and a little playful with decent (Amazon.com, BookDepository UK)
- Build Your Own Website The Right Way Using HTML & CSS – a tutorial that guides you in creating a website from ground up (Amazon.com, BookDepository UK)
The first two books work very well as a reference manual too.
One of my intentions with this blog to assist my fellow WordPress peers in choosing the theme framework that will suite their interest best.
It would be a shame when you have a negative experience with a WordPress theme framework because you are struggling with CSS.