Programming, WordPress

Display first 8 words from the Sentence

My client asked  me to display only 8 words of the long title of the post. So, to fulfill his requirement,  I just count the number of words in  the title and if the title consist of more than 8 words, I extract 8 words from the title and displayed it , otherwise displayed the title as it is.

Steps 1 :   Create function that returns the first 8 words from the title/sentence, place it anywhere in your function.php or helpers.php files

Step 2 : Count the number of words in the title and use the function in step 1, to extract 8 words form the title. If the title has less than 8 words, do nothing just display the title.

Hits: 2

Standard
Programming, WordPress

Translating the month name

For translating the date in a website, we can have different solutions. But here,  I am particularly discussing about find and replace method for date translation.

Lets say we have date in format F j, Y i.e May 7, 2019 where,  Month is in English Langauge but what if you want to dispaly month in spanish or any other languages i.e. maio 7, 2019 ?

Just take care of the following steps and you can achive the translation for Month :

1. Create an array of Months where key is the default month and value is the translation for month.

2. Create function which replaces the default month with the translated month and returns the translated date string

3. Call the created funtion in step 2 and achieve the translation

 

Hits: 5

Standard
Programming, WordPress

HTML 5 Form Validation for Contact Form 7 Form Inputs

By default, CF7 form offers ajax validation for form input fields. We can instantly validate form entires by adding required attribute . For validating particular input field we can use the id of that input field and to validate all the input fields the common class ‘wpcf7-form-control’  is  useful.  With the help of  jQuery, we can add required attribute in the form input and remove the ‘novalidate’ attribute.

 

Hits: 183

Standard
Programming, WordPress

Submitting WordPress Posts from Frontend

There might be a situation where you may want to allow your visitor to submit contents or articles or news of their own. Most of you might be thinking that ‘damn i shall find a plugin for this’, well this is not as hard as you think. You dont’ need to search for plugin. Writing code is easier than finding plugin and customizing it.

Follow the following simple steps ;

    1.  Create a form with necessary fields i.e. title, content and featured image. Additional field could be : visitor first name, last name , email and category. Don’t forget to add nonce field because it protects the forms from certain types of misuse and malicious .

       
    2. Validate the form  fields

       
    3.  If the user exists, get the user id ; if the user doesn’t exist, insert the user in the database and get the id of the inserted user . Note : wp_insert_user() gives the user id of just inserted user

4. Upload the attached file inside the uploads folder and get the id of the attached file .

 

5.   Save the contents including featured image  in the dashboard .  Note : save the contents as a draft so that you can review the post and publish it later.

 

Time for writing the full code :

 

You might not believe, but you have just created the form to  allow visitors to add articles/ news/ posts . And the most important part of this form is , you can customize the form  without any hassle.

Hits: 16

Standard
Filter and Hooks, Programming, WordPress

jQuery ajax filtering posts with checkboxes

Let’s say, I have lists of categories in checkbox and I want to filter posts based on the selected categories. I have three conditions for categories filter :

  1.  I want to check “All” checkbox by default and display all the posts accordingly.
  2.  If I check/select the filter other than “All”, the “All” checkbox should be unchecked & the posts of checked categories should be displayed
  3. If I check “All” categories, other selected categories should be unchecked

I begin…

Firstly, list all active categories associated with the posts

Add jQuery that tricks the checkbox as per requirement…

In the above js code,
1. All the checkbox are selected using querySelectorAll

2. var count = document.querySelectorAll(‘.js-filter-checkbox:checked’).length, gives the number of checked categories.

3. If the checkbox is checked and among the checked categories there is no “All”, “ALL’ is unchecked

if(inputElement.checked && inputElement.value != ‘all’){
document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = false;
}

4. If one of the checked category is “All”,  all the other checked categories are unchecked

if(inputElement.checked && inputElement.value == ‘all’){
document.querySelectorAll(‘.js-filter-checkbox:not([value=”all”])’).forEach(function(item){
item.checked = false;
});
}

5. If non of the categories is checked, “All’ category is checked
if(count == 0) document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = true;

On page load “All” categories is checked so that all the posts are displayed by default

Ajax code is added to filter the posts based on checked categories

Hook that handles our ajax request is added on function.php  :

Finally, posts are filtered based on the selected categories.

Hits: 829

Standard