WordPress HTML Editing Window – Can I Have More Control Over My Pages and Posts?

A reader offered the following comment/question today about the WordPress HTML Editing Window.

I’m frustrated with the WP editor. I’m used to Dreamweaver and having lots of html coding available to me, along with design view. I find that the html view of WP jumps around, doesn’t take me to where I was in the design view, is limiting on features, increases or decreases spacing between lines on me once posted, and is generally frustrating. It won’t even underline properly.

Do you have any suggestions about an outside editor for WP??

Here’s my answer:

Thanks for your question. It’s something that I’m hearing more often these days. In general, it’s the idea that people want more control over their pages and posts.

Bloggers in the traditional sense are not the ones calling for this. It’s usually businesses, independent consultants and professionals that are using WordPress for full-blown websites.

What most people seem to want is a WYSIWYG editor that will allow them to do more with layout and styling using the Visual editing window. For that, there are several solutions. The most popular is TinyMCE Advanced WordPress Plugin.

But what you are asking for is more control over the HTML. This is tricky.

On the one hand, you have just about as much control as your HTML and CSS skills allow, but practically speaking it’s a pain. You can paste all kinds of code into the HTML window. For this, I usually use an external HTML editor. Dreamweaver works fine. There’s a free editor on the Business Blogging 101 Resources page. You can’t preview your work in Dreamweaver, however, unless you go through some other technical setup. Not worth it, imo. You can paste the HTML into the WP editor and save the changes, then view the page. The more complicated your HTML, the more tedious it gets!

The other thing you have to contend with is that your WordPress theme may conflict with the CSS you use in your hand-coded HTML. My guess is that the problem you cite with underlining is due to such a conflict. If the conflicts are very disruptive or they don’t allow you to do what you want at all, you may need to edit your style.css or other CSS files.

If you want to simplify the editing process and see how things work when you edit your page using HTML without having to constantly paste your changes into WordPress to preview them, you might try this:

In a web browser, View the Source Code for the page or post you are working on. Select All. Copy and Paste the code into the Code/HTML window of Dreamweaver. Now save that page somewhere, and you should be able to open it in a browser – or maybe view it in Dreamweaver’s visual window – that is, you should be able to view it from your desktop, so that you don’t have to keep saving changes into the WordPress editor to see how they look.

You’ll need to identify the section of the HTML page that is the chuck of code you will paste into the WordPress HTML editing window when you get things looking the way you want. (Try demarcating it with <!– HTML comments –>.) This doesn’t always work, but if you want more control over your pages, this is the easiest way to do it.

More About Changing Fonts and Font Size Using WordPress

This WordPress tutorial video (below) shows you how to change a font in a heading or a paragraph. This is something you can do for a specific heading or paragraph.

If you want to make a “global” change to the fonts used by your WordPress theme, you have to edit the style.css file that is part of your WordPress theme files.

One example of a global font change would be to change the font that is used for the title of each page and post. The Business Blogging 101 site has titles that use the Arial font and are a size of 16 pixels in height, with a medium blue color, and a light blue underline. By changing the style.css file, I could make the font a different family, like Times, and I could increase the size to 20 pixels; I could make the font color red; and I could remove the underline. That change would apply to every page and post on the site.

See the previous tutorial, Changing Fonts and Font Size Using WordPress for an overview of how to make a change to the style.css file. If you haven’t edited the files in your WordPress theme before, it can be a little challenging, so send me a comment if you have questions.

When you change a font – either globally or in a specific case – it’s a good idea to specify a group of fonts instead of just one. That way, if the first font is not installed on the computer of someone visiting your site, their browser will use the second one. If the second one is not installed, it will use the third, and so on.

Here are some suggested options for the font-family property. This will make sense when you watch the video below.

font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;

Here are code samples that go with this video tutorial.

<p style="font-family:'Times New Roman',Times,
serif;">This is a paragraph</p>

This is a paragraph

<h1 style="font-family:'Times New Roman',Times,
serif;">This is a heading</h1>

This is a heading

(You can find a discussion of “Web Safe Fonts” on Safalra.com.)

Changing Fonts and Font Size Using WordPress

This is a reply to a reader who asked about how to change fonts and font size in WordPress in the comments to the “How to Position an Image and Wrap Text Around an Image Using WordPress” tutorial. The reader asked if there is a way to create a special font format to use for captions under photos.

The “quick and dirty” way to change the font is to use the same “inline” Cascading Style Sheets (CSS) technique used in my tutorial for image position and padding.

See the video tutorial at the end of this post, and the video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it. They walk you through the steps discussed here.

I am borrowing from the examples at w3schools.com such as these CSS Examples. In particular, look at the explanation and examples of the CSS font family property, and look at this font formatting example which includes a handy tool you can use to experiment by making changes to the CSS code and seeing the results instantly.

Here is the inline technique to change a font from the default that a blog or website uses to the “serif” font “Times”. Fonts like Times or Times New Roman are serif fonts. Examples of “sans serif” fonts are Helvetica, Arial and Verdana.

Here are some options you can try for the font-family property (thanks to Safalra.com):

font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;

Insert the CSS information using the Code editing window (now called the “HTML” editing window in WordPress 2.5) just as you did in the “How to Position an Image…” tutorial. You have to add the p style=”…” and /p along with the left and right brackets on either side of the text as shown.

That’s the quick and dirty way. Again, check out the video below, and the next video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it.

What I say next really deserves a separate video tutorial (that hasn’t been made yet). If you would like me to make one, just send me a comment.

If you want to use something like a caption throughout your site, making an addition to the style.css file that is part of your WordPress theme is the way to go. (Note that on WordPress.com you have to pay an additional fee each month to be able to make changes to your theme files. If you don’t pay that fee, you can’t use the following technique.)

Again, check out the very cool examples at s3schools.com noted above.

To make a reusable format for something like a caption, what you would need to do is add the style information that appears between the style and /style tags in the font formatting example into your style.css file. That is, you put

p.sansserif {font-family: sans-serif}
p.caption {font-family: Helvetica, sans-serif; font-size: 10px; font-weight: bold; width: 300px;}

into your style.css file.

If you have third-party hosting for your WordPress site, you’ll need to use FTP software to download and upload the style.css file from you web hosting server. Your web hosting provider should be able to give you more infomation about FTP software. After adding the new code to your style.css file, save the file and upload it to your web hosting server using FTP. (If your blog is hosted on WordPress.com, you don’t have to worry about FTP. Just save the modified style.css using the WordPress dashboard.)

Then you need to add class=”sansserif” — or class=”caption” — to the p tag using the HTML Code editing window, just as you did to add padding to an image. Except in this case, you are assigning a class instead of a style to the paragraph.

I’m sorry if this is thoroughly confusing, but note that you have already used CSS to position and pad an image. The quick and dirty font change uses the same CSS style technique.

The second, more difficult font technique just goes one step further by placing the CSS code in the style.css file that is part of your WordPress theme as well as putting the p class=”…” into the HTML using the Code editing window.

Let me know if you have questions. I have a feeling you will!

Click on the video screen once to watch the tutorial here on the Business Blogging 101 page. Click again to view a slightly larger screen on the YouTube website.

The following are examples from the video tutorial.

This is a paragraph

Grapes in vineyard - free from iStockphoto.com

This is a caption

%d bloggers like this: