How To Enqueue JavaScript in Footer of WordPress Theme

If you are looking for something which will help you to load or enqueue the JavaScript in Footer of WordPress theme then this post can help you out.

You know its a good practice to load all of your theme’s CSS (Cascading Style Sheet) in the header while all the JS (JavaScript) in the footer. Some call it the golden rule.

But its true that adding JavaScript to the Theme’s Footer can dramatically help to improve the page speed. Lets see how to do that –

First we will create a function, understand it and then make the necessary changes to make it work.

#1) Creating A Function

Go to your theme’s functions.php file . It can be accessed by browsing through Admin Dashboard > Appearance > Editor > Functions.php. Inside this file add the following piece of code.

#2) Understanding The Function

We have created a function name my_scripts_method. When this function is called, it will execute two statements inside it which are nothing but wp_enqueue_script() functions.

First statement adds myscript1.js file inside the header of your WordPress theme.

While the Second statement adds myscript2.js file inside the footer of your WordPress theme.

Now you can skip to 3rd point if you don’t want additional info –

The wp_enqueue_script() function has 5 parameters which are name, path_to_file, depends_on_which_script, version, header_or_footer.

In first function we have only four parameters and since the last parameter is missing, its assumed false by default. If the last parameter is false then JavaScript will be loaded inside the header. But if the last parameter (5th parameter) is true then JavaScript is loaded in footer.

#3) Modifying The Function

In the code given above, you have to just replace myscript1 and myscript2 with your desired JavaScript file name. Also note that you have to place the file inside the your_theme/js folder.

If your theme name is XYZ then you will have to place or upload JavaScript at –

yourdomain/wp-content/themes/XYZ/js/

And of course, save the functions.php file after adding the code.

I hope this helps. For more amazing posts do subscribe to blog feed.

How To Create Monthly Archives Page In WordPress

A monthly archives page can be very useful for blog visitors. In this post i’ll show you how to create monthly archives page in WordPress.

First of all, do you know what is monthly archives? Archives are the records of all your blog posts, so monthly archives is basically a record of all your blog posts which are sorted according to the month in which they are posted.

Creating monthly archives includes steps like creating a page template for WordPress, adding some PHP code in this template, uploading this template to the server and finally setting up the page in WordPress Admin Dashboard. So lets see how to do that –

Note – I am going to perform all these steps on Twenty Eleven WordPress Theme. If you have any problem with any step then feel free to comment on this thread, I will try to help you.

#1 – Find the Text Area Class or Id of your Theme

Th first step is all about finding the id or class of your blog post text area. In this case, we found class=entry-content and we will use it in the next step.

#2 – A Bit Of Coding

Given below is the code to display monthly archives of all blog posts. You can see i am using class=entry-content in this code. So if your text area class is different, you have to replace class=entry-content with your theme’s respective class.

Also you can change header from H2 to H1 or H3 according to your wish.

Just copy the code given above, paste it in a notepad file. Save the file as Archive-Page.php

Then Copy this file or Upload this file inside the WordPress theme folder

wp-content/themes/your-theme-name

In this case i am moving the file inside

wp-content/themes/twentyeleven

and the final target of file will be

wp-content/themes/twentyeleven/archive-page.php

#3 – Setting up Archive Page using Admin Dashboard

  • Login to your WordPress Blog.
  • Go in WordPress Administrators Dashboard.
  • Click on Pages > Add new
  • Give Title as Archives
  • And to the right side, Inside Page attributes, you will find –

Create Monthly Archives Page In WordPress

  • Select Archives – Page and Publish the page.
  • Click on View Page Button.

The Archives Page is ready. Check the image below –

archives page wordpress

It might look different in your WordPress theme. But you can stylize and fix it using simple CSS. So i hope this post helps you. And for more awesome stuff, Subscribe to blog feed.

How To Find Class Or ID of Text Area In WordPress Theme

Sometimes you might need to find the class or ID of text area in WordPress Theme for adding new snippets of code inside the text area or for modifying the look of text area.

This is actually very simple and total newbie kind of stuff. But its very helpful for people who want to develop their blog and learn more about WordPress.

With the help of this post you can determine the division of text area. Also you can determine the attributes (i.e class and id) of the division in which your text is placed.

Note – I am performing all the steps given below on Twenty Eleven WordPress Theme. 

  • To find the text area class, Just open any blog post in Google Chrome.
  • Select any Text Content inside the Blog Post.
  • Right Click and hit Inspect Element

division with class entry content twenty eleven theme

In the image above i have selected ‘Welcome to WordPress’ text inside a blog post. Then performed Inspect Element on this text, which makes the developer tools pop up from the bottom.

  • You can see the Paragraph Tag ( <p> </p> ) are inside a division ( <div> )
  • And the division has attribute of class=entry-content.

This might be different for your theme, for example –

  1. id=entry or class=entry
  2. id=post-area or class=post-area
  3. id=content-area or class=content-area

So that’s how you can find class or id of the text area division. And once you have found it, you can use it to develop a custom page template like monthly archives page or category wise archives page, etc.

Next Post – How To Create Monthly Archives Page In WordPress