Skip to main content

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/ 

Comments

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

Popular posts from this blog

IIS, There was an error when trying to connect. Do you want to retype your credentials and try again?

IIS 8 error on windows server 2012 insufficient permission There was an error when trying to connect. Do you want to retype your credentials and try again? Details: Filename: \?\C:Windows\system32\inetsrv\config\redirection.config Error: Cannot read configuration file due to insufficient permissions screenshot: Solution: Steps to short out this issue: go to C:\Windows\Microsoft.Net\Framework64\v2.0.50727\CONFIG\machine.config here you got the redirection tag like the below <configurationredirection enabled="true" password="[enc:IISCngProvider:X0ObCWwZ4+PrTHiFVPtzFeCcL8u5P6KUOYfo1/0QrgZWATA5pKWqHvD8nL2crNJKyyqr4z/rBdLPjdRcaLxAMMj4l+lvp5EXXKSXueolvyGa34F4QZfbBVCM6oVNcq3M368TOTVjJv4POVFQWvu0MDVlGgReglXB+Lw5BRI4Htw=:enc]" path="C:\Windows\System32\inetsrv\config\import\" username="Administrator"> </configurationredirection"></li"> you need to change this to <configurationRedirection /> Th...

Plesk - Upgrade the .net Framework to 4.7.2 OR 4.8

 Steps to Upgrade the .net Framework to 4.7.2 OR 4.8 1. First Download the .NET Framework from https://dotnet.microsoft.com/download/dotnet-framework   2. Install on the Server. 3. Login to the Plesk and go to "Tools & Settings" > "Server Components" and refresh the components using the refresh button 4. After update, it will reflect in "Web Script" section at the server component page. All done!!!