Love and hate – A Wordpess story

By   2015-09-27

During the years I had lots of encounters with WordPress, mostly good. But you won’t get to know it better until you have your own installation and need to push it.

A special OPs page

I decided to give my blog some love and add another page. This time it called for some custom CSS and HTML work, which I was looking forward to. I like to tinker with things and web technologies are among the most friendly to experiment, with almost instantaneous results. And you even don’t need sophisticated tools, a text editor like Kate or Notepad++ will do the job nicely.

So, I took some previous code I had just for the occasion and started working. Quite soon I encountered a frustrating problem.

How was I supposed to make a page with some custom HTML elements, if WP kept adding his own code to the page!?

I’m especially talking about adding paragraphs, or < p > elements. When you have a div that contains an image and a paragraph and every line of code gets wrapped in another paragraph that you don’t have control over, don’t even see in the raw text editor (what good is it BTW!?) then you want to cry bloody tears. You have a decent prototype working offline on your computer, but as soon as you upload it on the blog, it gets mangled.

I tried to bypass the editor. I thought, that it maybe reacted just to me pressing RETURN while inside, so I used a text editor offline and tried the old copy, paste, edit, paste back trick.

TIP: This works great if you have to make a search and replace operation and the web tools don’t give you a way to do so.

But nope, as soon as I saved everything went back to crazy. By that point I wanted to hug WordPress with a chainsaw. I ventured to find a solution and it was this: create an override for the automatic format function.

Making it work

Because it took my some time, I’d like to compile all the steps for you, so you won’t have to go through the same frustrations as I did. You need to be logged into the blog, I think the admin role, since you’ll need to touch some files to make it work.

Creating the override

Go to Apperance > Editor. On the right you’ll see a list of files, mostly *.php. Those are the templates that get copied whenever creating a new post, page etc. Find the one that affects all pages (like page.php, I can’t guarantee it will be called like that in your WP Theme).

wp_paragraph_fix_01

Now, add this line:

<?php if (get_post_meta($post->ID, 'no_autop', true)) { remove_filter('the_content', 'wpautop'); } ?>

O better, the same line but with a comment, so you’ll have an easy trip to find it:

<?php /** added by TD to override the auto format function */ if (get_post_meta($post->ID, 'no_autop', true)) { remove_filter('the_content', 'wpautop'); } ?>

Enable custom fields

This one needs you to click one simple thing in the visibility settings. Go to the top right corner of the page and click Screen options > tick Custom fields.

wp_paragraph_fix_02Create a new page/post

And now: any pages/posts already affected will stay that way. I’ve caught this early in development, so nothing was really lost. Create a new page/post and copy the code, but don’t save yet.

Add a custom field

Go to the bottom and add a custom field no_autop and set its value to 1.

wp_paragraph_fix_03

Now save and enjoy! Your HTML shouldn’t get messed up. But as always, no guarantees and you do it at your own risk.

Although it’s kind of sad I had to go through all this to do something that should’ve work out of the box.

/tangodelta