Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages

How to Add Floating Image on WordPress for Beginners

Have you always wanted to have a floating image on your WordPress website ? Well now we have the ultimate tutorial on How to Add Floating Image on WordPress for Beginners.

There is nothing hard in this tutorial on How to Add Floating Image on WordPress for Beginners.You only need to add some CSS and JS that we have included ,just for you.

Before we start we would like to advice you to check our list of the Best Web Hosts

When having your website on WordPress you will need to choose a Good Looking Optimized theme , Speed optimization plugin and understand How to do Good SEO 

Include WordPress default styles and clear the float

When you develop custom themes for WordPress, it is very likely you will replace the whole code from style.css, which is a good practice actually. However, there are some styles that are recommended to be preserved, so we can float elements. The only styles we need to add to our style.css file, are:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.alignleft,
img.alignleft {
    display: inline;
    float: left;
  margin-right: 1.5em;
}
.alignright,
img.alignright {
    display: inline;
    float: right;
  margin-left: 1.5em;
}
.aligncenter,
img.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
p {
     clear: both;
}

Notice that last line clear: both, clears the floated image inside the paragraph and prevents it to wrap around a previous element in page.

Wrap an image left in WordPress editor

Now, when we edit a page or a post:

  • we need to insert the image
  • select it
  • click the align left button and make sure it will show up on a single line (that means the image and the text, are located in the same paragraph so they can wrap around). When you click align left button, a class .aligncenter is added automatically.

In this example, I floated images left, but they can be floated right as well, using the same method, by clicking the align right button instead. At this point, I assume you already know how to upload and include images in your WordPress editor. 

Float multiple images left

Now we can float more images to the left of the text, using the method described above. They will show up nice within the main website, since we have have specified clear: both for the paragraphs. WordPress TINYMCE editor, uses other stylesheet than the one you use for the main website and it doesn’t know, that floats are supposed to be cleared within paragraphs. 

Customize the TinyMCE WordPress editor

While this step is optional, I find it is very easy for the clients to get a feel of how content looks like before publishing, they won’t get confused and will have great experience while editing their websites.

TinyMCE WordPress editor – the polished final look

Code for WordPress editor styling

First we need to create a CSS file in our theme file. I am gonna create a folder called css, a file name editor-style.css and add the following code in it:

Basic CSS code

1
2
3
/*image float CSS clear*/
.mceContentBody p {clear:both; margin: 0 20px 25px 0}
.mceContentBody p img {margin: 0 20px 25px 0}

Enhanced CSS code

This code is optional only, and the code from above is enough to show up floats properly, but it will look great if we customize the text color for headings, normal text and basic links; the width of the content will match the one of the website as well.

1
2
3
4
5
6
7
8
9
/*general CSS text and links styles for WordPress editor*/
.mceContentBody { color: #333; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px; line-height: 18px; width: 590px; }
.mceContentBody h1, .mceContentBody h3, .mceContentBody h4, .mceContentBody h5, .mceContentBody h6 {color: #1f201c}
.mceContentBody h2 {color: #f78a20}
    .mceContentBody h2, .mceContentBody h4 {font-style: italic}
body.mceContentBody a { background: none; color: #f78a20 !important; text-decoration: underline; }
/*image float CSS clear*/
.mceContentBody p {clear:both; margin: 0 20px 25px 0}
.mceContentBody p img {margin: 0 20px 25px 0}

Load our custom CSS editor file

[Update: starting with wordpress 3.0 editor-style.css is part of theme and is not necessary to load it using the code from below (make sure you enable the editor-style.css by adding add_editor_style(); in functions.php). However, the following snippet is useful if you still use an older version of WordPress.] In order to make it look that way, we need to add this snippet to functions.php file, located in our theme folder. Don’t forget to edit the link inside to match the location of our custom editor CSS file.

1
2
3
4
5
6
7
8
9
10
//CUSTOM WORDPRESS EDITOR STYLE
function custom_editor_style( $url ) {
  if ( !empty($url) )
    $url .= ',';
  // Edit path to match the custom style location. Currently the file is located in active theme, in a folder called css.
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor-style.css';
  return $url;
}
  add_filter( 'mce_css', 'custom_editor_style' );
// END CUSTOM WORDPRESS EDITOR STYLE

Subscribe To Our Newsletter

Leave a Reply