I also created my first widgets! The ‘Interesting Links’ and ‘Interesting Images’ on the sidebar are no longer hacks done on the themes sidebar.php file. I learned how to create a plugin in WordPress and make it into a widget. Here is what one of the widgets looks like:

I had to go back to all my old posts and make updates. If you find any issues anywhere, please let me know so I can fix it asap. I’ve found instances in code where there should be two && and instead the code blocks shows &&. I’m currently trying to figure out why my preview button doesn’t work, hopefully I’ll figure that out soon so I can move on to changing some colors around and finally updating my ‘About Me’ page. I hope to have some content in that page by the end of this weekend. Other than that, I hope you all enjoy the new look and am looking forward to hearing some feedback!

Uploader 0.2.0

So today after work I decided it was about time to start working on phase two of my Uploader tool. Phase two consists of allowing me to drag and drop an image URL into the app so the app can then download the image to a folder in my server, create a thumbnail of this image, and update the WordPress database with information about the new image. The new image would then show up the next time a person visits my blog. If you notice, there is now a “Pics of Interest” section on the sidebar to the right of the page (similar to what people are doing with the flickr plugin). Every time I drag an image URL into the Uploader, the new image thumbnail will show in that area and if you click on the thumbnail you’ll see the full size image.

It was actually much easier than I originally thought to make this work. Technically, the Uploader already has the drag/drop functionality and already takes in a URL. The only extra AS3 code was a check to see if the URL was an image and if so call the PHP page with a code (I’m passing –@IMAGE@– to know it’s an image – it was just the first thing that came to my head) so then PHP knows this URL should be treated as an image not just a URL. If you remember, phase 1 for the Uploader allows a person to drag/drop a URL into the app so it creates a new link under the “Links of Interest”.

Most of the changes were on the PHP end. The file that handles the request from the AIR app now does a check to see if this URL is an image. If so, it has to download the original image to the local server, make a thumbnail copy of it, and finally update the wp_images table (this is a new table I created for this - MySQL script) in WordPress. I’m using two PEAR packages to do this: HTTP_Request and Image_Transform. The same can be done just as easily without them but I like using PEAR on my projects. Here’s the code that does this (file.txt):

Then I had to add some code to the sidebar.php for my template in WordPress to show the new section “Pics of Interest”. As you read this keep in mind this is just a quick beta and I’ll be doing refactoring later. This is by no means a finished product but it works fine and it’s a good start for anyone who wants to try it out. This is the new code I added to my sidebar.php:

The last thing I had to do was to add the style for my images in the styles.css file and I was done. Make sure your images folder has the proper privileges so you can upload an image into it. The next phase will be allowing me to drag files from my local file system into the AIR app so it’ll upload it to my server. Right now the Uploader only does something when a URL is dropped on it: adds a link if it’s not a image, adds the image if it’s an image.

Question, comments, conerns are always welcome!

Edit:

Uploader Phase 1

The theme I’m using is Devart by deniart. The few mods I’ve made to this theme are:

• Edited the /wp-content/themes/devart/images/author.gif (to show my pic instead of the default apple)
• Modified the /wp-content/themes/devart/style.css to change the way <code>, <ul>, <li> look
• Modified the style.css to add my twitter logo and link on the top right hand side of the page
• Modified the header.php page to add my twitter logo and link to the top right hand side of the page
• Had to add <?php wp_footer(); ?> to footer.php to launch stats code
• Added img#wpstats{display:none} to style.css to hide the from stats plugin

I’ve also done the following to my setup:

• Followed these instructions to make my blog be at the root: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory
• Installed the following stats plugin: http://wordpress.org/extend/plugins/stats/
• Change ‘blog roll’ to ‘Links of Interest’ (displays all links under links category)
• Installed http://lesterchan.net/wordpress/readme/wp-postviews.html to show how many views each page/post has received. Made the modifications required for this to show and work. Also modified the view_options in db to format the text a bit differently.
• Installed the Google Analytics plugin and created an account with them.

Uploader 0.1.0

If you missed the previous post explaining what Uploader is go check it out.

So after having some fun with code I think I’m close to being done with phase 1.  I currently have a working beta (0.1.0) that I’m going to share with you all and explain what I’ve done in case anyone else wants to do something similar.  For the most part this was pretty straight forward.  There were a few hiccups here and there that I’ll try to address in this post. The link to the code will be at the end.

