5 useful tips for Wordpress developers

If you are a WordPress developer, you may find these tips on how to develop a WordPress website helpful.

1. Use less plugins, write more code.

There are plenty of plugins which provide very small functionality. They can easily be replaced with custom code in your theme’s functions.php file.

Each plugin affects your website’s loading time a bit. Don’t get me wrong, I’m not saying that plugins are bad and each plugin adds seconds to the site’s loading time (although it depends on the plugin 🙂).

But the bigger and more complicated your site becomes, the more plugins you might install. Just review your plugins list and if you find some with only a couple lines of code — move that code to your theme’s functions.php file and delete that plugin.

I recently noticed it myself when I reviewed the plugins list of my client’s website. I found a plugin which only adds a tiny CSS code into the admin panel to stretch the Gutenberg editor to the full width. So I simply got that function from the plugin’s file and pasted it into functions.php file.

2. Escape everything!

WordPress haters like to say that one of the biggest problems of our beloved CMS is security. This is because beginner developers don’t write code with proper standards and don’t filter data which users (or a potential hackers) inputs.

For example, they can enter some SQL injection into your form input and once it is sent to the database it can break your site.

To prevent this and many other ways to hack your website, just use escape functions to **all data **users provide.

Here are some most common escaping functions you should use:

• esc_html($your_text) — use on text you want to display inside an HTML tag. This function will remove HTML from $your_text variable.

// don't forget to use the echo function
    <div><?php echo esc_html( $your_text ); ?></div>

• esc_url($your_link) — use on all URLs, including those in the src and href attributes of an HTML element. This function checks and cleans a URL ($your_link variable).

    <a href="<?php echo esc_url( $your_link ); ?>">
      <?php echo esc_html( $your_text ); ?>
    </a>

• esc_attr($your_data) — use on everything else that’s printed into an HTML element’s attribute. This will encode the <, >, &, ” and ‘ characters.

    <a class="<?php echo esc_attr( $your_data ); ?>" href="<?php echo esc_url( $your_link ); ?>">
      <?php echo esc_html( $your_text ); ?>
    </a>

You can find all the escaping functions at the official WordPress developer’s resource: https://developer.wordpress.org/apis/security/escaping/

3. Use child theme.

If you don’t develop a website from scratch (means working on an existing site or using a theme from the other author) — use a child theme.

It’s important because once the parent theme is updated you will lose all your changes.

And even if the parent theme is not from a WordPress theme repository (or other themes storage like ThemeForest) it is a good practice to write your code in a child theme.

Thus you can prevent breaking existing theme and revert your changes easily.

4. Prepare content for translation.

Do not write texts in your php-files as regular text. Always use WordPress internationalization (translation) functions like _e(), _ex(), _nx() etc.

I mean don’t do this:

    <div>This is some sample text you may find in some php-file. Unfortunately, it cannot be translated.</div>

Instead write text inside HTML like this:

    <div><?php _e('This is some sample text you may find in some php-file. Luckily, it can be translated because of the internationalization function.', 'theme-slug'); ?></div>

When you write inside HTML using internationalization functions you prepare your website for translation.

So when you install some translation plugin it will automatically detect all your strings in HTML and make them available for translation.

You can read more about internationalization functions here: https://developer.wordpress.org/apis/internationalization/internationalization-functions/

5. Use actions and filters.

WordPress has two awesome features — actions and filters. Use them! They are very convenient when you need to modify existing code without actual digging into that code source.

A good example of using actions and filters is the WooCommerce plugin. You can modify almost all the data from your theme’s code without overriding the core code of the plugin.

So when you develop a custom theme (or especially plugin) — try to make it possible for other developers to have access to modify or adjust your code.

Let me demonstrate to you a quick example of how actions work. For example, you need to rearrange elements on a WooCommerce product page and you want to move the product’s price below the product’s short description.

If you look at the WooCommerce core template file templates/content-single-product.php you will notice that almost all the code is written using actions.

So to move that price below description have a look at this part of the code (see the full code here https://github.com/woocommerce/woocommerce/blob/7.5.0/plugins/woocommerce/templates/content-single-product.php):

    <?php
    /**
    * Hook: woocommerce_single_product_summary.
    *
    * @hooked woocommerce_template_single_title - 5
    * @hooked woocommerce_template_single_rating - 10
    * @hooked woocommerce_template_single_price - 10
    * @hooked woocommerce_template_single_excerpt - 20
    * @hooked woocommerce_template_single_add_to_cart - 30
    * @hooked woocommerce_template_single_meta - 40
    * @hooked woocommerce_template_single_sharing - 50
    * @hooked WC_Structured_Data::generate_product_data() - 60
    */
    do_action( 'woocommerce_single_product_summary' );
    ?>

First we need to remove the 'woocommerce_template_single_price' action from the hook 'woocommerce_single_product_summary' (mind the last priority argument, it MUST be the same).

Then attach that action (function) again, only with higher priority, so it will be after the 'woocommerce_template_single_excerpt' action.

Here’s the code to place into functions.php:

    function prefix_move_price_after_excerpt(){
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
    }
    add_action( 'init', 'prefix_move_price_after_excerpt', 10);

Now the product page looks like this:

Learn more about actions and filters at the official WordPress developer resources:
https://developer.wordpress.org/plugins/hooks/actions/
https://developer.wordpress.org/plugins/hooks/filters/

There will be more…

Those were some basic tips for you as a WordPress developer, hope you find them useful and helpful.

If you find this article helpful — don’t hesitate to like, subscribe and leave your thoughts in the comments 😊

Read more posts on my Medium blog

Thanks for reading!

Stay safe and peace be with you!