WordPress themes add unwanted html break tags between links

Experiencing wordpress theme or plugin problems with shortcodes generated html such as:

  • unwanted break <br /> tags,
  • horizontal pagination appears vertically (no, it is not just the css)
  • newlines being turned into breaks,
  • shortcode content being altered ?

Unwanted break tags?

Does your website weirdly add ‘<br />’ html when page or post content is displayed with shortcode content?   Does it disappear when you have standard wordpress theme with no plugins?

unwanted breaks

Unwanted horizontal pagination?

Using amr-users and the pagination is vertical instead of horizontal ?  Yup, you guessed it. This is caused by those break tags being added AFTER the shortcode has run.

Vertical pagination

undesired vertical pagination

horizontal pagination

horizontal pagination

Newlines being turned into breaks?

WordPress function paginate_links

My plugin uses the wordpress function paginate_links with formatting option ‘plain’ . This generates a list of links joined with ‘newlines’ :

$r = join("\n", $page_links);

This works very nicely in default wordpress themes, producing nice paginated user lists with horizontal pagination and nicely structured html.

BUT then…..

If Wpautop function applied to the_content

When your pagination is vertical, or your newlines become breaks, then most likely the theme or another plugin is adding the wordpress wpautop function to the_content filter, possibly with a non default priority .

To avoid wpautop affecting shortcodes,  various people have suggested removing it and then adding it with a later priority to get around other problems… BUT adding it back  can just cause more problems.   To be clear it is possible to add  wpautop with an argument that specifies NOT to change newlines.

Remove wordpress filter with same priority

My plugin tries to avoid this problem for you by executing a

remove_filter ('the_content', 'wpautop');

The remove filter will only work if the filter was added with the default priority and arguments.  It the filter was added with any other priority, the remove will not work.   Filters must be removed with the same priority and arguments that was used to add them.  It simply isn’t possible for my plugin to know what your theme or other plugin is doing.  (eg: WP Unformatted plugin apparently used to apply the filter )

How to fix:

Fix the wpautop call

Get rid of wpautop.   Some folks really don’t like it and arguably your theme should not be applying it the way it does. WordPress default themes don’t cause this problem.

Or change the add filter priority to something less than 11 so it executes BEFORE the shortcode filter .

Css workaround – style the break (‘<br />’)

My plugins default front side css in versions after version 3.6.3 will include this css.  It is not ideal, it would be better if the html code was not changed.  This is to cut down the support effort generated by people who do not realise what is going on. (It’s a tricky one).

If you are not using the front end css, or its not yet available (plugin still at v 3.6.3) then add something like this to your css (in theme or custom css):

.tablenav-pages br { 
/* fix those annoying themes or other plugins that insist on adding wpautop filter to post shortcode content */
    display: none
}

amr users css, html and styling

How to change the look of your user list:

(see screenshots further down)

CSS:

  • Plugin comes with a default css file used mainly for the public lists
  • Default css tries to let your theme do most of the styling for consistent appearance and just add essential extras
  • Default css can be switched off completely
  • There are many css classes and selectors so that you can target almost any part of the list to achieve your own styling.  Please use your browser’s ‘inspect element’ to investigate the classes for your data and lists.
  • Default css can be activated for certain pages only
  • If you need custom css – maybe because you’ve created a very wide list or your data has forced the table to be wide, see adding custom css to a wordpress website

HTML:

  • In version 3.4 onwards, the admin or backend lists all use table html as these lists are also used to administer the users
  • Tables can be good and tables can be tricky.  Since YOU are determining the columns, the field values in them and the size of the table, the plugin should not attempt to impose any fixed sizing.   This means if you have a wide list, you may need to add some css to make it behave the way you want.
  • For ‘public’ lists, a ‘public html type‘ can be set to use simple html which allows more flexible styling of the lists.  The same “classes” will be used so much css can be shared for consistency of appearance.
  • so public html type can be:
    • table – yes a normal html table
    • simple – a html5 non table format

Images:

  • csv export image link and refresh link icons or text can be totally customised (general settings)
  • default avatar type (used if user does not have their own avatar) will be set by your wordpress settings (settings > Discussion > scroll down to set default avatar )
  • avatar size can be set as a default for all lists (general settings) and/or customised per list (configure list or overview)

CSS and image settings screen:

Css settings for ALL lists – in the General settings

 

Setting the public html type:

Set the public html type for a list in the overview settings

Css Selectors available

  • Each user record or row has a vcard class, and an even or odd class
  • Each field for that user has it’s fieldname as a class
Css selectors available for a demo page at https://bp.wpusersplugin.com/user-list-files-urls/
Css selectors available in the non-table html