WordPress
Creating my own Instagram WordPress plugin
I just wrote a simple plugin to load the recent feed from Instagram API. I will add a shortcode “my_instagram” on next post for example.
This plugin is simple, but first thing is you need to register a new app from Instagram, then set it up with your own client ID and Client Secret. Then my plugin will use an authentication method OAuth2 to retrieve an access token, so that can work with Instagram API.
Although the procedure is not very difficult, the plugin probably not that useful in real world situation. First, I think most users just use wordpress for updating news, blogging.. etc may not know what to do with the plugin like setting up an app on Instagram. So, I checked how people doing it with their plugin.
I am not sure I am right, but seem like other plugin’s authentication flow works like this picture.
The Procedure is like this:
1. WP Sites(any site using WordPress) that send a request with App’s Client ID (this ID is somewhere in the plugin) and Redirect URI to Instagram Site for authorising procedure.
2. After authorised by user, Instagram will redirect back to the plugin site with “CODE” parameter. (most likely Plugin Author’s site because only Authors know the Client secret which assigned to their app)
3. Plugin Author’s site will request to Instagram with their own client id, client secret, and “CODE” parameter that received from step 2.
4. If everything is ok, Instagram then will respond back with access_token and other information
5. Plugin Author’s site then will redirect access_token back to the WP Sites.
Every step is not that difficult to implement, I have used WP’s module to mock up a very simple redirect process for another plugin I am writing now. However, seem to me that on step 4, my redirect process can store any access token information that I receive from Instagram(let’s say if you are using my plugin, and go through my redirect process, then I will be able to store your access token). I am not that familier with OAuth2, but I think access token is same as username/password that should keep them safe.. but isn’t it then exposed to the third party??? I know you can revoke your token anytime, but not sure everyone will know how to revoke it except changing the password (changing password will revoke the token)
If I have your access token, does it mean that I am able to act like you on Instagram?
Actually at first I thought step 4 can just redirect the access token back to the WP Sites instead go through the third party, but seem that the redirect URI that setting up with the app is strict, and must match the the request from step 1.
If anyone reading this and know this, please explain to me… Thank you 🙂
Custom Post Type Custom Template ?
Been researching how to create custom template for custom post type in a plugin. This is a note about what i found:
1. can add filter for ‘template_include’ hook, and add a meta box for switching your own custom template (create your own dropdown menu)
For example:
add_filter('template_include', 'template_include_function', 10, 1);
function template_include_function($template) {
global $post;
if ($post->post_type == 'YOUR_CUSTOM_POST_TYPE') {
$postmeta = get_post_meta(...);
...
$template = plugin_dir_path(__FILE__) . YOUR_TEMPLATE_FILE;
...
}
return $template;
}
function template_box() {
add_meta_box(
'template_box',
__('...','...'),
'template_content',
'YOUR TYPE',
'side',
'core'
);
}
function template_content($post) {
$template = get_post_meta(..
?>
<label ...>_e(...);</label>
<select ...">
<option ...>Option 1</option>
<option ...>Option 2</option>
</select>
<?php
}
add_action('add_meta_boxes', 'template_box');
[/php]
then add your own meta box to display this template list. Use action hook 'save_post' to update post meta data for your template selection
2. I have tried to add Page Attributes capability, but it does not show the custom template in the theme. I looked at the code for function page_attributes_meta_box, and found the a condition that will check if post type is 'page', then will show the template. Therefore, it is not gonna call the page_template_dropdown(), and no page template shows up in the admin page.
3. a filter 'page_attributes_dropdown_pages_args' is apply if the custom post type supports hierarchical, so one thing can try is add filter for 'page_attributes_dropdown_pages_args' and add drop down menu that point to your template directory. In your filter function, you can try
[php]
function YOURFUNCTION($dropdown_args, $post) {
if ($post->post_type == 'YOUR CUSTOM POST TYPE') {
...
<select ...>
<?php page_template_dropdown(false); ?>
</select>
...
}
return $dropdown_args; // just return the same dropdown args. don't need to modify
}
This basically will create a drop down menu for all template in your Theme directory (not your plugin). Note that this drop down menu will appear above the Parent drop down menu(for hierarchical setting). This is useful if you have custom post type in your theme and template file within your theme directory.
4. So instead of calling page_template_dropdown(), it is better to add your own template here if you do not want to add extra meta box.
function YOURFUNCTION($dropdown_args, $post) {
if ($post->post_type == 'YOUR CUSTOM POST TYPE') {
...
<select ...>
<option ...> Option 1 </option>
<option ...> Option 2 </option>
</select>
...
}
return $dropdown_args; // just return the same dropdown args. don't need to modify
}
add_filter('page_attributes_dropdown_pages_args', YOURFUNCTION, 10, 2);
Ok, it is not done yet. You add options here, then you also need to add action to ‘save_post’ hook to update the the post meta. the post meta will be used in the filter hook ‘template_include’. (look at step 1)
5. Right now I am studying WP_Theme class get_page_templates() to see how it parses template in the theme directory.
Note: I think create your own meta box for templates for your own custom post type is more appropriated…
jQuery and WP_Ajax_Response
I tried to use WP_Ajax_Response class to respond Ajax request, but then some data wrap with [CDATA], and found that I just can’t use jQuery .text() to grab the data inside that… here is how i resolved this problem
<?xml ....?> <wp_ajax> ... <supplemental> <url><![CDATA[http://.....]]></url> </supplemental> </wp_ajax>
var xml = $.parseXML(response),
imgURL = $(xml).find('supplemental url').text()
first use jQuery function to parse the response, then use jQuery .text() method to retrieve the data within CDATA.
Only include scripts for WordPress custom post type
add_action('admin_print_scripts-post.php', 'Your_Admin_scripts');
add_action('admin_print_scripts-post-new.php', 'Your_Admin_scripts');
function Your_Admin_scripts() {
global $post_type;
if ($post_type!='Your_custom_post_type')
return;
wp_enqueue_script('Your Script','script_url');
...
...
}
Use $post_type to check so the script only include in your custom post type edit page.
