Category Archives: WordPress

Tips and Tricks on WordPress usage and development. I am very passionate about WordPress, but it doesn’t work just by itself – it needs a rich environment to live and breathe in.

If you’re after theme and plugin alterations, we have a category for that.

How to exchange data from PHP to JavaScript in WordPress

I was involved in writing a small plugin project last week, for which I found myself reading a database value from WordPress (in PHP) that I wanted to use in JavaScript. I don’t do much in JavaScript and it had occurred to me that I had no idea how I should exchange the data.

After some digging I found several posts on this subject, and I found the most straightforward one was by Toby Osbourn. He made me aware of the wp_localize_script() function and gives a brief example. Thanks, Toby!

The function is designed to over localised values for strings to anything that’s printed via JavaScript, but it can really be used for any data we may need. Here’s how I did it:

The PHP Part

This looks more complex than it is, so let’s break it down line by line. Our function is called via the last line here, hooking in to when WordPress calls the footer. The purpose of our function is to insert a bit of jQuery code on the front page, so we’ll begin by making sure that this doesn’t happen when we’re in the Admin Interface. If that’s the case, we’ll simply return without doing anything.

Next step is to initialise jQuery – that’s only necessary if we’re actually using jQuery, so feel free to leave that bit out if you’re so inclined. On this note, WordPress 5.1 only ships with jQuery 1.2.x (no longer supported).

Then it’s time to initialise our own script. In my plugin I have a separate file for that, which is why I’m reading its full path into a variable first ($elv_vanish). To get that full path, the plugins_url() function helps.

Now comes the interesting part: we’re creating an array with two values (random_value and elv_class) and populate them with data. Note the names of the variables in the array, we’ll be able to access exactly those values in JavaScript in a moment. To “transfer” the data, we’ll call wp_localize_script() with three parameters:

  • the name of our own script (elv_vanish in my case)
  • the PHP array we’ve created (elv_data)
  • and a variable we’d like to use in JavaScript ($elv_data to make it easy for my tired brain to remember)

That’s all we need to do in PHP. We’re using an array by the way to enable us to transfer more than a single value. You could use a single variable instead of an array, but an array makes it easy to add values as your project matures.

The JavaScript Part

In order to access our values, we now have an array to play with – namely $elv_data. JavaScript supports dot notation, so any of our PHP array values can be accessed using $elv_data.random_value and $elv_data.elv_class.

It’s super easy – and very exciting I must add 🙂

Further Reading

Show Me The Cookies: How to list all cookies on your WordPress site

I’ve been working on a new plugin for WordPress called Cookies. It shows you a list of all cookies on your current site. Once activated, you can find this list under Appearance – Cookies.

In addition, you can also display this list to your visitors by adding the shortcode [cookies] to any post or page. Many of those cookies are used by WordPress to track things such as “are you logged in”, so I’ve added an option to filter WordPress related cookies out. This list is available with the [cookies-nowp] shortcode.

I’m still putting the finishing touches on the plugin, but I’m planning to submit it to the WordPress repository. For now, feel free to download it from my GitHub repository.

Let me tell you a bit about how this plugin came to be.

Continue reading Show Me The Cookies: How to list all cookies on your WordPress site

Child Theme Wizard – Version 1.3 released

This morning I felt like a bit of coding, and something that’s been on my to-do list for a while was to update my Child Theme Wizard plugin. It’s been making over 10.000 users happy since 2013.

The main reason for the update was to update the compatibility flag with WordPress 5.1 – it was already compatible with the latest version, it just wasn’t explicitly set. On this occasion I found a couple of other items I could improve upon:

  • updated the link to the WordPress Codex about Child Themes
  • verified compatibility with WordPress 5.1
  • updated social media links (added YouTube and Patreon, removed Google+)
  • added theme version to query, as suggested in WordPress Codex

The last item was new to me and doesn’t make a difference to how your child themes are created, however since the Codex suggests to create child themes this way, I thought I’d better follow best practices.

And one final thing I’ve streamlined was the code itself, both in the plugin and in the generated code. It’s now a bit more spaced out, improving readability and updatability (if that is in fact a word).

You can get the latest version either from GitHub, update from within WordPress, or download it from the official WordPress repository.

How to disable the Login with WordPress.com prompt

One of my self hosted WordPress sites kept offering me to login with my WordPress.com credentials. I find that mindnumbingly annoying, since I don’t use WordPress.com (nor can I remember my credentials).

