wordpress editor formatting issues
WordPress formatting issues and problems
on posts and pages can often be a challenge – because. . .
These WordPress formatting issues drove me so crazy that I ended up
buying expensive software just so I could make posts and pages without
a lot of hassle.
I tried the major plugins that were suppose to fix these
Wordpress formatting problems that keep occurring editing
content on a post or a page. Even they were unreliable.
Along came several upgrades on WordPress themes, and with
them came fixes to the WordPress text editor. GREAT!
But where did my formatting go?
What happened to my formatting when I needed to add
and make a few tweaks using the text (html) editor?
The problems always occur when you make a change in the Text Editor,
and then switch to the Visual editor to see the changes.
You see changes okay, but what you don’t see
are the changes that YOU made, just the
changes that the WordPress editor made.
Well, here is what often happens (at least to me).
Maybe I want to change the size of several words in a sentence to make them larger.
I do not want (or need) to make the entire post “H” tags. The way that WordPress
is presently set up, you can’t just change the font size or style
unless you use the text editing that WordPress provides, or a plugin.
In a nutshell, when you switch between editors, depending upon what
you change, you can lose a lot of your formatting.
Here is what WordPress has to say on the subject:
Switching between the Visual and Text editing modes is easy.
Just use the tabs directly above the right side of the editing area.
A Word Of Caution
Switching between Visual and Text view can cause some of your HTML entities to be lost.
This is due, in part, to the manner in which TinyMCE handles your HTML.
If formatting is very important, do not switch between views.
If you’re writing a lot of code, we suggest you remain in the text editor.”
Hopefully, you will never need to use any code.
Okay, if that’s how it is, that’s how it is, but how do you check
all of your work, and formatting changes
without using the visual editor?
It is very convenient to just click on the “Visual” tab to check
on your changes, but that causes WordPress formatting issues when you
go back to the html (text) editor. So what do you do?
Well, here’s what you have to do. Drop everything, and go to the
“Preview” button in the right column. Click it and wait for the
page to load. If you page is optimized then it shouldn’t take long.
Then click over to the page and look at your changes.
Now you have to start over for any more changes that you need to make.
Leave your “Preview” post page open in a new tab.
After more changes, simply refresh the page
or hit the Preview button again to see your changes.
Usually, you need to make a lot of changes, especially if you have
a decently long post or page. So much for ease of use.
The Plugin Problem
So why not a plugin? They seem to work for a lot of people.
One of the difficulties that I have had with some of the
text editing plugins is that they often interfere with other
plugins, or operations of the website.
This is when I gave up and bought this expensive software so
I did not have to deal with all of the problems that kept occurring.
I could also start letting the hair on my head grow back!
This turned out to be fine for building pages, but for
posts, the look turned out to be slightly different.
I realized that I now had to go back and figure this thing out.
I am not plugging software, or telling you to go an buy anything.
What I am going to tell you is how to deal with these WordPress issues
that seem to continue to creep up and bite when you don’t expect it.
There is no reason to have to buy more software. WordPress gives you
what you need. You just have to know how to work with it effectively.
First, let me tell you that it appears that some things seem
to change depending on what theme you are using.
I thought that I had the editor thing all figured out, until I went
to my other websites that used different themes. The WordPress editor
produced different results when I used the other themes.
This maybe due to certain defaults in the theme itself, but I
don’t know for certain. I do know that I had to revise my thinking
when writing and editing content using these different themes.
Your Easy Formatting Workaround
Here is what I do now. It saves a lot of time, grief, and effort.
Not only that, it is a really simple fix. This is what I do.
Your Format Fix
The fix is as simple as doing a lot offline.
You take a text edit program that most computers have already
installed, and you create a basic formatted template of sorts
and start filling in the blanks, and making changes as you need them.
For instance . . .
Here is how I began this post. I set up the font, size, and color,
by using a basic html code, and added or deleted as I went.
Here is the code:
<span style=”font-family:arial; font-size: 16px; color: black;”></span>
You need to have the brackets(<) and (>) at the start and finish.
Use browser friendly fonts, but just substitute the name of the font, size, and/or
color if you need to change them.
You put your text in between the <span style=”the code you use:e.g.font;”> and the </span>
Then you copy and paste that basic code 10 to 15 times (you will need more)
and change the font, size, or whatever to suit your content.
Then just write. When you need another paragraph,
use then next code set (you should have at least 10).
you can always copy and past more.
Don’t forget to occasionally check to see how things look.
If you are online you can copy and paste the entire file (all of the copy w/code) into your
Wordpress editor to make certain things are formatted correctly.
If you are not online, no problem.
All you need to do is copy the file and save it as a .html file (file.html).
Then open it up in your browser window. It will give you an idea of how things will look.
Clicking on it as you would open any file should bring it up in your browser window.
There are a few differences that you should know about.
1.The <span> does not “Span”, or create a space as it does in the WordPress editor.
What this means is that you will need to use an extra <br> or “Break” code.
2.This then poses more WordPress editing issues and problems
as the WordPress editor does not recognize the “Break” <br> code symbol, but your browser will.
Which means that if you don’t delete the “Break”codes before you format in WordPress,
you will have double spacing between lines.
And what if you are online?.
This makes it easier. Even though your browser shows a good representation of the formatting,
it will not show exactly what you will get with your WordPress editor.
Here are several WordPress formatting issues that can cause you problems.
The DO’s and Don’ts.
DO #1: Only use your browser to check the general look of your post or page
if you want to check your work offline.
Different browsers will generate different looks, but should give you a good idea of your general formatting.
If you want to check your work with your browser,
then remember that the <br> will give you an extra line.
Always remove those tags before you copy and paste them into your post.
when you use the WordPress editor to create a new line, you simply hit “Return”, or use the <span> </span> coding.
The span tags will automatically create a new line./span>
DO #2: Use the WordPress Visual Editor if you don’t need the paragraphing code (i.e. <p>),
are okay the the default font, don’t need to change the font sizes, or
won’t be making any straightforward changes in the post.
DO #3:This is something that I highly recommend,
and that is keeping a file of your posts and pages.
When you have your copy formatted, and your content looks
the way you want it to, then copy and paste it into the respective file.
DO #4: if you do need to go to the WordPress Visual Editor for formatting,
then copy and paste your code into a text document so that
you can re-install the code if you lose formatting.
HOLY WOW! Can this get more simple – MAYBE?
This method is really easy, if you have a compatible word processor.
You can do your entire page or post in a word processor and simply
copy and paste it into the WordPress VISUAL Editor. Supposedly there
will be no WordPress formatting problems and issues.
I will believe it when I see it.
Nothing I have is compatible. BUMMER!