Type to search

How to Change the Design of Your WordPress Blog


How to Change the Design of Your WordPress Blog


You recognize that you have to write top-notch content material for your WordPress blog to achieve success. Plus, you have found all the search engine marketing pointers to get you on the first page of Google. But, you need extra! You need to trade the design of your WordPress blog.

Dba Press

To blog with WordPress like a seasoned weblog wishes to look clean, easy, readable, presentable, and stylish.

One option you will have might be to purchase a professional theme from one of the massive subject sites. For example, I might suggest Genesis from StudioPress, Elegant Themes, Thesis, or WooThemes.

However, if you don’t want to head that route, or maybe if you do, here are a few away to’s for tweaking your weblog’s layout.

Locate your topic documents

The documents on your WordPress package that determine the appearance of your website are known as the topic documents. They are saved in your WordPress documents beneath wp-content material/topics/[theme_folder], where [theme_folder] is the name of your subject matter. If you’re no longer certain what your subject is known as, head over to Appearance > Themes on your WordPress management place and notice which theme is activated.



Inside your theme folder, there’ll typically be simply one record that determines the internet site’s appearance. This is a document usually referred to as fashion.Css. You can observe it and edit it if you move Appearance > Editor inside the lower backstop.

If this document makes no sense to you at all, don’t worry! Read on, and all turn into clear.

Use Firebug and Developer Tools There is high-quality equipment to be had to help you re-layout your blog.

If you’re using Chrome, you could view Developer Tools (you could also use Developer Tools in Internet Explorer, but I seriously propose which you do not use that browser). In Chrome go View > Developer > Developer Tools (Cmd/Ctrl-Opt-I). And if you’re the use of Firefox, you may use the Firebug extension.

Both these gear will open a panel on your browser with a purpose to show you all of the styles relating to any element for your website online. You could make a trade on this panel and spot it take the impact to your browser before you decide at the trade and edit the style.Css. This is an excellent manner to learn CSS.

Click at the cursor (it can be an arrow or a magnifying glass), click on the element that concerns you, after which the styles and fashion sheet this is affecting it’ll display up inside the Developer Tools or Firebug panel. So, if you click on a subheading, you can see if it’s miles controlled through the h2 element for your essential CSS report.

For example, you may see that the subheads inside the weblog put up have a font length of 25px, a line height of 30 pixels with a 10-pixel margin above, and a 20-pixel margin below. And on the right-hand facet, you can see wherein this is stipulated: on the such and such line of a document known as fashion.Css (nine instances out of 10, that is what the CSS file is known as).

For example, every other CSS declarations for the headings may be “clean: each;.” This method will always start on a brand new line and clear any floated pix that may be to the left or proper of it.

Finally, there are a few extra popular styles that perhaps affecting the heading. For example, “shade: #333;” method, the text color must be a darkish gray. “font-weight: ordinary;” approach, the heading should not be ambitious. There ought to be no padding across the heading can be denoted by “padding: zero;” and no text ornament (underlining) “text-ornament: none;.”

Now, the crossed-out patterns are patterns that might be outdated using different styles. These are standard patterns that might be adhered to if some other fashion hadn’t been specific. Fashion takes priority due to the fact it’s miles extra precise to what we’re searching for. The fashion of the h2 on length declaration might be customary as the real size of the heading instead of the body fashion that’s too popular because it applies to the whole body of the internet site.

By the way, that is why it is called Cascading Style Sheets, due to the fact the fashion declarations cascade down from trendy to extra particular declarations.

Design rules for your WordPress blog

Now that you know how to edit the CSS of your WordPress blog, here are a few basic fashion guidelines that will help you on your way. But first, here’s an essential tip for editing your subject files.

Always preserve a duplicate of the entirety! Just earlier than you begin modifying your fashion.Css or any record to your theme folder, please, please, please return it up. Locate the subject folder using an FTP purchase-including Filezilla, locate the topic folder at wp-content/subject matters/[theme_folder] in which [theme_folder] is the call of your theme, and duplicate the document for your laptop.

So, as soon as back up, tweak your patterns to your heart’s content! Here are some essential design recommendations to maintain in mind:

Always make sure your textual content is readable! Not simplest have to you take note of font length and the color of the font as opposed to the coloration of the historical past. If you’re young with ideal vision, don’t forget any longer anybody is as able as you to study the small text! This text is 15 pixels in size. I attempt no longer to place frame textual content smaller than 14 pixels.

The line peak (or line spacing) needs to be 25% greater than the font length or more. So if the font size is 15 pixels, your line-height needs to be 19 pixels or more. If the font size is 1 mm, your line-height needs to be 1.25 mm or extra. Line heights are significant for headings as many theme designers never look at peer what headings appear like if they move over one line.

Paragraphs must have an area among them, and this need to no longer be created with a double go back. The area after each paragraph should be around half the road height. So, if your line top is 20 pixels, there need to be around 10 pixels between paragraphs. This is commonly done with either padding or margin at the <p> tag.Blog

In the WordPress HTML editor, two returns equal one within the Visual editor! Look on the tab on the pinnacle proper of the WordPress textual content editor wherein you write your posts; it’ll either say HTML or Visual. To create a brand new paragraph within the HTML editor, hit go back twice; to create a new paragraph in the Visual editor, hit return simply as soon as. To create a line spoil (new line and not using a gap) in the HTML editor, hit return as soon as; to create line damage within the Visual editor, go shift-go back.
Remember, make your website clean to read, and your traffic will reward you!

Jacklyn J. Dyer

Friend of animals everywhere. Problem solver. Falls down a lot. Hardcore social media advocate. Managed a small team training dolls with no outside help. Spent high school summers creating marketing channels for Elvis Presley in Minneapolis, MN. Prior to my current job I was donating wooden trains in Hanford, CA. Spent the 80's getting my feet wet with accordians in Jacksonville, FL. Spent the 80's writing about crayon art in Africa. Managed a small team getting to know inflatable dolls in Gainesville, FL.