Tuesday, August 21, 2018

WordPress line break not Working

Many WordPress users struggle around this issue of WordPress line break not working. In this article, we discuss some of the possible ways to get around this issue.


1. Use empty classes in HTML Elements
You can make WordPress assume that your HTML elements contain certain attributes. This can be done by Adding attributes to the HTML elements with the use of empty classes. For example:
Avoid writing:
<p>
<br>
<span>
Instead, write:
<p class="">
<br class="">
<span class="">
2. Disable Autop formatting
The Autop() function in WordPress auto formats the paragraphs. The WordPress line break not working is due to the presence of a filter called “wpautop”. The “wpautop” filter executes whenever the content of a blog post is rendered.
We can easily use the remove_filter function to disable the wpautop filter. In the functions.php file you need to add the following code:
remove_filter ('the_content', 'wpautop');
If you use multiple themes, then you need to add this functionality as a plugin. You can place the code within a PHP file inside the /wp-content/plugins directory.

Published Post after Autop disabling

WordPress line breaks Fix1

3. HTML br tag not working: Use TinyMCE Advanced plugin

WordPress has a built-in editor known as the “Visual” editor. At the backend, the editor uses open source editor named “TinyMCE”. If you switch between the Visual Editor and the HTML(Text) editor, the TinyMCE functionality executes a backend filtration process. During this process, the empty tags and the
tags are removed from the post.
The TinyMCE-Advanced plugin adds the option to disable the automatic removal of and
tags. The option to disable/enable WordPress line break is present in the Settings->TinyMCE Advanced panel.
Tiny MCE plugin

Edit Post in Visual Editor without TinyMCE Advanced Plugin installed

WordPress line breaks issue21

Edit Post in Visual Editor with TinyMCE Advanced Plugin installed and disabled auto removal of tags:

 WordPress line breaks Fix21

4. Work with the HTML Editor

This is an easy solution for people who are familiar with HTML. You can avoid working with the Visual editor and switch to the HTML mode in the WordPress editor. The HTML mode lets you control the output and allows you to add or remove line breaks. Just use the
tag wherever you want a line break inserted.

5. Add a filter to replace
tag

Add a filter in the functions.php file which adds a clear attribute to the
tag. When the attribute is added, the
tag is not removed by WordPress.
function clear_br($content) { 
return str_replace("<br/>","<br clear='none'/>", $content);
} 
add_filter('the_content','clear_br');

Post before adding filter

WordPress line breaks filter2

Published post after adding filter

WordPress line breaks filter

6. Create a WordPress Line Break (br) Shortcode

You can add a shortcode to fix the line breaks not working issue in WordPress.
Insert the following shortcode code into the functions.php file:
function add_linebreak_shortcode() {
return '<br />';
}
add_shortcode('br', 'add_linebreak_shortcode' );
Now insert the shortcode shown below wherever you want to insert a space.
[br]

Adding Shortcode in Text Editor

 WordPress line breaks shortcode

Edit Post in Visual Editor

WordPress line breaks shortcode2

Published Post after Adding Shortcode

WordPress line breaks shortcode3

7. HTML Br tag not working – Use CSS

Some developers believe
tags should not be used for styling pages. HTML is a semantic language, not to be used for defining positioning, styling or layout information. Use CSS to generate the style or size of paragraph margins using stylesheets. If you have basic knowledge of CSS, then all you need to add paragraph spaces is add a bottom margin to the tag for the paragraph.
  1. Open the WP admin panel.
  2. Select Appearance > Editor.
  3. Select the file style.css file on the right side. Locate the tag in the style.css file.
    Add the following lines to add gaps above and below the paragraph:
    padding-top:1.0em;
    
    padding-bottom:1.0em;
    Example:
    p {
    margin: 0 0 1.5em;
    }
    After adding those two lines, it will look like this:
    p {
    margin: 0 0 1.5em;
    padding-top:1.0em;
    padding-bottom:1.0em;
    }
  4. Save the file.
All paragraphs get a space above and below. Note that this would add the same amount of space above and below all paragraphs.
 WordPress line breaks margin


Note: this article is taken from https://blog.templatetoaster.com/wordpress-line-break-not-working/ 

1 comment:

monalisha biswal said...

I always looking for this kind of post which is really very impressive and well maintained. I found this post like that. Thanks for sharing and keep updating.
Server Management Company in Delhi