Hello everyone, today I will teach you how to hide any element at a specific time or show something for a while on your WordPress website. Firstly I needed to appear a countdown after loading a page of my other website. I used a gif image as a countdown. So it was repeating again and again even after the count was over. That’s why I wanted to hide it after the countdown was over. Then I tried to show some links on the same page after the countdown without redirecting to any page. I thought that it would bring some more beauty to my webpage, and on the other hand, it would save some mobile data of the viewers that were going to waste by loading another webpage.
Then I started to find solutions for all those problems. Can you imagine that I could solve all those problems and fulfill my needs as I wanted only from a WordPress plugin? From here, I’m going to explain everything from the part of installing that plugin. So let’s get started.
What is that plugin?
It’s a plugin called “Timed Content.” This plugin is tiny in size, but if we consider the work, it is fantastic. You can see the icon of it consists of a white color clock and a green color background. When installing this plugin, don’t forget to consider it to confirm whether you are installing the correct plugin or not. It has 8000+ active installations at the time of writing this article. Now let’s move into the installing part.
How to install?
I’m going to explain to you how to install this plugin step by step. So you can do it easily by following those steps.
Firstly hover on Plugins and click on Add New. It will redirect you to a page as below.
Now click inside the search box on the right side.
Then type as “Timed Content” inside that search box. Now you will see the logo of the Timed Content plugin as the first search result.
Just hit on that Install Now button to install this plugin. There will be shown “installing” for a few seconds. Then a blue color activates button will be appeared to activate this plugin.
Now click on that “Activate” button. After that, you will be redirected to the installed plugin page. Just close it because there is no settings page of this plugin that you can access from there. Alright, we have successfully installed and activated that plugin.
How to use it?
Now let’s create a new page to check whether our magic happens or not.
For that, hover on “Pages” and click on the “Add new” button.
Our newly created page will look like this. Now add a title to our page and insert some elements.
Alright, I added “Fastechie” as the title of our page. And also, you can see that I have added three more gif images and two links to our page. I think that you may have an idea of what we’re going to do so far.
The thing I’m going to do is arrange our page to show the “Please Wait” GIF first to the ones who come to our page, and then the countdown gif should appear after 3 seconds. Immediately after the countdown comes to number 0, both of them should have vanished. After that, the “Generating Links” gif should appear for 3 seconds, and after the disappearing of it, the links we already added should appear. From here, let’s see how to do it step by step.
Add shortcodes.
Now click on a + mark to add a block to our page. Then type as “classic” and click on the Classic icon. You can get an idea about how to do it from the above gif image.
After that, you may see a lot of icons. You should click on the “Add Timed Content shortcodes” icon out of those icons. After that, a small window will pop up automatically.
If we want to show one element or many after a specific time, we should put a tick in the box in front of the “Show” option. If we want to hide one element or many after a particular time, we should put a tick in the box in front of the “Hide” option.
Timing
In my case, I added tick marks to both of them because I want to appear the countdown gif after 3 seconds, and it should disappear after the countdown is over. When you use both these options, don’t forget to calculate the time you want to hide by adding the time you want to show. Otherwise, it will disappear before the time that you want to hide it.
If we consider the time that I have added to the Hide option time, I wanted to hide the countdown gif after 11 seconds from when it appears. So that’s why I input 14 seconds as the Hide option time,
Now click on the insert button.
The code that we inserted will be looked like as shown in the above image.
You can put that shortcode above the countdown gif by just pressing the up arrow button.
The shortcode highlighted in green in the above image is the closing tag of our timed content shortcode.
We should add another block after the element we want to show or hide by clicking on that + mark. Then browse for classic and click on it as we did already.
Now cut and paste the closing part of that tag from the shortcode that we inserted already. Alright, let’s check it’s working or not for the countdown gif image.
You can see that it’s working as we wanted.
I’m not going to explain step by step adding those shortcodes to the other elements we already added to our page. You can add them by yourself, the same as added to the countdown gif. However, I think that you can find all the shortcodes that I have added to the elements that we used on our page one by one from the images below.
Shortcode for countdown gif
Shortcode for Please Wait gif
Shortcode for Generating links gif
Shortcode for URLs
Final result
Let’s take a look at the final result.
Conclusion
When using this plugin for the first time, sometimes you may feel like a boring thing. But when you see the final result, you will never feel it again. You can surprise your viewers by using timed content too. On the other hand, It can be a reason to increase the website traffic. See you guys from the next post. Take care!