Thankfully there’s an easy way to switch this prompt off. This integration comes courtesy of Jetpack. There’s an option under Jetpack – Settings – Security in which we can turn this feature on and off.

After flicking the switch, this setting is saved automatically and WordPress won’t offer anything other than a regular credentials window at login.

How to remove the Jetpack Feedback Tab

In this episode I’ll explain how we can hide the Feedback Tab that the Jetpack plugin adds to the sidebar of the admin interface in WordPress.

This tab is part of the Contact Form feature, which sadly cannot be switched off with a single slider. We’ll have to delve into debug mode and do it “the hard way” – but fear not, there’s not code hacking involved, and I’ll be with you every step of the way.

How to hide WordPress Update Notifications with ZEN DASH

In this episode I’ll show you how to hide and remove those (almost daily occurring) WordPress Update Notifications. I’ve built this functionality into a plugin I’ve written over 5 years ago called ZEN DASH. The plugin’s main purpose is to hide all kinds of clutter from the WordPress admin interface, such as unused tabs, dashboard widgets, footer attributions – and Update Notifications.

You can install the plugin by searching under Plugins – Add New, or download it from the official WordPress repository here: https://wordpress.org/plugins/zen-dash

The project is also on GitHub: https://github.com/versluis/Zen-Dash

Creating a Podcast Feed with WordPress and PowerPress – Part 3

In this final episode of this mini series I’ll show you how to configure the first episode of your Podcast Feed by adding the audio file to the post. I’m also talking about the implications of setting the date and time on the post so that all your post-dated episodes appear in the correct order. Finally, we’ll submit our validated feed to the Apple Podcasts directory.

How to make turn URLs into clickable links in the_content()

The P2 theme has a nice feature built-in: the ability to turn URLs into clickable links on the fly. It does this by using a WordPress built-in function called make_clickable().

Here’s how we can use this function to make this feature available to any theme.

The above code, once inserted into your child theme’s functions.php file, will take the_content(), pass it to the make_clickable() function, and then return it before it’s printed on the screen.

The advantage of using it this way is that no content in the database is modified, and it’s easy to remove this feature when it’s not needed anymore. Feel free to add conditions depending on categories or other factors (you could check if the string “http” is present in the_content(), or only do this with .com endings, etc).

Learn more about this function here: https://codex.wordpress.org/Function_Reference/make_clickable

How to enable the Author Bio Box in TwentyThirteen

The TwentyThirteen theme has a built-in option to display an Author Bio Box underneath each post. It’s nicely formatted and can be implemented very easily – if only their authors would mention that this feature even exists, let alone how to activate it.

To understand how it works, we need to take a peek at the content.php file in the theme. Around line 70 we see three conditions that need to be met for the box to show up:

  • is_single() – the post needs to be a single post, not a page
  • get_author_meta(‘description’) – in your WordPress Profile, some text needs to be present in the description box
  • is_multi_author() – more than one author must be present on this WordPress installation

This means that on regular multi-user WordPress sites, TwentyThirteen will display the Bio Box automatically underneath regular posts. To make this happen on sidle-user sites, it is enough to create a second dummy user – on some installations at least. In my tests this doesn’t work reliably though (don’t ask me why – I’m just the messenger).

To make this work regardless of which mood WordPress appears to be in, we can also tweak this line and remove the third (multi-user check) condition like this:

Now we’ll see the Author Bio Box for single users as well!

Note however that there’s one more bit of inappropriateness that we may want to remove, namely a link to “all posts by this author”. That line just ruins everything for me. Not to worry, we can take care of this in a file called author-bio.php.

Towards the end at around line 30 we’ll see that this line and link is printed with a printf() statement. Comment it out and that link is gone.

Demo Theme

For a fully working demo with many other bells and whistles, check out two of my tweaked child themes on GitHub. They both have the above implementation:

Thanks to the suggestions in this forum post

How to remove the Jetpack Feedback Tab

In this episode I’ll explain how we can hide the Feedback Tab that the Jetpack plugin adds to the sidebar of the admin interface in WordPress. This tab is part of the Contact Form feature, which sadly cannot be switched off with a single slider. We’ll have to delve into debug mode and do it “the hard way” – but fear not, there’s not code hacking involved, and I’ll be with you every step of the way.

If you have any questions, please let me know.