WordPress freelance project example with live completion

By | February 19, 2020

Here is an example of the project which I have got recently, its always a problem for the newbies they don’t know about their expertise and don’t know that either they have the potential to deal with the word press related task or project or not. If not, how they could measure their skills.

This is a WordPress related task and I will try to explain every aspect of this.

Here is a screenshot of the client’s communication regarding the task.

wordpress freelancer client

The client’s requirements are based on the two tasks.

1st: Fix text (jones) size on mobile devices, the text which is appearing on the slider revolution.

revolution slider text issue

2nd: Twitter feeds are already available and we need to add Instagram and Facebook feeds with the help of the same plugin.

social feeds

So, let’s move to the solutions.

While working on the first fix, I have checked the revolution slider and observed that text is not coming from the revolution slider, so now? how to capture and fix it? Is it still possible?

Yes, everything is possible, thinking something different why not we use some jQuery code for this? Because the text is coming from some unknown source, lets write some jQuery for this fix.

Why jQuery for this fix?

jQuery is easy to add and remove the CSS, I generally use jQuery to add and delete CSS dynamically where I get trouble in applying CSS.

Here are the steps I have used for the first task:

I have added a plugin named “Simple Custom CSS and JS  by SilkyPress for adding custom JavaScript of jQuery in the WordPress website I have used jQuery.

I have written a code for detecting the mobile and desktop devices in JavaScript.

Here is code:

 var isMobile = navigator.userAgent.toLowerCase().match(/mobile/i);

if (isMobile) {

 //alert(‘this is mobile ‘);

} else {

 //alert(‘this is desktop ‘);

}

So after writing this code I have put this in the jQuery ready function, WordPress whole layout using jQuery so   when the layout is loaded this code will be executed.

After detecting the mobile device, I have inspected the page through google chrome inspect element for getting the class name of the div in which that text is located, whom we want to make bigger.

After inspecting, I have got a class name and used some jQuery code for capturing the text Html tag, I have added a class in its name “jones”.

Here is the jQuery code:

$(“.tp-static-layer”).find(“span”).addClass(“jones”);

So,I have put above code in the mobile section when mobile device layout is loaded this class is added when the desktop layout is loaded the class will be removed as written in the jQuery code,  and I have already added some CSS for “jones” class, that will be loaded with layout if this class could be found somewhere in the website otherwise this class CSS would be eliminated.

if (isMobile) {

    $(“.tp-static-layer”).find(“span”).addClass(“jones”);

} else {

$(“.tp-static-layer”).find(“span”).removeClass(“jones”);

}

For the second task I have put the APIs of the social accounts and used those shortcodes in the page and the social feeds become started.

 

Task requirements are completed now waiting for the client’s approval.

 

Leave a Reply

Your email address will not be published. Required fields are marked *