Adnan, Asif, Devin and Matt

WordCamp Beauty through Asian Eyes

Today, I am going to share the experience of attending my first WordCamp. It was my first time in the U.S.A (and the time to Miami obviously). I stayed in the U.S.A for 20 days, traveled to four states, met a lot of great people, and visited a lot of awesome places. 10 days in Florida includes NASA, Universal, Lakes, Springs, Parks, Miami, and a special visit to KeyWest. Kudos to Asif, my buddy who drove me to all the places. I highly appreciate his support for everything he did for me during my trip.

Attending a WordCamp was a dream and when your dream comes true, you feel splendid. I received a comment on FaceBook checking that I am lucky to be there and yes I was lucky to attend this WordCamp.

Continue reading

How to integrate a WordPress blog in your existing website

How To Integrate A WordPress Blog In Your Existing Website?

WordPress is amazing in its nature. You can convert it into anything and integrate it with any PHP website. You can even set the degree of integration. You may only need a few WordPress features when integrating it with your website. For example, you want to display the recent blog posts on your website’s homepage. Your website is in PHP, and a WordPress blog is installed in another folder. In this article, we’ll guide you through the steps to achieve this awesomeness by integrating a WordPress blog into your existing website.

Before starting with the steps to educate yourself on the integration of WordPress Blog in your website, one must know what this web publishing software basically does. And why do you really need to make a WordPress blog after all? So the answer is, why not? As the WordPress blog manages the website content beautifully.  To use this, you don’t need to be a developer or coder. However, for WordPress, there are plenty of auto-installer web hosts that are just one step away and run this easy platform.

So let’s review the suggested steps to integrate a WordPress blog into your existing website and create a beautiful WordPress blog page!

Step1

Let’s assume you already have a site running at http://www.yourwebsite.com/ and you want to start a blog for your Product.

Step2

Create a new subdirectory (folder) at your site and call it ‘blog‘. So you now have an empty sub-directory at http://www.yourwebsite.com/blog/.

Step3

Now, download the WordPress framework and upload all of its files into http://www.yourwebsite.com/blog/ and install WordPress on it. If you don’t know how to install WordPress, please read this tutorial.

So, at this point, you have installed WordPress in the blog directory and want to show the recent blog posts on your website’s homepage.

Step4

You need to add the following code snippet at the start of the home page in which you want to utilize WordPress functions.

<?php 
define('WP_USE_THEMES', false);
require('blog/wp-blog-header.php');
?>

Step5

Then the next important thing is the ‘WordPress loop’. If you’re unfamiliar with the ‘WordPress loop, please read this here.

Put the following code anywhere on your homepage where you want to display the latest posts.

<?php

$number_of_posts = 5;
$args = array( 'numberposts' => $number_of_posts );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_date']."</span> <br>";
echo "<h3>".$recent_post['post_title']."</h3>";
echo  "<p>".$recent_post['post_content']."</p><br><br>";

}

?>

Pretty simple, isn’t it? This way, you can utilize all the functionality of ‘WordPress’, but you should have a basic understanding of how things are done in ‘WordPress’.

If you are having any difficulties while integrating your website with a WordPress blog, please feel free to ask below in the comments section.

Thanks, Good luck!

How To Add a Custom Field via WordPress plugin

How To Add a Custom Field via WordPress plugin?

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.

how to integrate facebook login with wordpress, facebook integration with wordpress

How to Integrate Facebook login to WordPress?

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.

Step 1:

Login to your Facebook account and go to developer page. Then Click on Add New App.

Integrate Facebook Login to WordPress - Add a new App
Integrate Facebook Login to WordPress – Add a new App

Step 2:

It will open a light box asking you to select the platform. Just select www

Integrate Facebook login to WordPress - select website
Integrate Facebook login to WordPress – select website

Step 3:

Give a name to your app

Integrate Facebook login to WordPress - Add name of App
Integrate Facebook login to WordPress – Add name of App

Step 4:

You can select any type

Integrate Facebook login to WordPress - Select type of App
Integrate Facebook login to WordPress – Select type of App

Step 5:

Stop here, please. Go to your WordPress theme and create a template file, let’s say “fb.php”.

Integrate Facebook login to WordPress - Create WordPress template file
Integrate Facebook login to WordPress – Create WordPress template file

Step 6:

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.

Integrate Facebook login to WordPress - Facebook SDK code
Integrate Facebook login to WordPress – Facebook SDK code

Step 7:

Then you will see this page, just copy the code and put it into your fb template.

Integrate Facebook login to WordPress - Facebook HTML5 code
Integrate Facebook login to WordPress – Facebook HTML5 code

Your template file will look like this.

Integrate Facebook login to WordPress - Facebook Template for WordPress
Integrate Facebook login to WordPress – Facebook Template for WordPress

Step 8:

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.

Integrate Facebook login in WordPress - Facebook Page for WordPress
Integrate Facebook login in WordPress – Facebook Page for WordPress

So you have done a good job but as you know our objective is still not achieved.

Step 9:

If you go down of developer page you will see these boxes. Let’s integrate login to our site. Click on login box.

create fb app11
Integrate Facebook login img-10

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.

Facebook Login code for the Web Using the JavaScript SDK
Facebook Login code for the Web Using the JavaScript SDK

Step 10:

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.

create fb app14
Integrate Facebook login img-12

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.

Integrate Facebook login in WordPress - Login now
Integrate Facebook login in WordPress – Login now

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, WordPress development agency

Three Most Wanted Tricks For WordPress Developers

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.

How to restrict the authors to view only the comments which belong to their own posts in the admin area?

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.

How to retrieve your Gravatar image?

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.