WordPress 3.0 and basic styling

I’ve just upgraded to WordPress 3.0 from WordPress 2.6 and it was a very painless experience. That being said my blog definitely doesn’t have many posts and I didn’t make many changes to my default theme. I must admit that I manage a few websites with WordPress, they are very easy to manage considering that they are self sufficient and don’t require a lot of maintenance. I’ve had very few problems with my WordPress websites and I am considering switching some of my older websites over to WordPress. Disabling the blog feature in wordpress is very easy, all you have to do is go to Settings and select the static page option and select the created page you would like the home page to be. You do need to create a page before you can use this feature.

One of my pet peeves has always been the use of a visual HTML editor since I’ve always felt that HTML should only be created by hand. WordPress has a built in editor called TinyMCE. After I made the conversion to WordPress 3.0 I noticed that since the columns have been widened when I switched over to the new default theme some of my pages were not styled correctly. I had created them using the visual html editor since it didn’t take a lot of time to do. However the visual editor, when you save your work with it, will erase several tags such as br and p tags. It also removes some HTML formatting, this only happens when you switch from the visual editor to the HTML editor. After struggling with switching between editors and losing my formatting I decided to switch the Visual Editor off in WordPress. After I switched it off it made creating pages and properly styling them much easier.

Once you realize how WordPress does its styling around elements in the HTML editor, styling then becomes much much easier. Some of my tips for creating properly styled pages using the HTML editor are as follows:

1. Use the br element for separating elements on pages. Make sure there is an empty line above and below the br element.

2. WordPress will place HTML that is separated by empty lines between p elements. Global styles can be applied to this element.

3. Text that is separated by a new line will appear in a new line. WordPress inserts a br element if it sees a new line character.

These 3 easy tips should help anyone to do simple formatting on pages. More complex formatting will of course require more complex HTML and CSS. W3C Schools is a great place full of easy tutorials on creating web pages using HTML. Please think twice before using a visual editor, yes it may be faster but your pages will be harder to maintain in the long run and you won’t always get the styling that you need.

This entry was posted in Software Development, Wordpress. Bookmark the permalink.

Leave a Reply