A Growing Brigade of WordPress Developers.
It is the fact and known to all users that WordPress was mainly created as a blogging platform so that they can provide a new platform for the bloggers to take their views online and gain some revenue.
As the competition raises the demand for WordPress grows thus over the years, the WordPress platform was considered as a fully functional content management system.
Continue reading
Sometimes we need to add custom data for our posts and pages other than title and content especially when ones become comfortable with WordPress, there is an urge to do something experimenting for exciting features using WordPress custom field. for Suppose you are using Custom Post Types for your book store and want to save the Book price as well. You have added title and description but for price you will add a custom field. Today we are going to gain an understanding of how you can add custom fields via WordPress plugins. In modern WordPress development, these kinds of functional stuff should be done via plugins instead of coding in WordPress themes.
Before moving forward please download the plugin from here. Please open the class file “class_custom_field.php”.
I will explain every code snippet step by step.
function init_customField() {
new customField();
}
The above function is simply getting an instance of the class and returning it.
if ( is_admin() ) {
add_action( 'load-post.php', 'init_customField' );
add_action( 'load-post-new.php', 'init_customField' );
}
This code snippet is saying that when a post is to be edited or a new post is to be made get an instance of “customField” class and getting an instance is of course means to initialize and render the text field in the posting page.
“load-post” and “load-post-new” are two new hooks.
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'add_meta_box' ) );
add_action( 'save_post', array( $this, 'save' ) );
}
Class constructor is adding functions to the hooks for rendering and saving the data.
public function add_meta_box( $post_type ) {
$post_types = array('post', 'page'); //limit meta box to certain post types
if ( in_array( $post_type, $post_types )) {
add_meta_box(
'my_meta_box_name'
,__( 'My Meta Box Headline', 'myplugin_textdomain' )
,array( $this, 'render_meta_box_content' )
,$post_type
);
}
}
The “add_meta_box” is in fact the responsibility to render the text field. The first argument is setting “id“, the second argument is setting title, the third argument is giving the definition that how will it be and the fourth argument is setting the screen is it a “page” or a “post” where this custom field will be rendered on.
public function save( $post_id ) {
//code goes here
}
Inside the “save” function first, we are checking whether “nonce” is set. “nonce” is put in the form for security reasons. You can read about it from here. Then we are verifying whether it is a valid “nonce”. Then simply checking whether the current user is authorized to perform this action. Then we are sanitizing the data and saving or updating the data using “update_post_meta” giving a key. Because with this key we will later retrieve our data.
public function render_meta_box_content( $post ) {
//code goes here
}
Inside “render_meta_box_content” we are generating “nonce”. Then getting the data if it was set using “get_post_meta” function and putting this value in the text field and rendering the text field.
And all done! Adding custom fields to WordPress is like doing some extra coding and in result you get the specific features for a particular post that may need some extra informational data.
Facebook API integration with a site improves your site’s social rank. We can integrate a like button to our website or a comment box, which is quite easy. A bit of a messy job comes when we get a requirement to create an app for a website and then integrate it. There may be many reasons to create an app. May be you want to give the users to signup to your site using their Facebook account or you want to engage more traffic from your social circle to your site/blog using Facebook login.
So today we are going to sum up the tried and tested steps involved in integration of Facebook login to WordPress manually without using any plugin. So let’s begin!
To integrate graph API to WordPress, we first need to create an app on Facebook using developer page. And then start it straight away.
Login to your Facebook account and go to developer page. Then Click on Add New App.
It will open a light box asking you to select the platform. Just select www
Give a name to your app
You can select any type
Stop here, please. Go to your WordPress theme and create a template file, let’s say “fb.php”.
Please get back to your Facebook page and copy this code and paste it into your fb template file. And you can see you have to give your site URL which in my case is localhost/wordpress. After putting your site URL click next.
Then you will see this page, just copy the code and put it into your fb template.
Your template file will look like this.
Now go to your WordPress admin and create a page, let’s say “Facebook”, from the WordPress admin and assign the fb template to this page. Open your page and your page will be looking like this.
So you have done a good job but as you know our objective is still not achieved.
If you go down of developer page you will see these boxes. Let’s integrate login to our site. Click on login box.
It will open a new tab and on that page you will find a complete code for login to put into your facebook template file.
After putting the code, just find this “{your-app-id}” and put your app id. You can get your app id by navigating to this page “My apps“
Save your fb template and reload the page.
Ah, an error, but it was important to show you. See it is saying the URL is mismatching. But what is it about? Now go to “My apps” page and edit your app settings on edit settings page you will see the “App Domains” is empty and you should mentions your app domain over here. And we are using http://localhost/wordpress/facebook so our “App Domain” will be “localhost”. Put “localhost” in the box and click save. Now go to your WordPress page and reload it.
Awesome, now you can see something like this.
There are three things to take care of.
1: Which of the things you are taking from user.
2: User can edit and select which of the things he wants this app to access.
3: Facebook is assuring the user that this app will not put anything on your wall (Unless you give it permissions to do so).
After clicking OK, you will get a “response object” from Facebook. This object will have the whole detail. If you open your browser’s console you will see some sub objects of main object. You can console the whole “response object” to see the whole information it is carrying.
You can put the post request into this block or wherever you need. In our Test example, we are using TestAPI() function which fetches the user information from Facebook and shows you in console.log
"if (response.status === 'connected'){}"
You can make an ajax call at this point and store user information in your WordPress database and create Facebook login user as a WordPress user as well. There should be part 2 of this tutorial which explains that how we make an ajax call and create Facebook login user as WordPress user as well. We will be sharing it soon seeing how much people are interested in it so looking forward to it, and you can ask anything related to integration of Facebook login to WordPress in the comment box, will surely be helpful to all of our great readers!
WordPress is a specially crafted platform to publish content on the web. Many of the big giant content publishers are using WordPress like CNN, NYTimes, etc. You, as a content writer, find WordPress deadly easy and super cool to work on because WordPress provides many customizations to make your content looks good, and also many of us are spending time to add some spice to WordPress. Here I want you to add even more to your content writing experience.
Following are the three most wanted WordPress tricks to make your writing experience easy and even better.
Just open up functions.php of your current theme and put this code in it, but keep in mind if you put this code in your functions.php will only be limited to your current theme. So better to make a plugin.
require( ABSPATH . WPINC . '/pluggable.php' );
function myplugin_get_comment_list_by_user($clauses) {
if (is_admin()) {
global $user_ID, $wpdb;
$clauses['join'] = ",". $wpdb->base_prefix."posts";
$clauses['where'] .= " AND ".$wpdb->base_prefix."posts.post_author = ".$user_ID." AND ".$wpdb->base_prefix."comments.comment_post_ID = ".$wpdb->base_prefix."posts.ID";
};
return $clauses;
};
// ensure that editors and admins can moderate everything
if(!current_user_can('edit_others_posts')) {
add_filter('comments_clauses', 'myplugin_get_comment_list_by_user');
}
As you know the comments are stored in a separate table and are identified by post_id. So, I have just modified the query which is run by WordPress whenever the comments page opened in the admin.
How to set the first image of the post as a featured image?
Sometimes, we need to set our post’s first image as a featured image and WordPress doesn’t give any support for this thing. You can use the following code snippet to get this functionality.
add_filter('the_content', 'set_post_featured_image');
function set_post_featured_image($content) {
global $post;
if (!has_post_thumbnail()) {
$all_attached_images = get_children(array(
'post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order'
));
if ($all_attached_images) {
foreach ($all_attached_images as $attached_image) {
set_post_thumbnail($post->ID, $attached_image->ID);
break;
}
$content = the_post_thumbnail() . $content;
}
}
return $content;
}
I am applying a filter to the contents of the post and the job done.
Having a profile picture on your profile means great credibility and recognition on social networks and other websites, which is usually known as “avatar image”.
WordPress provides its own service know as Gravatar. We will walk you through that how to retrieve your profile image from Gravatar.
WordPress has a built-in function to retrieve an image from Gravatar, this function required two parameters: ID or usre_email of the user and the size of an image.
$user_id = get_the_author_meta('ID');
echo get_avatar($user_id, 80);
If you want to use user email, use get_the_author_meta() function with user_email
$user_id = get_the_author_meta('user_email');
echo get_avatar($user_id, 80);
This will give us an image of 80px.
If you know any other way of doing these tricks for WordPress, let us know in the comments below.
Today, I am going to share with you a tip that how we can make our WordPress plugins are themes more secure. I have seen in my plugins and themes where WordPress developers are not using WordPress nonces even though it is VERY important. If you are working as a WordPress freelancer developer and g custom plugins or themes, I am sure this article is going to be very helpful for you.
WordPress Nonce basically in short is the term used for number used once. It’s a string value, a temporary unique key that is generated by WordPress automatically and acts as a special security token to check whether you are the same person who’s performing an action or someone else while submitting a form, adding a post, deleting a post, etc.
The main purpose of the nonce is to protect your site from malicious hacking attacks such as Cross-Site Request Forgery (CSRF) or sometimes pronounced sea-surf or XSRF, which is used to trick someone to submit a form or click on a link that will cause harm to your site.
It is very simple. As I mentioned earlier that it is generated by WordPress itself and when a form is submitted or a link is clicked, WordPress checks the nonce value and if it matches, you are free to proceed.
A thing to remember, you don’t need to do anything about nonce in those forms or links which are generated by WordPress, like “add post”, “edit post”, but you have to use nonce in your custom build plugins or themes you will create later.
Before we walk you through a complete example of how to implement a nonce in a form or in a URL, lets us understand how the nonce works in WordPress.
There are three steps that we must follow to implement a nonce in WordPress plugin or a theme:
1. How to create a nonce.
2. How to pass a nonce through a Form or URL.
3. How to verify a nonce before doing a specific action.
To create a nonce, there is a function name “wp_create_nonce ($action)”, which generates and returns a unique value based on the current time and the $action.
The “$action” parameter is optional but recommended, $action parameter refers to what will happen.
$nonce= wp_create_nonce('delete-post');
How to pass a nonce in URLs.
<a href="myplugin.php?_wpnonce=<?php echo $nonce; ?>">
How to pass a nonce in Forms.
<form method="post"><?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' );?> <!-- some inputs here ... --> </form>
We use “wp_nonce_field($action,$name)” to pass a nonce through forms. wp_nonce_field() function will generate a hidden input field which stores a nonce value and can be retrieved later on.
The parameter “name_of_my_action” is the context in which you are using the nonce field and “name_of_nonce_field” is any name you want to specify. Default is “_wpnonce”. It’s better to use $action and $name parameter for better security.
After putting it into the form you can get it like this:
if ( isset( $_POST['name_of_nonce_field'] ) &&
wp_verify_nonce( $_POST[‘name_of_nonce_field’], ‘name_of_my_action’ ) ) {
// process form data
} else {
print ‘Sorry, your nonce did not verify. It is a secure WordPress site. go get a coffee !!';
exit;
}
In this example, we are creating a form and an embedded nonce field in it. This form can be used for your contact page or anything you like for your site where you are taking inputs from users.
The HTML code for the form is (notice the wp_nonce_field function):
<form id="form">
<?php wp_nonce_field( 'contact_form_submit', 'cform_generate_nonce' );?>
<label>Name</label> <input type="text" name="name" class="text" id="name"><br>
<label>Email</label> <input type="email" name="email" class="text" id="email"><br>
<label>Subject</label> <input type="text" name="subject" class="text" id="subject"><br>
<label>Message</label><textarea id="message" class="textarea" name="message"></textarea>
<input name="action" type="hidden" value="simple_contact_form_process" />
<input type="submit" name="submit_form" class="button" value="send Message" id="sendmessage">
<div class="formmessage"><p></p></div>
</form>
So, you have your contact form ready and now want to take the data from form inputs and process it. Form Inputs are the doors where mostly malicious attacks happen and hackers run anything they like. So, you should properly sanitize your inputs which are very important for your website security.
Here is how you will verify nonce in your contact form.
<?php
if(isset($_POST['submit_form'])) {
if(!wp_verify_nonce('cform_generate_nonce','contact_form_submit')){
wp_die('Our Site is protected!!');
}else{
// process here your contact form with proper sanitize inputs.
}
}
?>
WordPress nonce is playing a very important role in WordPress security and I recommend it should be implemented in every WordPress plugin and theme, but I see many plugins and themes are not using it. If this article was helpful for you in any way I would love to hear your feedback.