Adding style to  WordPress editor can nowadays done by several plugins, at least I got those comments. So if you have a WordPress website and have no interest to learn any coding, just download a plugin. There are several ones.

I use here the CSS still in the page, but normally I do this just in a separate file. This can be the style.css or just anyother.css file. Using style direct in a page is not recommended as you have not much control over it in a later stage. But to my opinion some small adjustments can be made locally on a page. But only those which you will not want to change in a later stage.

Getting some styling shadow around a picture or getting some space around the picture is not too much to asked. Probably I am not looking in the correct direction or I am using the wrong keywords to find the plugin which I needed.

After trying to add style to WordPress editor, or at least to some parts, I found myself struggling with some basic stuff.  After 4 years of coding HTML and CSS with Notepad++, I was struggling with some basic styling in the WordPress editor!

Now, after my first few blog pages in WordPress, I decided not to open old pages again to see how I styled some pictures or lists, but to make another blog with a list. On this list some other styles for the WordPress Editor are shown. This list is not a complete list but the intention is at least to cope with the most simple styling features which are missing in WordPress.

If you wrote the perfect plugin for it, please feel free to comment
in the bottom and I will try your plugin.

Adding style to WordPress editor

A simple way is to add style to WordPress editor is with a CSS3 style sheet in the head section, but you have to upload this to your server. If you don’t want to this then the following options are open:

1. Style in the head:

This is a test……h4 heading

To add this into the head, a plugin will be very handy. I am using header and footer for the basics, like Google analytics and author. Every blog this will be added automatically. Besides this I am using the SEO tool from Yoast. Besides t
he seo part, there is a head entry part. You can adjust this for every single blog!

2. The WordPress editor has two tabs; one called visual where the Word document can dropped.
4. Second one called text. This is the HTML editor. In this HTML WordPress editor the styling can be adjusted to your taste. For this you need a bit of practice. The WordPress editor sometime reacts differently then expected and the copy –paste method will not always works. In that case the text has to be typed in the text part of the editor. I am doing this also in the tutorial video above the creation of a DIV .
5. 1. DIV: <div style=”float: right; background-color: orange; width: 80px; height: auto; margin: 15px 15px;”>…  text… </div>The difference with an auto height
      box is auto height is that the box

      is as high as needed for the text. This is normally used in responsive web design in combination with a max-width

   2. DIV: <div style=”float: left; background-color: yellow; width: 80px; height: 80px; margin: 15px 15px;”>…  text… </div>The difference with an fixed height
      this is a yellow box

      is that the box
      is as high as needed for the text. This is normally used in responsive web design in combination with a max-width

   3. Different kind of blocks (divs) are shown in this post
   4. <p><span style=”background-color: #ccffcc;”>….text…..</span></p>Almost never used, but sometimes more effective than just using a different color for the text
   5. <p style=”clear: both;”> the function clear both should be given below float elements as the p or h2 can start floating between the div blocks. It can be compared with a hard return or hidden line. Below this line, the code stay below this line
   6. <img………. style=”margin: 10px 5px 10px 15px; border: solid 0px #888888; box-shadow: 5px 5px 10px #888888; “………alt=”html5 and css3 view source” width=”190″ height=”190″…………………… /> The image is already standard inside the WordPress editor but the margin is not there. The margin add some space around your picture. The negative -50px will raise the picture from his original position. The alt text is for SEO and should always be used with some proper keywords. The box shadow is nowadays almost a standard.
   7. There are two types of shadow and they work the same.
      1. The box-shadow as displayed at the green div below

         this is a div with a box-shadow, this you can also apply to images and video

         code: <div style=”margin: 15px 10px 15px 30px; width: 150px; height: 150px; background-color: #93b893; border: solid 2px #888888; box-shadow: 10px 10px 10px #888888;”>
         <p style=”margin: 15px 10px 0px 10px;”>this is a div</p>

      2. TEXT-SHADOW

         code: <h1  style=”text-shadow: -5px 5px 10px #333333; opacity: 0.4;”>TEXT-SHADOW</h1>

   8. <ol style=”list-style-type: upper-alpha;”> —A)—B)-etc Liststyles of WordPress can easily extended to show better
      1. example upper-alpha
      2. example lower-alpha
   9. <ol style=”list-style-type: upper-roman;”>–I—II—etc
      1. example upper-roman
      2. example lower-roman
   10. <ul style=”list-style-type: circle;”>–o—o—etc
       • example circle
       • example circle
   11. <ul style=”list-style-type: square;”>
       • example square
       • example disc
   12. <li style=”text-align: justify; margin: 10px 0;”> The margin is used in this text

Child Theme

With a Child theme, you have to copy the style sheet from Parent Theme. And then you can work in the style sheet of the Child Theme. The Child Theme will be discussed in a later blog as it is not directly styling inside the editor.

Advantage

• it is nice and clean work. You can create classes which you can use multiple times.
• When the Parent theme is updated by the maker, this will not affect your style
• Any theme can be used to create a Child theme.

Conclusion

Adding style to WordPress editor is not so hard as it looks like. With a bit of typing and a bit of copying and pasting, a blog can get a better look. As the editor is seen as one big div, some additional div’s will color up the blog. Like to find a nice color,please visit W3 color picker

WordPress has a great editor from itself, but still I am looking for a simple plugin to style the editor space a bit more.