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: 18

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: 989

Standard