Snippets – unleash the power!

Table of Contents

WordPress is a well oiled machine. It is the product of almost 20 years of work and experience, ever evolving, to become what it is now – the platform of choice for building new websites.

This machine has to serve as many purposes as it can, which means making hard decisions: which features go in and what is left out. Luckily, WordPress gives us the power to add to its capabilities by editing its code.

Editable areas include:

  • UI = Theme, including all pages.
  • Functionality

Today we’ll talk about injecting text in the theme, by adding specific pieces of code in the correct places.

Note: A video tutorial is available at the bottom.

Let’s get our hands dirty

It is all too general, so let us take an example and add it to WordPress. We will be adding a note to the footer of the page.

So basically WordPress uses Actions to create the various parts of the theme.

This is the general structure of a page:

Let’s say we want to inject a message to the footer, saying we are waving responsibility for damage that might occur when the user falls asleep in the sun.

In PHP, this will look like this:

<?php
   echo '<p>We are not responsible for sun damage if you fall asleep outside</p>';
?>

To insert this code manually, we will need deep knowledge and understanding on how the footer template is structured. Luckily, WordPress was designed with ease of use in mind, and provided us with simple Action to hook our code into:

wp_footer

So, all we have to do is add our code to the action wp_footer and WordPress will call our code when drawing the footer, including it automatically!

Now, we’ll wrap our echo with a function, and call it when wp_footer is called:

<?php
function your_function() {
    echo '<p>We are not responsible for sun damage if you fall asleep outside</p>';
}
add_action( 'wp_footer', 'your_function', 100 );
?>

How does it work?

  • The add_action command adds our function your_function to the hook wp_footer with priority 100. This means that if you call again with lower number (e.g. 50), the result will be displayed before this one. The lower the number = the sooner it will be run.
  • your_function runs and prints the sentence to the footer, as we wanted.

OK, simple enough. Where do I add this code?

By default, WordPress allows you to add this code into a file called functions.php located in your theme directory.

Note: when the theme is updated, your custom files may be deleted. This is why using a child theme is very important! you can read about child theme here.

To add code to your functions.php file:

  • use FTP client to download the correct file.
  • open it with a text editor.
  • insert your code at the bottom of the file, but make sure the line “?>” is still after your code. This is the terminating character of PHP code.
  • save your changes.
  • upload the file back to the server using the FTP client.
  • refresh the page to see your changes take effect.

This flow is possible, but hard to manage and is a bit tedious. Luckily there is a simpler solution: use a plugin to manage your code changes.

Plugin: Snippets

The Snippets plugin is simple to use, and allows you to add multiple snippets of code via the site admin panel. Each snippet can be deactivated separably allowing for maximum flexibility (you can deactivate without deleting = you might need some functionality only sometimes, this is perfect for that).

You can read about this plugin here.

Once installed, find the “snippets” item on the admin menu.

Select Add New and follow the instructions:

  • A = add an informative name. This is only visible in the list of snippets, but you should be able to understand at one glance what this snippet is.
  • B = add the code. Note that the “<?php” and “?>” starting and closing is not needed.
  • C = where should your code run? options are: everywhere, only admin, only frontend, only once. In our example, we can use “frontend” as the footer exists in the frontend of the site.
  • D = description = again, this is for you.
  • E = priority. the higher the number, the lower the priority. this number tells snippets plugin which snippet to run first.
  • F = save changes, activate buttons.

After adding, saving and activating, goto your frontend and refresh. it should add the code to the footer:

Conclusion: what have we learned today

  • WordPress is built in a special manner with Actions and Hooks.
  • We can use this mechanism to add functionality / UI.
  • Adding code is possible via the theme functions.php file
  • Adding code is easier and more manageable via the plugin Snippets.
  • We used the Action wp_footer.
  • We used add_action to add a function to be called when an action is run.

Questions? Ideas? discuss bellow!

Sharon Shaked

Sharon Shaked

The WooCommerce Express team

Youtube Channel:

Share:

Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on whatsapp
Share on email

2 Responses

  1. I use Snippets as well, it helps me manage my code easily.
    A great article, I wish it was around when I learned all of this.

Leave a Reply

Your email address will not be published.