Tagged with " plugin"
Jan 15, 2009 - PHP, Wordpress    31 Comments

WordPress: adding a custom option box and developing file upload plugin

Hello Buddy,

One of my clients wanted to show thumbnail photo beside the post text as below. So, I had to make a plugin so that the admin can post the thumbnail when he is writing the post or can edit when editing the post. Take a look at the thumbnail’s position below.

Thus, recently I solved a plugin problem in one of my wordpress works although it was small. You know you may sometimes need to add a custom field in your wordpress posting/writing/editing area. To check what I am saying, take a look at the following image:

Adding such a box is extremely easy using the wordpress’s builtin add_meta function. But does file upload works i.e. if you upload the file, will it work? The answer is straight – “NO”. But why? The reason is also simple. If you want to upload a file, your form should have “enctype=”multipart/form-data” in the form opening such as

But the problem is – if you open the source code of text editor tool as following,

you will see that it does not have “enctype=”multipart/form-data” unfortunately. It looks exactly like this in my wordpress 2.7 version if I open the wp-admin/edit-form-advanced.php file at line # 520.

Not funny? Huh?

So, to cope up with this situation, I had to add “enctype=”multipart/form-data” in the form although I do not like changing the core files. Why do not I like to change the core files? The answer simple. Because whenever there is an update, the client have to update the file everytime. The client may not like it or may even forget it. Anyway, after change, it looks like this:

OK. Lemme show you step by step what to do if you want to add a file upload plugin.

Step One: Change the “wp-admin/edit-form-advanced.php” file

Open this file from the mentioned location and change the following line in the file:

to this line:

Step Two: Write you plugin

Here goes mine:

Please notice that I dynamically delete any unnecessary file using the PHP’s unlink() function.

Step Three: get your image name from the database

I have placed the following code in my functions.php file.

Step Four: Link with the index.php or single.php or wherever you want

See how I placed the thumbnail image source in the code of index.php and single.php file.

Step Five: Test

Now you need to test and we are done!

You can also download my little plugin if you want from here:
http://www.tanzilo.com/demo/code/bag-thumb/bag-thumb.zip

Thank you for reading.

Nov 23, 2008 - PHP, Wordpress    6 Comments

Flickr Gallery in WordPress: Integration with FAlbum plugin

Hello!

Recently I added a gallery in wordpress blog that displays photos from a wordpress plugin FAlbum. This plugin is very nice one and works very smoothly with wordpress. Installing and configuring it with wordpress is somewhat tricky and time consuming. Once you set it up, it will be your great tool.

OK. Now let me share my experience in setting up, configuring and integrating the FAlbum Flickr plugin with wordpress blog.

Integrating a small gallery in wordpress

Before we start, please take a look at what we are going to do. Check the following link.

Click here to see a small gallery with 6 photos at the bottom of the page.

Step One: Download and install the FAlbum plugin

First of all, download the FAlubum plugin from the following link:
http://www.randombyte.net/blog/projects/falbum/

Now unzip the file and make sure that you unzip the file in a folder named as falbum. A common error is unzipping the files in a folder named as FAlbum-0.7.1 and uploading it in the plugins folder of wordpress. Make sure that your files are located as follows:

instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/plugins/falbum/FAlbum.class.php
instllation_directory/wp-content/plugins/falbum/wordpress-falbum-plugin.php etc

Step Two: Activate the FAlbum plugin

Log in as admin in your wordpress system and activate FAlbum under the Plugins tab.

Step Three: Configure and setup the FAlbum

Now from the Settings tab, go to FAlbum tab as like Settings –> FAlbum.

Here you will find two steps, complete both of them.

Step Four: Set the options and the (dot)htaccess file

Next, you come to FAlbum Options. Now set there everything as per your preference. Remember one important thing. It is about your (dot)htaccess file. If it is not writable, make it writable. Otherwise, you will get a message that your (dot)htaccess file is not writable and the plugin will request you to copy and past some code. Do either way you like.

Just for your information, I am using the the default settings without change any of them.

Step Five: include and add album code in your theme file

I am showing 6 (six) Flickr photo files at the bottom. So I have add the following code in my footer.php file.

In my footer.php file code, I placed in a DIV element. So, it looks somewhat like this:

Step Six: creating falbum.php file from index.php file

Now we will go to our theme directory. Here you see several files like index.php, header.php, footer.php etc. Now copy the index.php file and paste it as falbum.php. Open the falbum.php file and add FAlbum code and a sample is as follows.

Upload this new falbum.php file to your theme directory in the server.

Please remember that there are two different falbum.php files in two different locations. So, pleaes do not confuse with one another.

instllation_directory/wp-content/plugins/falbum/falbum.php
instllation_directory/wp-content/themes/theme_name/falbum.php

We have created the second one from our theme’s index.php file.

Step Seven: Check the output

Go to your website, refresh it twice and click on the thumbnail of any flirkr image.

So, you are done. Huh?

Integrating a complete gallery in wordpress

Well. You may want to keep a single page as your album home and in that page you may want to keep some Flirkr photos in thumbnail so that it looks gallery homepage. Fine!

Now let us see how we can do this.

Step One: Read the above part “Integrating a small gallery in wordpress”

Check the above part thoroughly since you will need the knowledge from the above part titled as Integrating a small gallery in wordpress. Since many things are common, I have avoid the repeated description.

Step Two: create a file and link it to wordpress

First of all, create a file and link it with wordpress. You can follow my another article to do this. The another article is here:

http://www.tanzilo.com/2008/11/02/wordpress-how-to-add-and-link-static-or-custom-pages/

Step Three: add the album code to your page

You can add photos in several ways. For example, if you want to add latest or recent 8 photos, add the following code.

If you want to show 8 random Flickr photos, add code like this:

You will find more details on how to customize your page in the following link:
http://www.randombyte.net/wiki/falbum/functions_and_variables

Step Four: Customize CSS coding for custom look

Remember that each thumbnail photo will be placed in a list element. So, if this is the PHP code where we place the album:

Here is the CSS to make them looking like a thumbnail gallery:

Next, the bigger photo and all other things like next, previous buttons and tags etc will be displayed in a DIV element named as content.

Step Five: Check your site

Now you are done! Go to your site, refresh the site twice and check you album.

So, we are done!

These following two links will be helpful and you can visit them for more information:
http://www.randombyte.net/wiki/falbum/functions_and_variables
http://www.randombyte.net/wiki/falbum/incorporating_falbum_into_your_own_theme

Thank you for reading.