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.

Hide Header and Footer In Elementor Within ONE minute

Elementor is awesome. That comes from a user has just begun to use the tool. However, when you start creating a page with Elementor, you may see the default header and footer from your theme. In my case, I use twenty seventeen theme and the editor would look like below. As I am going to create a dedicated page, I would like to hide header and footer in Elementor. What can I do about that?

default page template wordpress

Why does this happen?

Elementor uses the default template file from your theme. In the default template file of most themes, there are header and footer. That’s why you will see the header and footer of your theme in Elementor’s editor. If you deactivate Elementor, you would see the page template at the right sidebar:

Now, as you may guess, the solution would be using a different page template that doesn’t contain your theme’s header and footer. That’s what we are going to do.

How to hide header and footer in Elementor

Update Mar-24-2019

Elementor has enabled default support for this feature. All you need to do is following this picture:

If you still have problem following the method above, let’s continue:

 

Here are what we are going to do:

  • Install a plugin called Blank Slate
  • Go to your page/post created with Elementor
  • Edit its template to use Blank Slate

Let’s go into more details below.

As mentioned above, we need a template file that doesn’t have the theme’s header and footer. If you know a bit of PHP, you can do it easily. However, for people who don’t know code, that would be a difficult task. What we are going to do is simple for everyone. We are going to install a plugin that creates that template for us. The plugin is called Blank Slate.

After installing and activating the plugin, if you go back to edit your page and click on the page template select box, you will see there is a new template file called Blank Slate. That’s what we are going to use. All you need to do next is to click on publish (or save draft) and click on edit with Elementor:

Hide header and footer in Elementor

 

Now, you can see that in Elementor, there isn’t header or footer:

Hide header and footer in Elementor

That’s it! You’ve successfully hidden the header and footer for your Elementor editor. It’s time to create some awesome pages with this page builder. If you enjoy my WordPress tips, don’t forget to share this post.