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.

WordPress Tutorial – Where is the “Insert Image Into Post” Button – and How to Insert a Photo Gallery

This WordPress tutorial show two things:

  1. Where the “Insert Into Post” button is so that you can insert an image into a WordPress post or page.
  2. How to insert a gallery of images into a WordPress post or page.

New Features in WordPress 2.8

Over at the McBuzz Communications website, I have posted a nice video overview of the new features in WordPress 2.8, and a short description of one of the coolest new features: the ability to insert more than one instance of the same widget into one – or more – of your sidebars. This gives you a powerful new way to customize the link menus in your sidebars. If you have a theme that allows you to have different sidebars on different pages, you can now have custom links on every page – without having to hack the PHP code for the theme!

Add a Photo Slideshow to WordPress with Slide.com

It is truly amazing how many resources and tools are available online these days – absolutely free. Here’s one more example. You can create a slideshow on Slide.com and easily embed it into a WordPress page or post. I made the slideshow below by importing images from my Flickr account directly into Slide.com. You can do the same, or upload images from your computer, or get them from any number of other sources.

Choose from prefab themes and custom colors, add captions and a title, give Slide your email address, choose a username/account URL (mine is mcbuzz.slide.com) and password, click Save. Then click on the WordPress option to embed the slideshow. Copy the code for WordPress. Paste that into the HTML editing window of your WordPress editor. Preview or Publish, and BOOM, you’re done.

WordPress Tutorial – Make a Static Page Your Home Page – Part 2

This Beginner-level WordPress tutorial by Mark McLaren of McBuzz Communications follows-up to “WordPress Tutorial – How to Make a Static Page Your Home Page (Front Page)”. Part 1 of this tutorial shows how to tell WordPress to use a specific page as your home page. Part 2 shows how to hide the link to that page that would otherwise be part of the main navigation.

Note that a Part 3 is also on the way. Part 3 will show how to hide the link to the page by making the page a subpage AND by hiding links to subpages with the help of a custom sidebar using WordPress Widgets.

Some WordPress themes have a default “Home” button in the main navigation. Not all WordPress themes do, but some of the WordPress themes offered on wordpress.com do. If your theme has a default “Home” button, you may need this technique.

This tutorial also talks about navigation some themes have in the sidebar with links to subpages and “subsub” pages, meaning “child” pages that have other pages as “parents”. See the Business Blogging 101 (mcbuzzvideo on YouTube) tutorial about “child” or sub-pages to learn more about that.

WordPress Tutorial – Make a Link to a Specific Place in a WordPress Page or Post

This Intermediate-level WordPress Tutorial by Mark McLaren of McBuzz Communications shows how to make a link that takes you to a specific location in a WordPress Page or Post. It is an Intermediate-level tutorial because you will use the WordPress Dashboard Code editing window to insert HTML to make the link work. Put one or more of these links at the top of a page. When you click on them, they take you further down the same page. This is good for a list of Frequently Asked Questions, for example. Or put a link on a different page. When you click on it, it takes you to the spot you want on the target page.

WordPress Tutorial – How to Position an Image and Wrap Text Around an Image Using WordPress

WordPress Tutorial - Tree Image

Note: Wrapping text around an image is much easier in WordPress 2.5 or later. See the post How to Upload and Insert an Image Using WordPress 2.5+.

This tutorial by Mark McLaren of McBuzz Communications is for WordPress 2.3 or earlier. The technique will actually work in any HTML page, whether you’re using WordPress or not. It shows how to use some basic HTML code to  position an image by aligning it to the left (the default) or to the right. It will also show you how to make text wrap around (or “flow” around) the image so that the image does not sit on its own between two paragraphs of text.

In order to show this, I’m going to create a little more text for my example. This week I discovered that it’s not a great idea to use the generic “greeking” text known as “lorem ipsum” because when my tutorial pages are indexed by Google, the description that appears with the listing in search results doesn’t say anything intelligible! It just looks like nonsense.

From now on, I will endeavor to create meaningful text in my tutorials so that when it is indexed by Google or one of the other search engines, people will be able to see what the tutorial is about!

Here is the code you need to wrap text around an image like you see above. Open the Code editing window (click on the “Code” tab next to the “Visual” tab in the Dashboard editing window underneath the Post/Page Title). Find the “img” tag for the image you want to run text around. Insert the code below as shown. Don’t forget to click on Save or Publish.

<img style="border: 0pt none; float:left; padding-right:10px; padding-bottom:10px" src="images/trees.jpg" .../>


WordPress Tutorial - Tree ImageThe continuation of this tutorial will show how to position an image by aligning it to the right, wrapping text around the left side of the image so that the image does not sit on its own.

Although I’m eschewing the use of “greeking” text for the sake of being indexed by Google, I’m also going to have to be careful not to use the same text from the first example above in this second example — because that would definitely look like spam to Google, i.e., putting the same words on a page or series of pages just to boost my keyword count.

Here is the code you need to wrap text around an image like you see in the second example above. Open the Code editing window (click on the “Code” tab next to the “Visual” tab in the Dashboard editing window underneath the Post/Page Title). Find the “img” tag for the image you want to run text around. Insert the code below as shown. Don’t forget to click on Save or Publish.

<img style="border: 0pt none; float:right; padding-left:10px; padding-bottom:10px" src="images/trees.jpg" .../>

There is a quicker way to do some of this by clicking on the image and then clicking on the “Insert/edit image” button in the Visual editing window. But the options there (Alignment, Border, Vertical space and Horizontal space) do not give you as much control as you may want for some layouts. I talk about this in the video tutorial.

You can see in the comments below that a reader has had problems getting this code to stick. Here’s what my Code editing window looks like when I insert the code:

WordPress Code Insertion Problem

%d bloggers like this: