Wordpress Customization For Designers and Non-Developers

April 18, 2013 By evan,

Have you ever wanted your own customized personal or portfolio website but were either not ready to pay someone to develop the site, or just too intimidated by the daunting task of learning code? This guide will give you the knowledge to be able to set up a Wordpress theme and successfully customize the theme to fit your own unique style. Once you are finished you will have an efficient, professional looking, and fully functioning website that is easy to update on the fly. Advantages to starting with a pre-built Wordpress theme: Wordpress themes are usually professionally built and are only about $40 at themeforest.net or even for free across the web. Most of these themes already look great and have advanced functionality built in. Most themes are already responsive right out of the box, meaning they will adapt to different size monitors and devices. You will basically be skinning one of these existing themes to fit your own style. Read my old article to understand how to get started with Wordpress and install a new theme on your hosting. Once your theme is set up: Every theme will present you with a different way to display or manage your content, as a result I will try and be fairly general so that this will apply to everyone. CSS Editor: To update the theme you will need to open the CSS editor. All of the major “styles” should be in the Style.css, sometimes called Stylesheet.css. To find this look at the side menu bar and hover over “Appearance” and click “Editor.” The main style sheet CSS file should be open by default. What Is CSS? CSS is a way to add color, space, size, borders and any type of styling to an html page. HTML = STRUCTURE CSS = LOOK/FEEL Once you have opened the Style.css file, it is now time to start editing. It is a good idea to copy and paste the CSS markup into a document on your computer that you can refer to if you ever mess up or need to start over. The CSS file will look intimidating at first but think of it like trying to read Spanish without knowing it. When scanning written Spanish, there are plenty of words that you can recognize in English to get an idea of what is being said. The same applies to CSS. Thankfully, CSS is written to be very indicative of what is being styled. For instance, the attribute “border-color” is the color of any border, and “font-size” is the font size. Imagine that. Much of the CSS is actually very self-explanatory and can be edited with almost no CSS knowledge just by using a little common sense. Example:

As shown above, you can change the font from 14px to 12px just by changing “14” to “12” and saving. Change the font and color while at it. Once saved, you can then refresh your “Live” website and the changes will take effect just like that. Pinpointing Specific Areas (Chrome Browser or FireFly Plugin required) The trouble comes in when you need to find the exact text or area that you want to edit. To find particular areas to edit you might want to open your website in a browser and right click on the element you want to change and then click “inspect Element.”

Clicking “Inspect Element” will the open a dialog that will tell you exactly where that portion of the page is located

As you can see, the portion selected will be highlighted. You will then be given the HTML to the left and the CSS code to the right.

Once you have found the desired element’s CSS properties, you should select what you want to edit. (ie. #h1 text size) Next, go back to your Wordpress editor and hit command + F to bring up the search dialog. Now you should paste the CSS property you want to edit. In the case above, you might want to select “h1” and paste it in the “Find” dialog if you wanted to edit the “font-size” of the web site. Note: This process can be done by skimming the CSS file manually, as long as the page is relatively simple. The more complex the page the harder individual properties will be to find on your own and this searching method will be helpful. Simple properties to edit:

There are also terms in CSS that are not as straight forward. Let’s go over a couple of the important ones: line-height: 20px; This is called “leading” in the design world and is the space vertically between lines. margin: 0 auto; The spacing around and element. “Auto” refers to the alignment which you shouldn’t need to mess with at first. Some developers may use padding to apply different amounts of padding to each side. See below: { padding: 12px 20px 38px 70px; } If you see something like this, it means there is a certain amount of padding applied to each side of the object differently. Just remember, the padding pixel amounts are applied clockwise. In this case, 12px is for the top, 20px is for the right side, 38px for the bottom and 70px for the left side. Changing something as simple as the font and a color or two can turn a theme into a beautiful, fully-customized theme that fits you. The best part is most people will have no idea it was a theme to begin with. Take a couple hours to learn this invaluable skill and you are on your way to impress.