First I looked online for some info on Drag/Drop in AIR and I found these two posts that I used for reference:

• http://www.senocular.com/air/tutorials/dragdropimageviewer/
• http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/

I should have read the comments in those post since they answer the question of using ‘NativeDragManager’ instead of ‘DragManager’.  I had that issue and had to figure out why it wasn’t working.

This is an AIR app made in Flash.  So far I only have one ‘Main’ class taking care of most of the action.  I’ll clean the code up later and comment it but here’s the class so far. Using the ‘NativeDragEvent’, Uploader waits for something to be dragged over it.  When it does, ‘dragEnter’ is called. Usually you can do some validation here to see if this is a file type you want to accept but I just do that later.  Before a file/URL can be dropped you need to call ‘NativeDragManager.acceptDragDrop(object)’. By doing this, you let AIR know that the object is ready to accept the drop.

Once an item is dropped, ‘dragDrop’ is called to see if this is a file or a URL.  If URL, ‘urlDropped’ is called which creates a listener for the loader var and sends the request to the URL that was dropped on the app.  When the request is complete, ‘urlLoaded’ is called.  The reason we are loading the dropped URL is so we can grab the title of that page in between the <title> tag of the html.  This is going to be used as the display name when we insert the new link in WordPress. ‘grabTitle’ does a quick substr and when all is done we do one last request.  I had to make sure to remove the listener on ‘loader’ for ‘urlLoaded’ since later when I make a new listener and request, both the new and old listeners were triggering (so make sure to remove a listener from a loader if you are going to reuse that var with a different event call back).

‘SERVER’ is the constant that needs to by modified to point to the correct PHP page that will insert the link to the WordPress DB.  ’urlLoaded’ finishes by sending two variables to the SERVER page, ‘name’ and ‘url’. After the request is loaded, the ’serverUpdated’ function will display if the process was successful or not based on what is returned by the PHP page.

That’s pretty much it for the AS3 code.  The PHP file is much more light weight.  At first I had PHP request the HTML for the URL and strip out the title but after thinking about it, it makes more sense to put that burden on the client and not the server so I moved the code to Flash.

The PHP code starts out by checking for the two needed variables ‘url’ and ‘name’.  There’s a tiny bit of validation going on, definitely more to come as well as implementing some security features since at the moment anyone can submit variables to this page if they know the URL.  (Before posting this, I decided to add a quick security check for now which will see if the remote IP address matches a couple different valid IP address – such as my home or work PC – and if it does, it will continue executing ) Then we make a DB connection to the WordPress DB. I have a standard DB class I use, just use regular mysql_connect instead (ask if you need help with this). Next is the query to insert the data into the ‘wp_links’ table.  I kept the name default during my WordPress install, so the table name might be different for others. And at last, the query is executed and true is returned. The assumption is if we make it down that far everything worked correctly.  Like I said, I need to add more validation and security but that will be later… maybe phase 2 or 3.

The only issue I’m having now that I can’t seem to figure out is where the WordPress DB tracks what category a link is attached to?  When I log into the WordPress admin area and go to manage links, all the links I’m inserting using this method don’t show anything under ‘Categories’. I’m assuming this information isn’t in the ‘wp_links’ table?  If anyone has an answer to this, please let me know.

Here is a zip of all the files (FLA, PHP file, Main class, and AIR xml).  Make sure to edit the ActionScript ‘SERVER’ const and DB info in the PHP file.

* Quick side note, I need to give credit to my fiance Ashley who created a quick graphic for me to use last night. Visit her site to see some of her work.

EDIT:

I forgot to mention I made some edits to the Uploader-app.xml file. These settings were to remove the system chrome and make the app window transparent. More information about these settings can be found at help.adobe.com.

Uploader Phase 2 complete

The Uploader (yeah I know, I’m very creative) is going to do all the above for me. This will be a app I can keep running on my desktop somewhere and when I need to upload a file or link I can just drag it over and drop it in. The tool will then figure out what kind of item was dropped in and what to do with it.

Phase 1 will handle the links. The way the tool should work for links is the following.  I visit a page that I find interesting and want to add to the ‘Links of Interest’.  Instead of logging into WordPress to create it, I highlight the link from the address bar of the browser, drag it over to the app, and drop it. Now the app needs to figure out the <title> of that page to use as the name since we need a name and url to create a link. Once it has that, the tool will send the information to a PHP page which will do an insert to the links table in the WordPress DB.  

Phase 2 will deal with images and files. I may break phase 2 into two since I may do some stuff differently with images versus other files.  I’m thinking I may want to upload images, create a thumbnail, and insert to a DB to display in the front page the same way some people do with their flickr images. Other files I would just upload and store somewhere else.  I’ll give this more thought when I get to it.

I’m going to be writing the tool in Flash CS3/AIR with PHP in the backend using the current WordPress MySQL DB.  Stay tuned for updates!

EDIT:

Uploader Phase 1 completed 
Uploader Phase 2 completed

“rtl.css is called when you are using a language localization that reads from right to left (e.g., Arabic or Hebrew).” – source

Well now I know and so do you.

So far I am using the default theme.  I’m sure I’ll eventually change it but for now I’m just trying to understand how things are structured and how to tweak elements on screen.  The WordPress Function Reference page was a great place to start.  My first goal was to figure out how to get my sidebar to display a list of projects and topics.  In the admin, I created a root level category called ‘Topics’ and another one called ‘Projects’.  Then I created a few other categories that were under either topics or projects such as ‘Flash’, ‘Cars’, ‘PHP’.

I was trying to make my side bar look something like this:

• Flash
• PHP
• General

• QAlias
• Car

Unfortunately, once I reloaded my page I didn’t get these results.  Instead, I had a root level element titled ‘Categories’ and the links under it were my sub topics.  After talking to Moses, he explained the concept of widgets and I guess currently the default theme is using a categories widget that isn’t doing what I need it to do.  So, I went back to the admin, clicked on ‘Design’, finally on ‘Widgets’.  On the right side of the page, it showed I was using a ‘Categories’ widget so I removed it since I didn’t see any options to modify it from here to do what I wanted.  I think this would be the right time to mention I like coding so I (depending on time constraints and the project) rather figure things out myself than to ask and/or find a guide online.   it makes things more fun – ok, back to the topic.

After removing the ‘Category’ widget I had to modify the ’sidebar.php’ file located at ‘wordpress root/wp-content/themes/default/’ to add my ‘Topics’ and ‘Projects’ lists.  I opened the file and looked over it to see what it’s doing.  It’s pretty much just one big <ul> with a bunch of checks to see what needs to be displayed.  I went to the bottom of the file to add my two new <li>’s in there.  Using the functions reference list, I found a function called ‘wp_list_categories‘.  By using the ‘child_of’ parameter, I was able to get a list of all the sub topics for a particular topic.  My code looked something like this:

<!-- topic -->
<li>
<h2>Topics</h2>
<ul><?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2>Projects</h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li> 
To get the id value for the ‘child_of’ parameter, I just went to the admin and clicked on ‘Manage’ and ‘Categories’.  Then you can move the mouse over the categories and in the status bar of your browser see if the cat_id for each category.  After a bit of researched, I found out that if you pass ‘title_li=’ with no value, the function won’t return a ‘Category’ title attached to the list of sub topics.  Before this, the list returned by the ‘wp_list_categories’ function was ‘Categories->Flash/PHP/Other’.  With ‘title_li=’ the return value is just the sub topics ‘Flash/PHP/Other’.

After hitting reload on my browser, my sidebar was displaying correctly but something was bothering me.  I was hard coding the title of the categories and I didn’t like that.  As you can see the code above, the <h2>’s have the names of the categories hard coded.  This to me is a big no no so I did some browsing around the list of functions in WordPress and found ‘get_cat_name(id)’.  Now I’m using this function and passing the correct id’s and I’m feeling better about the end result.  Final code is:

<!-- topic -->
<li>
<h2><?php print get_cat_name(1); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=1&title_li='); ?>
</ul>
</li>
<!-- project -->
<li>
<h2><?php print get_cat_name(2); ?></h2>
<ul>
<?php wp_list_categories('orderby=name&show_count=1&use_desc_for_title=0&child_of=2&title_li='); ?>
</ul>
</li>