WordPress Plugin: Hungred Feature Post List

Hungred Feature Post list is a WordPress plugin that is created to help WordPress users to feature their post easier. Although there are many featuring post plugin in the market right now. They all seems a bit outdated and troublesome to use. Therefore, i created a plugin for usage and hopefully people appreciate it.

Introduction of Hungred Feature Post List

This is similar to recent post embedded in WordPress. The only differences is that this come with a control panel where you can control the following stuff. *UPDATE v2 which also allows multiple feature for each widget!!!*

1. number of feature
2. CSS class on the feature container
3. CSS class on the feature widget
4. Feature type available, 'selected only', 'random only' and 'both
5. Table that shows all the selected feature post

It also come with a widget that allow you to customize the placement of the feature post

Features

Once you installed the plugin you will see an additional option in your setting bar, hungred feature post list. Once you clicked on it, you will enter to the admin page of this plugin as shown below,
hfpl-admin-panel
Basically, the image speaks for itself. But i will kindly explain some of the options above.

  • Feature Header: the header name of the widget
  • Feature HClass: the header css class name
  • Feature WClass: the widget css class name
  • Feature Number: the number of feature post you want
  • feature type: it can be random, selected or both.
  • table below: the table below shows you the selected post to be featured by you

In order to active this plugin, you will need to go to the appearance section and clicked on 'widget' in the widget panel you will see a new panel as shown below,
hfpl-widget
drag this into your side bar and it will be activated.

*UPDATES*

For v2, you will need to configure each widget so that you have multiple feature widget for different post.

hungred-feature-post-list-widget

So, how do you feature your post? You can try to select some of the post to be featured on your page or let it randomly featured itself. By default, this is both made available. (both option on 'feature type' in the admin panel) You can select to feature a post by going into any post to edit and you will see an additional container on the far right of the page.
hfpl-post-page
Basically, you just have to tick to make it as featured post. You can click the link to return to the admin page to check out all your feature post that you have selected. However, only post that are published can be featured!

*UPDATES*

For v2.0, you will see an additional select box which required you to select the widget you wished to feature this post to. Something like this.

hungred-feature-post-list

Credit

Thanks to Michael Dalmer from http://massage.dk for the donation to this plugin development and release v2 (multiple featuring feature) to the public!

Demo

The feature post on this site is using this plugin. Try it. It is far better than most of the feature post plugin.

Known Issues

Here are the known issues on the plugin,

  • Currently no report of bug

Support and Bug Report

  1. Any bug report or enhancement please go to hungred.com contact me section for better responsiveness. You may also comment below and hopefully it won't be covered away
  2. new enhancements will be coming along ( sorting, etc.)
  3. maintenance will definitely be provided
  4. any question feel free to ask i will try my best to respond asap
  5. any other instruction you would like to know regarding the use of the plugin, please let me know.
  6. Please read the FAQ section of the readme.txt file in the plugin for any doubts. ( a lot of Q n A )
  7. The changelog can be viewed on the readme.txt file too.
  8. Stable version is v1.0.0

Files and Last Note

You can download the file at

  • Please proceed to WordPress to download the latest version
  • Current version v2.0.0
  • Article Last update: 12 Auguest 2010. Please refer to the change log on readme.txt (in the plugin) for more information

if my countless days and nights working on this plugin helps you, you can buy me a coffee! You can also support this plugin development by using the donate button below. Lastly, please share it with all the WordPress users if you find this useful to them and you can should your appreciation by linking us back or just say a thank you if you can 🙂

Click here to lend your support to: Support Hungred Feature Post List and make a donation at www.pledgie.com !

Tutorial: How to get image path on a post in WordPress efficiently

This is something that WordPress currently doesn't support yet. You will face the problem of retrieving image on a particular post on the loop while you are working on WordPress theme or plugin. WordPress doesn't provides you with a method that you can use to retrieve the images on the post and you would have to search all over the internet to find someone sharing their secret with you. Thus, rather than using a complex or methods built by others, i personally have a much simple and efficient way of doing this.

The Problem

I wanted to retrieve all images on a particular post under a category and make it into a gallery. However, WordPress doesn't provides such method. Furthermore, the methods provide by others seems to complex this particular function. I want a simple and efficient way of doing this. Not a redundant one.

The Solution

The best way is to look into the core of PHP and search for a particular function that do this automatically. I search quite long and finally found preg_match_all from PHP core build. However, it return the number of match element instead of the result of the URL! But if you read closely it can also retrieve the matched result. So, how do you retrieve the images? Answer is regular expression! What i did was as follow,

$content = get_the_content();
preg_match_all('/src=\"https?:\/\/[\S\w]+\"/i', $content, $matches, PREG_SET_ORDER);
foreach($matches as $e)
{
	echo '<div class="slideshow_box"><img width="106px" '.$e[0].'/></div>';
}

Basically, i retrieve the content using WordPress method 'get_the_content()'. Using the preg_match_all PHP function i placed a regular expression that will retrieve all string that start with 'src="' and end with a single '"' quote symbol. You can read more on regular expression on Google (although until now i still can't find a real good reference). it will return the number of match result normally but with the additional variable, $matches which store all matched string, we can easily get all images on a post in WordPress without building additional big function to do this. You can remove 'src=' to retrieve something like 'www.hungred.com' instead of 'src="www.hungred.com' but if you know regular expression better than i do, this will easily be a piece of cake for you.

The Conclusion

This may seems to be an obvious thing to do. But you may be surprise after doing some Google search that many people actually built up function just to accomplished this and no one is sharing such sweet method with you! This is just to write out to help others who are still searching for a better solution than looking at complex method created by others. Hope it help.

Tutorial: How to access WordPress plugin Subversion repository

This article is dedicated for WordPress developers who has never used Subversion before and wanted to release their plugin to the public. Once you have submitted a form to WordPress. They will reply you with a email that contains your WordPress Subversion repository link. You do not have any knowledge of WordPress Subversion repository and don't know where to upload your new WordPress plugin to share with the public. You started searching for a solution around the internet for Solution without having any luck. Sad. Well, i go through that because i am those confuse people around the world who can't just read and read the whole article written with pure English. So here, some image picture for you to learn to access WordPress plugin Subversion repository. You can also read the whole Subversion book given by WordPress tutorial in command line.

Requirement to access WordPress Subversion

There are two ways of accessing WordPress plugin Subversion repository. The first one will be using pure command line instruction and the other way is to have a Subversion Client. I will show you the easy way to make life easier (the client is built for this purpose). Look at the picture below on Subversion website where all Subversion Client exist for different platform.
subversion-client-location Download one of them depending on your platform and installed it to your system.

Working with Subversion Client

For this article, i will use TortoiseSVN for Windows users. You will have to fire up the installed TortoiseSVN on your PC and it will show you something like that below,
tortoise-alert

The application is informing you this is not the way to use Subversion repository. The correct way is to find the folder you wish to upload right-click it and select the application from the menu as shown below,

import-subversion

You can use the import function shown above to import straight to your Subversion repository or clicked on Repo-browser to upload them one by one. After you have done that just follow the instruction given by WordPress on where to upload the respective files to and you are done. Wait around 15--20min before it will show up on WordPress plugin search functionality. After this, use that particular folder to make your changes and work on your plugin in the future. After every changes you can just clicked on the same folder and pressed commit. If anything happen you can revert back your version from your previous committed version to see what you have changed. After you have all done with the new version do the same by copying to the Tag folder. Remember the to update the Stable tag in your readme.txt to reflect the changes.

P.S: you will only need to upload once in trunk and copy those files to tag/x.x.x.x to reflect the current version to your users. trunk is the version you will be working on and tag will be the one that inform others about your latest fixed/update on your plugin

WordPress Plugin: Hungred Post Thumbnail

Finally, Hungred Post Thumbnail has been completed! This thumbnail is currently LIVE on Hungred.com and 1sitedaily.com. Originally, i wanted to showcase this plugin in a video but I really could not find a free and powerful one so you will have to bear with me until I find a suitable one. But in the meantime the plugin features can be seen below:

About the plugin

This plugin provides you with customization for your own WordPress theme without affecting your overall layout. There are options in the setting section that allows you to fully customize it for your needs. I understand that this plugin is for people who might not have any programming knowledge and would still like to customize thumbnails for their own needs without doing much of the work like resizing, CSS, HTML, WordPress codes, etc. ( i too do not wish to go through these each and every time!) and people who have already established a site with many posts but did not integrate such features in the beginning. Furthermore, the existing post thumbnails does not really suit my needs. Therefore, i created this plugin to help myself and distribute it out to you guys in the hope that it will be of good use.

This plugin is designed for hungred.com and for people who are facing the same problem. Basically it can be broken down into the following points:

  1. Sites that have many posts but do not have any thumbnail features available
  2. Sites that have just started and would like to have thumbnail capabilities
  3. People who are lazy to continously upload thumbnails with each post
  4. People who do not want to deal with codes and just the interface itself
  5. A Thumbnail Plugin that can satisfy at least a basic need of resizing the image size to fit their own needs
  6. Provides uploading capabilities without posting out to the public until the publish or update  button is clicked
  7. A Basic Image Management System that can keep track of the images that have been uploaded
  8. Provides random thumbnail features to their posts
  9. Global size for all thumbnails
  10. Updated and maintained
  11. Cross browser capability
  12. Powerful.

This plugin has been tested with the following browsers:

  • Mozilla Firefox 3.0.11
  • Internet Explorer 7.0.6001.18000
  • Opera 9.64
  • Chrome 2.0.172.33
  • Safari 4

Features of Hungred Post Thumbnail

There are quite a number of features available in Hungred Post Thumbnail ever since my tester has been constantly giving me feedback on the plugin on both possible enhancements and bugs. You will see the following page on the setting section in the WordPress Administration panel.

There are three sections altogether in the admin page of Hungred Post Thumbnail; Post Setting, File management and Upload Section as shown below.

hungred-post-thumbnail-wordpress-plugin-admin-panel-settings

In the Post setting the options available are describe below:

  • Thumbnail Width: width of the image, changing this will resize your image
  • Thumbnail Height: height of the image, changing this will resize your image
  • Thumbnail Space: border size of the around image
  • Thumbnail Space Color: background color around the space visible to the user
  • Thumbnail Space Border Color: border color around the image
  • Thumbnail Gap: margin or distance between the image and the border
  • Thumbnail Location: location is the position of the thumbnail on the main page of your site. Available position are top,left and right. Now Random added on v1.2.4
  • Thumbnail Must Exist: this option specifies when a thumbnail must exist. The available options are excerpt only, more tag only, both and disabled. excerpt and more tag only display the thumbnail only when there is an excerpt and more tag provided respectively. Both will display the thumbnail whenever it sees excerpt or more tag. Lastly, disabled will disable the thumbnail from being displayed on the page.
  • Thumbnail Default Exist: this option specifies whether a default image can be used when a thumbnail is not uploaded. Options are YES or NO
  • Thumbnail Resize All: this option will resize all your uploaded images via Hungred Post Thumbnail into the newly assigned width and height. Options are YES or NO. If yes is clicked all image will be resized to the newly assigned width and height and resolution may be lost especially when a smaller image is resized to a larger one. (larger to smaller no effect) If a no is clicked, all existing image will remain as it is only the new uploaded images that will be resized to the new width and height. (old image remain the same size)
  • Thumbnail Link To Post: this option allows users to choose whether they wish to have an anchor or link to the original post via the image. Options are YES or NO
  • Thumbnail Keep Original: this option will help keep your original files so that upon resizing your image, the quality of your picture will remain good. Options are YES or NO
  • Thumbnail on RSS: this option allows you to have thumbnails on RSS! The options are YES or NO.
  • Thumbnail Default Display: This feature is the most interesting part which makes Hungred Post thumbnail powerful. There are three options altogether, single, random and smart. These are the methods available to display your thumbnail when theree are NO file uploaded. Once a file has uploaded it will use the uploaded images instead of the methods defined here. 'Single' method uses the default image display on the right side of the admin panel. 'Random' method will randomly display image when it doesn't see any upload file for the post uniquely. 'Smart' method will search for keywords in the file seperated by '-' symbol and compare against the category and topic of post to determine whether the image is suitable to display for that post. If nothing can be found it will look for images that has the prefix of 'hpt_' which are usually globally acceptable images. This is also displayed uniquely per post. 'advance' is being added on version 1.4.0 onwards. 'Advance' is an improvement of 'Smart' display type which uses score to try and display the most appropriate thumbnail. The differences between 'Advance' and 'Smart' is that 'Advance' will take up more resources than 'Smart' which simple just take 1 keyword into consideration while 'Advance' takes in all the keywords into consideration. Added first image mode upon 2.0
  • Thumbnail Use Inner Style added on version 2.0 which disable the inline style

The above setting will affect your overall image display which you can customize to fulfill your need. The more important one has been placed with JavaScript to double confirm with you. Please take note that if you turn off your backup original setting, the resizing will take the current size image which might affect your overall resolution! But if you would like to save space and keep your hosting plan usage space low, you may turn it off but try not to resize upwards as downwards seems alright. Example, 500x500 when resized to 300x300 is fine but when resizing from 300x300 to 500x500 you will see a drop in quality.

If the resize is set to 'YES', the process may take a 40-50sec to resize 500 images. Depending on how large your image base is in Hungred Thumbnail Post, it may take longer. However, 500 images have been tested with a 512kb connection which only takes around 40-50 sec. Please take note that your original image should, at best, have a smaller size than 1MB or 100kb to optimize the resizing process and prevent out of memory problems in PHP.

In the case when you want to refer back to the original setting,

  • Thumbnail Width: 250
  • Thumbnail Height: 250
  • Thumbnail Space: 1
  • Thumbnail Space Color: #FFFFFF
  • Thumbnail Space Border Color: #CCCCCC
  • Thumbnail Gap: 5
  • Thumbnail Default Image: default.png
  • Thumbnail Loading Image: loading.png
  • Thumbnail Location: LEFT
  • Thumbnail Must Exist: BOTH
  • Thumbnail Default Exist: YES
  • Thumbnail Default Display: Random
  • Thumbnail on RSS: YES
  • Thumbnail Link To Post: YES
  • Thumbnail Resize All: YES
  • Thumbnail Keep Original: YES

hungred-post-thumbnail-wordpress-plugin-admin-panel-upload

The upload section will look like this and contains 4 upload bars.

  • Thumbnail Default Image: upload function to change the default image if no image is attached. png, gif, jpg, jpeg are allowed only.preview is shown on the right hand side
  • Thumbnail Loading Image: loading image is the image shown when the user upload an image on the post page. preview is shown beside the upload box. only gif is allowed.
  • Thumbnail Random Image: this is the upload bar for random images when you select the random method as default image. Please name your files with keywords seperated with - symbols to use the smart method in the future.
  • Thumbnail Norma Random Image: this upload bar is also for random images but it will append 'hpt_'  on your upload image to define it as a normal image if smart algorithm cannot find unique good match for your post.

Finally, the file management system was created to help manage your random image files which can be seen below,

hungred-post-thumbnail-wordpress-plugin-admin-panel-file-management

It will provide you with the capability to rename and delete your random image files in order to fit your WordPress theme and category. For example, jQuery and JavaScript is not within your blog scope and you might wish to delete it. Images that are named default (with the 'hpt_' prefix) might be change to non default. You can view the name of each file by placing your mouse on top of the image and a small box will pop out with the name of the image. Below shows the simple image management in Hungred Post Thumbnail,

hungred-post-thumbnail-wordpress-plugin-admin-panel-file-management-2

After an image was clicked,

hungred-post-thumbnail-wordpress-plugin-admin-panel-file-management-3

v1.3.0 multiple upload bar added into file management system!
demo

The other new thing you should have see if you installed Hungred Post Thumbnail is the new upload section in the post page.

hungred-thumbnail-post-page

This is fairly simple to use, if you have uploaded an image, it will show below the draft word and an alert box will appear before to indicate it has been completed (the button will be disable when an upload is occurring and enable when it is ready).

upload-complete

And you will see something like this when it is done.

after-upload-complete

Please take note that unless you have published your post, the thumbnail will not be shown to the public. If a thumbnail has been published to the public, a new picture will be shown below the 'Live image' word as shown below. But if the post does not contains a more tag or there are no excerpt, you won't see any thumbnail but the whole article instead (default by WordPress)

published-image

Once the post has been published or updated, the image will be shown!

test-site-result

Notice that this is a test site for my plugin. So the words are a bit random. Nonetheless, you can visit the main page of hungred.com to see the result of this plugin! The above image are the default one for more tag. If neither more tag nor excerpt exist in your theme, no thumbnail will be shown.

Additional Information

Here are additional information you might like to know about the plugin.

  • Only Administrator are allowed to enter Hungred Post Thumbnail settings and file management.
  • Uploaded images from post page will be removed when new image is uploaded
  • Only post with thumbnail that are published will be seen by visitors
  • published thumbnail cannot be deleted but can be replace by uploading a new image ( will update this upon enhancement)
  • Image will only resize all when width or height changes in the admin panel
  • upon delete of a post, every image and data related to that post will be deleted
  • default image will not be resized when a group of image is resized since we don't keep backup for it
  • loading image will never be resized
  • if original image was not found/saved, the current image will be used for resizing
  • In order to use smart method, images must have '-' symbols with every keywords. This is also to promote your site for SEO purposes in order for search engine to understand your image
  • This plugin has been tuned for SEO purposes on version 1.31 onwards
  • Multiple Upload has been added to file management system
  • Please update to version 1.5.0 and above if you are using WordPress 2.8. Please refer to Prevent WordPress Plugin Update From Deleting Important Folder In Your Plugin on the changes of WordPress 2.8

How to Install Hungred Post Thumbnail

All WordPress Plugins install the same way.

  1. Download the latest version of the Hungred Post Thumbnail WordPress Plugin to your computer.
  2. With an FTP program, access your site’s server.
  3. Upload (copy) the Plugin file(s) or folder to the /wp-content/plugins folder.
  4. In your WordPress Administration Panels, click on Plugins from the menu.
  5. You should see your Hungred Post Thumbnal Plugin listed. If not, with your FTP program, check the folder to see if it is installed. If it isn’t, upload the file(s) again. If it is, delete the files and upload them again.
  6. To turn the WordPress Plugin on, click Activate which is located around the Hungred Post Thumbnail Plugin.
  7. Check your Administration Panels or WordPress blog to see if the Plugin is working.

The other way is to search for Hungred Post Thumbnail on WordPress Administration Panel

  1. Go to Plugin on the menu
  2. Click on 'Add New' (for WordPress v2.8) or look for something similar that allow you to search for Plugin using WordPress Administration Panel (its a link for older version). You should see something like this,
  3. Install-Plugin-In-Wordpress
  4. on the search bar type hungred post thumbnail and you should find it
  5. Click on install on the far right and a pop out box will appear.
  6. Click on install now with the red bar  and go to your WordPress Plugin section and click activate
  7. Check your Administration Panels or WordPress blog to see if the Plugin is working.

How to use Hungred Post Thumbnail

1. Activate the plugin
activate-hungred-post-thumbnail
2. Go to the File Management on Hungred Post Thumbnail Administration section
hungred-post-thumbnail-wordpress-plugin-admin-panel-file-management
3. Remove the default image files that you do not need
hungred-post-thumbnail-wordpress-plugin-admin-panel-file-management-3
4. Upload any images with keywords on via the upload panel

hungred-post-thumbnail-wordpress-plugin-admin-panel-upload
5. Change the setting according to your need
6. Done.

Demo

Look at Hungred.com (this site), go to the home page you will notice that each post image will change upon refreshing. Currently, only this post's thumbnail will not refresh because i have uploaded a specific image for this post only (currently). Other post do not have their own thumbnails and will generate according to the keywords that i provided in each image (i am using the smart method in the plugin). You can use the random method when you have a set of theme images. For example, a set of tables, chairs,glasses, etc. Or you can just use single image if you want.

Known Issues

Here are the known issues on the plugin,

  • NONE

Support and Bug Report

  1. Any bug report or enhancement please go to hungred.com contact me section  for better responsiveness. You may also comment below and hopefully it won't be covered away
  2. Please refer to the forum for question and answer section.
  3. new enhancements will be coming along
  4. maintenance will definitely be provided
  5. any question feel free to ask i will try my best to respond asap
  6. any other instruction you would like to know regarding the use of the plugin, please let me know.
  7. Please read the FAQ section of the readme.txt file in the plugin for any doubts. ( a lot of Q n A )
  8. The changelog can be viewed on the readme.txt file too.
  9. Stable version is v2.0.0

Version 2.0.0

This document is a mess right now but still provides you with certain information. However, upon version 2.0 there are quite a number of changes in this plugin and i will advice you to upgrade. Hence, you might want to visit the readme.txt for all your question before moving towards the forum. In this section i will just paste in some screen shot for you to view the changes that has been made for this plugin. Definitely, it will be much better than the previous version as there are a lot of changes in it that i won't mention it here. And some images might be outdated and it should appear better than the one shown on the screenshot.  Thanks tosoccermylife.com for sponsoring this plugin development!

There should be another look than the one shown below

hungred-post-thumbnail-admin

You can now customize each post thumbnail capability

hungred-post-thumbnail-new-panel

Demo of each post customization

hungred-post-thumbnail-result

Explanation of what each button does

hungred-post-thumbnail-new-panel-explain

Demo of what plugin can do.

hungred-post-thumbnail-explanation

Please try to backup all your images before updating to this version since WordPress 2.8.0 onwards there is a slight changes on how WordPress update their plugin (delete folder and reinstall). If you face any problem updating to this version, you may want to reinstall this plugin by deleting the whole plugin and reinstall again as there is a major change on the structure of this plugin to cater the new features. Nonetheless, the update should work for everyone.

Files and Last Note

You can download the file at

  • please proceed to WordPress to download the latest version
  • Current version v2.0.0
  • Article Last update: 15 October 2009. Please refer to the change log on readme.txt (in the plugin) for more information

if my countless days and nights working on this plugin helps you, you can buy me a coffee! You can also support this plugin development by using the donate button below. Lastly, please share it with all the WordPress users if you find this useful to them. You can also show us your appreciation by linking us back or just say a thank you if you can 🙂


Click here to lend your support to: Support Hungred Post Thumbnail and make a donation at www.pledgie.com !

Tutorial: How to validate whether a user has logged into WordPress

Since i can't find this information anywhere on Google and WordPress search box, i will write a post out to save time for people who want to validate whether a person has logged into WordPress to access their external plugin page (another page that is not resist in WordPress Administrator panel).

Problem

My plugin has a file mangement page that help manage the site images from my plugin but the page was external and could be access by ANYONE as long as they have the URL, this is not secure at all. Thus, i wanted to know whether WordPress has any method or action hook that allow to validate a user upon entering that page. I tried Google and WordPress search box for any open question for this. Unfortunately, there isn't any.

Solution

In order to use methods exist in WordPress in an external page, we will have to include them into your page. The file i used to include in my page was 'wp-config.php' in WordPress. This will include all WordPress methods and dependency that these methods have so we won't have to worry that our plugin will just break suddenly.

The other important thing after the main page has been imported is the method. WordPress provides a method called 'is_user_logged_in()', with this method, we can validate whether that particular user has logged into WordPress to check whether they are the correct user. The following code illustrate the above explanation,

require_once '../../../../wp-config.php';
if ( is_user_logged_in() ) 
{
	echo "i am logged in";
}

This is jusst a demo so the real code of mine won't be here to confuse you. The require_once path used is just to navigate downwards. So any user of WordPress can access the page? Of course not! Using the following code we can validate which level of access the user has,

require_once '../../../../wp-config.php';
global $current_user;
get_currentuserinfo();
$level = $current_user->user_level;
if ( is_user_logged_in() && $level == "10") 
	echo "you have access";
else
	echo "you do not have access";

This way we will have to validate what access level this particular user has with the global variable $userdata, WordPress doc has demonstrate this pretty nicely and by checking its access level, you can restrict what level of user is allowed to access your page.