How To Quickly Add Child Categories In WordPress

Adding child category and blog’s hierachy is as tedious task if you have many categories to manage. My website has a lot of categories too so I think there must be a better way to add child categories to current category.

So, I decided to make a plugin to solve this problem. It is a very simple plugin that help you quickly create child categories. Initially, it supports WordPress’ categories only. Now, WooCommerce categories are also supported.

Since the code is very simple, you can implement the functions without installing a plugin. I’ll provide the code in the section 2 of this post.

Quickly adding child categories using plugin

You can download the plugin below:

 

As you can see, when you click on the + child button, the Parent category select box is automatically changed to the category you select. Then, you can simply go ahead and details for the child category and click on add new category button as usual.

I’m submitting the plugin to WordPress.org so you can download the plugin directly from that site. I also added support for WooCommerce categories so you can now quickly add child categories to current WooCommerce categories too.

Quickly adding child categories WITHOUT using plugin

If you don’t want to use the plugin, you can paste the code below in the functions.php file of your child theme. Click here if you don’t have one and wonder how to create a child theme in WordPress.

 

add_filter('category_row_actions', 'binary_carpenter_quick_add_child_add_option', 10, 2);
add_filter('product_cat_row_actions', 'binary_carpenter_quick_add_child_add_option', 10, 2);
add_action('admin_print_scripts', 'binary_carpenter_quick_add_child_print_js', 10, 2);

function binary_carpenter_quick_add_child_print_js()
{

    global $current_screen;

        if ($current_screen->id === 'edit-category' || $current_screen->id === 'edit-product_cat')
        { ?>
            <script>

                document.addEventListener("DOMContentLoaded", function(event) {

                    var add_child_buttons = document.getElementsByClassName('bcqac-item');

                    for (var i = 0; i < add_child_buttons.length; i++)
                    {
                        add_child_buttons[i].addEventListener('click', function(e){
                            e.preventDefault();
                            //set the parent category to the current parent category
                            var parent_id = this.getAttribute('data-parent-id');
                            var parent_select = document.getElementById("parent");
                            parent_select.value = parent_id;

                        });
                    }

                });



            </script>
        <?php }
}

function binary_carpenter_quick_add_child_add_option($actions, $tag)
{
  $actions['add_child'] = sprintf(
    '<a href="#" data-parent-id="%s" class="bcqac-item" >%s</a>',
    $tag->term_id,
    /* translators: %s: taxonomy term name */
    __( '+ child' )
  );

  return $actions;
}

Save the functions.php file and you are done. Now, you can quickly add child categories in WordPress and WooCommerce.

Conclusion

I can now quickly create child category in WordPress and WooCommerce. As I’m creating the hierarchy for this blog, this tool becomes very handy. If you have any suggestions, please let me know in the comment section below.

How To Change Link Color in WordPress

Your WordPress site’s link color is defined by the theme you use. If the theme doesn’t specify a rule for link color, then the default color by the browser is applied. As a rule of thumb, link should be styled in a way that visitors know that is a link(blue color, cursor changed to a hand when hover on it). However, there are times theme author uses a different color that makes the links look strange.

Then, you wonder, how can you change link color in WordPress?

The answer may surprise you because it’s fairly easy.

Do you know CSS?

Knowing CSS, even at the very basic level can be super helpful when you want to customize your site. Most of WordPress themes nowadays provide a section call Additional CSS under Apperance->Customize so you can add your own styling. So, if you know how to write CSS, you can easily edit anything related to style on your site.

But if you don’t know CSS, don’t worry because I’ll walk you through.

Here are the steps you need to do to change link color in WordPress

  1. Find the color you want to use as link color
  2. Find the selector of the link on your site
  3. Write the rule in Additional CSS box
  4. Apply the changes and see the effect

Now, let’s get started

Step by step to change WordPress link color

Find the color you want to use as link color

The first step is to get the code of the color you want to use. If you go to google and search for color picker, chances are you’ll see one provided by Google:

color picker by google

This is a good one. You simply drag the sider at the bottom to get the to the base color (Blue for example) and then position the circle to pick the exact color you want to use.

When you are happy with your selection, let’s look at the left and see the string that begins with the # sign.

That’s your color code.

In my case, my color code is #5495ff

get the color code from color picker

Find the selector of the link on your site

The next step is to find the selector of links on your site. Normally, the link tag starts with <a. You may be tempted to use a as the selector as in this example:

a {
    color: #5495ff
}

It may or may not work depends on the theme you are using. To increase the chance of our color is applied to the link, we need to add a bit more specificity.

Now, go to your site, find any link and right click on it, select Inspect (I’m using Chrome but you can use Firefox too).

inspect a link

Depends on your browser settings, you’ll see a new window appears either at the bottom of the browser or at the right side.

Let’s look at the window:

find the selector for link in wordpress

As you can see, we have the link element starts with <a here. You’ll also notice that this one is the child of an element with and ID named “secondary”. In addition, the div with the ID secondary is the child of another div with class “container”.

So, to apply the color above to all links in the div with “secondary” ID, we can write the rule as follow:

.container #secondary a { 
    color: #5495ff 
}

Write the rule in Additional CSS box

Now, let’s go to Appearance->Customize->Additional CSS and put the code above at the bottom of the custom css box:

apply the change to the wordpress link color

As you can see, the moment I pasted the code, the color of the links on the sidebar changed to blue.

You still need to click on publish to make the change permanent.

Conclusion

As you can see, change link color in WordPress is very simple. You still need to understand basic HTML and CSS to do so. If you need assistance, please let me know.