8 Quick code tweaks for your WYSIWYG editors in WordPress

These tips are good for several WYSIWYG situations, not just WordPress and tons of themes that use editors that have a visual and a code view. This includes Weebly, WIX, and some of the other content management systems for your website. If there’s an editor, chances are there is a code view. These are the most common problems people contact me and ask me how to tweak. Their themes don’t always behave as expected, image captions cause alignment issues, and just some general items. I thought you might find these tips helpful. You’ll have to go into the TEXT or CODE view of your editor. To find the area you are wanting to “fix” you’ll have to use the FIND option in browser (Ctrl + f ) and search for the phrase.  A hint, when I know I need to TWEAK something, I actually type the word TWEAK in the visual editor in that area to quickly find it.

I set the image to align left or right, but no matter what I set and update, the theme undoes it, especially when there is a CAPTION.

  • This happens with some all-inclusive themes. There is so much going on that it undoes what you think you are doing. An option is to surround the <img> orwith a DIV tag.
    Example. This didn’t behave properly, it’s an image with a CAPTION under the image.We tried changing the alignment a few times and it wouldn’t hold on update. Theme bug, I’m guessing, but in the meantime, we wanted the image and caption to float to the right so text could wrap around it.
  • This is how we solved it by surrounding the image and caption with a DIV tag and some styling:
    <div style=”float:right;padding:2px;margin:5px;>[caption id=”attachment_976″ align=”aligncenter“><img class=”wp-image-976 size-medium” src=”https://www.gemstonerealtyga.com/wp-content/uploads/NYTimes-Page1-11-11-1918-237×300.jpg” alt=”Veterans Day” width=”237″ height=”300″ /> <em>Front page of the New York Times, 11-1-1918</em>><img src=”https://www.gemstonerealtyga.com/wp-content/uploads/NYTimes-Page1-11-11-1918-237×300.jpg” alt=”Veterans Day” height=”300″ /> <em>Front page of the New York Times, 11-1-1918</em>[/caption</div>float can be right or left. Padding is INTERIOR, margin is EXTERIOR Please not ethat when you START a tag, you have to close it out — that’s why the </div> is so important.

What’s the difference between PADDING and MARGIN when it comes to divs, tables, spans and img tags?

  • PADDING is INTERIOR, MARGIN is EXTERIOR. So if you have a <p> (paragraph), <img>, <span>, <div> and you want to add some air around the item, you add PADDING. Padding can be top, right, bottom and left – in that order: CSS would look like this: <span style=”padding:5px 10px 20px 5px;”> to have different air around the item – remember the order of those 4 numbers without commas is: TOP, RIGHT, BOTTOM, LEFT. If they are all equal, you can simple type: padding:5px (px means PIXELS); or top and bottom the same, sides the same: padding:5px 10px;  See how after a style designation we add a semicolon? That’s to allow you to add more styling to that element – padding, borders, margin, background, text-align, float, etc.  Padding is also handy if you want to add a background color to the element such as gray (#cccccc), black (#000000) This tool will give you more info on selecting a color and knowing how to write it in code.MARGIN is outside. Handy if you have padding, background color, but you don’t want nearby element or text butting right up against it. In tables, MARGIN is BETWEEN cells, padding is INSIDE the cels.
This has NO padding in the cell
This one has padding of 5px and a background color of pale gray. See the slight bit of air before “This”?
since the table has NO margin, the rows are tight, with no spacing between

and this set of divs:

This has NO padding in the cell
This one has a MARGIN of 10px all around except the left, padding of 0 and a background color of pale gray. See how it is tight on the left margin?
and 5px of padding all the way around.

When I turn one line into an H1 heading, all the lines below do the same thing. I only wanted the first line big. How do I fix that?

  • This has to do with <br /> vs. <p> or <h1> When you have a soft return (shift enter) or a <br>, <br /> it will keep the items together with styling.
  • But sometimes in some editors, if lines are tight, they are an understood <br> or soft return, if there is line in between, it’s a full paragraph. Some even add a &nbsp; between for full paragraphs. So weird. So if I do this:

This is a headline h1 and then do a soft return, select the first line and choose Heading 1 in the Editor tools,
This line should be smaller, but is the same size – not a full return in between

BUT this is an H1 and the next line

is an H3 because I put in a full return before selecting the HEADING option.

How can I change my ORDERED LIST (ol) to use lower case letters or start on a different number?

  • This is another code tweak. OL means numbers/letters. You can start with options by going into the <ol> tag and adding: <ol type=”A”> or <ol type=”i”> without guessing at how far you have to indent to change it. You don’t change the </ol> tag, just the opening tag.

How can I change my UNORDERED LIST (ul) or bullets to have a different basic shape other than a fat dot?

  • There are a few standard options you can tweak in the code, we won’t cover more complex items. <ul> can change to <ul style=”list-style-type:disc”> or  <ul style=”list-style-type:square”> or <ul style=”list-style-type:disc”> (aka bullet), or <ul style=”list-style-type:circle”> or <ul style=”list-style-type:none”> to have nothing . You can also do this universally through CSS as well, but if you are just wanting to do it one time or once in a while, you can do it this way.
  • You can also just put a “fat dot” before any text using an ASCII code: &#8226; (start with the ampersand and end with semicolon – add a space before or after if you want
    More ideas here >

What’s an easy way to make a DIV or block of type stand out – like a border or background color?

  • <div> or <span> can become: <div style=”padding:10px;background:#ccc;border:1px solid #ff9900;”> and <span style=”padding:10px;background:#ccc;border:1px solid #ff9900;”>  this is saying that there is padding of 10 px around the content of the div or span, a background color of light gray, and a border all the way around that is only 1px thick (very thin), it’s solid and the color is orange.

What’s the difference between a span and a div?

  • A span can be in the middle of a sentence to add emphasis, additional styles, and more. Divs are more typically used to SEPARATE items, even if you only want a narrow div that floats to the right, it allows other things to wrap around it. Spans can SPAN a few elements with a style.
    divs can be made inline (display:inline;) and vice versa for span but this is the best explanation. They are wrapper tags, span is usually used for sentences or highlighting text, div for sections.
    More details here >

How can I make a simple button and what can I tweak to change it in different instances?

That’s an interesting question. Buttons should typically be created using a class or CSS item so that they look the same everywhere. You would add button tag: <button type=”button”>Click Me!</button> but then add a style to it UNIVERSALLY in an area you can edit or add custom CSS. Most themes have this area so you don’t have to edit the CSS used by the theme overall. Because sometimes when you update a theme, any changes you have made there would be lost. So the code above is the basic code, but adding  a css items would be something like this: <button type=”button” class=”bigButton”>Click Me!</button>

Then, in the area you can add your own custom styles, you’d add:

.bigButton (this is important that you add the “.” first and the capital B for Button matches exactly.

Then, you can say what you want it to look like using some of the ideas from earlier in this post. You can call it whatever you want: redButton, button, tinyButton – your choice.  See how the item has the .bigButton and then is followed by brackets? That’s to ENCASE the directions for display. It will also end with and } end bracket.  Also, below notice the /*some words */ – this is a COMMENT and will now show, but allows you to put instructions in there.

.bigButton  {

}
/*Step 1: Basic Button Styles*/
display: block;
height: 100px;
width: 300px;
background: #34696f;
border: 2px solid rgba(33, 68, 72, 0.59);
 /*Step 2: Text Styles – the color below is different than the background item – rgba(0, 0, 0, 0.55); means it is BLACK 0, 0, 0 and at 55% opacity – so it’s somewhat transparent */
color: rgba(0, 0, 0, 0.55);
textalign: center;
font: bold 3.2em/100px “Helvetica Neue”, Arial, Helvetica, Geneva, sansserif;
}
 /*Step 3: Link Styling a. means LINK – a.button means the link in the button*/
a.button {
textdecoration: none;

More details on button CSS are here >   RGB Color wheel selector here >   Gradient tool for FANCY buttons here >

What if I don’t need a section of the page for now, but will want to use it later? Can I HIDE it for now?

We covered commenting out in the CSS area above /* what you want to hide and then reverse what you started with */ to stop the commenting.

In HTML code you can hide thing with <!– what you want to hide – but if there are other hide comments in other areas, they will fight with each other and you may see some of what you want to hide, but at the end, you end with the –>

Great way to mark up when you made a change, why and who did it.  Remember all of these are in the CODE or Text view of your WYSIWYG editor – not the VISUAL editor.

By: