Stop WordPress Automatically Adding br

WordPress uses a function called wpautop to automatically add paragraphs and line breaks to your content from the content editor. This will change double line breaks and convert them into a HTML paragraph.

<?php wpautop( $foo, $br ); ?>

This takes two parameters the first being the text that needs to be converted, the second being a boolean value, defaults to true which will take line breaks and convert these to line breaks.

There are certain situations in your editing where you want to stop WordPress automatically adding line breaks in your content. To do this you need to replace the default wpautop and pass in a false as the second parameter to stop WordPress adding the HTML line breaks (<br />).

Add the following to your functions.php file to stop WordPress adding the line break.

// Remove the default filters
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

// Add the new function to be the the_content and the_excerpt filter
add_filter( 'the_content', 'pu_wpautop_without_br' , 99);
add_filter( 'the_excerpt', 'pu_wpautop_without_br' , 99);

/**
 * Create a new function that uses the default wpautop function passing in a false as the second parameter to stop adding line breaks
 */
function pu_wpautop_without_br( $content ) 
{
    return wpautop( $content, false );
}

Get A WordPress Plugin File Path Or URL

In this code snippet we are going to look into how you get a full path of a plugin file. When you are developing a plugin you can store multiple file types in it such as CSS or JS files where you need to access the full URL for the file, or you could have another PHP file which you want to include by calling the full directory path.

As the plugin directory is inside the wp-content folder the path to the directory could be quite large.

http://example.com/wp-content/plugin-name/plugin/frontend/css/css-file.css

The above is what you would have to use to include a stylesheet into your application from a plugin. If you were calling this from a file inside the frontend folder you would use the following code.

function plugin_styles() {
    wp_enqueue_style( 'css-styles', 'http://example.com/wp-content/plugin-name/plugin/frontend/css/css-file.css' );
}
add_action( 'wp_enqueue_scripts', 'plugin_styles' );

The problem we have when building a WordPress plugin you have to assume that this plugin can be used on any site on any WordPress install. Because it can be used on any site you can not include your domain inside the a wp_enqueue_style function. As a WordPress site can change the location of the wp-content directory with a wp-config constant you can not assume that wp-content is located off the root of the domain.

To include this correctly from a file inside the frontend folder you should be using a WordPressfunction of plugin_dir_url(), that will return the full URL of the current directory.

function plugin_styles() {
    wp_enqueue_style( 'css-styles', plugin_dir_url( __FILE__ ) . 'css/css-file.css' );
}
add_action( 'wp_enqueue_scripts', 'plugin_styles' );

But what if you don't want the URL for the folder but want the full file path so that you can include a new PHP file instead of doing the following.

include_once '/home/user/var/www/vhost/website/wp-content/plugin-name/plugin/frontend/new-file.php';

You can use a WordPress function of plugin_dir_path() to get the full path of the folder.

include_once plugin_dir_path( __FILE__ ) . 'new-file.php';

You could also use this function to include all the files within a directory by using the PHP function glob.

foreach(glob( plugin_dir_path( __FILE__ ) . '*.php') as $file) 
{
    include_once $file;
}

Using The jQuery .each() Function

In this article we're going to look into the usage of the jQuery each() function which will allow us to loop through different datasets such as arrays or objects. jQuery each is one of the most used functions in jQuery so I think it's important to understand what you can do with it.

The jQuery each function is used to loop through data the easiest way to think of it is that it's similar to a foreach loop in other languages. So you can use it to loop through a number of DOM objects from the same selectors for example if you want to add a target="_blank" to all links on the page then you will select all links and loop through each of them to add a target="_blank".

$('a').each(function(i){
    $(this).attr('target', '_blank');
});

Lets investigate how this works. First we get all the anchor links on the page by using the following selector.

// Get all anchor links
$('a')

Next we use the each function to loop through all the links.

$('a').each(function(i){
    // Performs tasks to each of the links
});

When you're inside the each function you can access the current element it is loop through by using the this keyword, but this object will not be a jQuery object and therefore if it's a DOM element you will not be able to use any jQuery functions on it. The solution to this problem is to wrap the thisinside a jQuery object definer.

$('a').each(function(i){
    // Performs tasks to each of the links
    $(this);
});

When we have the current looped element inside a jQuery object we can then add a new attribute to the link by using the attr function.

$('a').each(function(i){
    $(this).attr('target', '_blank');
});

Get The Current Index Of The Loop

In the above example you'll notice the i inside the function() parameters. This variable is populated with the current index of the each to see this working have 10 links on the page.

<a>Link 1</a>
<a>Link 2</a>
<a>Link 3</a>
<a>Link 4</a>
<a>Link 5</a>
<a>Link 6</a>
<a>Link 7</a>
<a>Link 8</a>
<a>Link 9</a>
<a>Link 10</a>

Then output the current index by alerting this to the user.

$('a').each(function(i){
    alert(i);
});

Loop Through Arrays

In the above example you saw how you can select DOM elements and loop through them but you can also use it to loop through arrays of data and get both the index and the value of the position inside the array.

var fruit = ['orange', 'apple', 'banana', 'grapes', 'kiwi'];

$.each(fruit, function(index, value){
  console.log(index + ' ' + value);
});

In the console it will output the following.

"0 orange" "1 apple" "2 banana" "3 grapes" "4 kiwi"

Loop Through Objects

What if you're using objects to store data and not arrays, the each function will take care of that the same way as you can see in the following code.

var fruitObj = {
   1: 'orange',
   2: 'apple',
   3: 'banana',
   4: 'grapes',
   5: 'kiwi'
};

$.each(fruitObj, function(key, value){
  console.log(key + ' ' + value);
});

The output of looping through the object is below.

"1 orange" "2 apple" "3 banana" "4 grapes" "5 kiwi"