Hopefully this how-to will replace or at least substitute my google docs editable content how-to.
I needed to add editable business hours and contact info to the sidebar of my RapidWeaver inventory site. This was fine when the web host allowed me to use the php include() function to show content from an outside domain. Now that feature has been removed from my particular host for security reasons. I think this method will be more elegant anyways because I am using WordPress for the whole site rather than both the latter and Google Docs.
I built a page in the WordPress backend and typed in the business hours on one page and contact info on another. Then I made a copy of the inventory main page and called it pages.php under the inventory subfolder. The page is an exact copy except I took out the sidebar content and eliminated this code from the content area:
<div class=”blog-entry-title”><?php the_title(); ?></div>
<div class=”blog-entry-date”> <!– <?php the_time(’Y-m-d G:i’); ?> | –>
<span class=”blog-entry-category”><?php the_category(’, ‘); ?></span> |
<span class=”blog-entry-permalink”><a href=”<?php the_permalink(); ?>”>Print This Item</a></span> |
<span class=”blog-entry-permalink”><a href=”<?php the_permalink(); ?>#respond”>Inquire About This Item</a></span> | </div>
Two more features that seem necessary to an inventory are searching and a tag list. A quick look at codex.wordpress.org shows that there are two basic parts to their built-in search engine. The search field and button, and the search results page.
Stick this code in your sidebar or wherever you want the search field and submit button to show up on your website: “<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>”
Then you have to create a page which is where the search results will show up. Copy your inventory page and call it searchform.php. Put it in the same directory as your inventory page. Cut out the section of your page that starts with “<?php if (have_posts()) : ?>” and ends with”<?php endif; ?> “. This is called “the loop” and usually is inside your content div. Replace it with “<?php /* Template Name: Search Page */ ?>”. That should do it!
Now to add a tag list or cloud. This shows you a list of all the tags you use on your inventory so people can see features or descriptive words of your inventory and click on them to see a list of items that are tagged. Put this code in your sidebar or wherever: “<?php wp_tag_cloud(”); ?>”. The default format is as a cloud, where the tags with the most use are in bigger sized fonts. To make them show up as a list use “<?php wp_tag_cloud(’format=list’); ?>”.
The search needs more capabilities, like being able to click checkboxes to search for specific keywords, and select price ranges and the like, but I haven’t found any info on that yet…
Adding a photo gallery for each inventory item goes like this:
- Upgrade to Wordpress 2.7 or later.
- Install http://www.jarinteractive.com/code/photoJAR/photojar-base/
- Install http://www.jarinteractive.com/code/photojar/photojar-post-thumbnailer
- Install http://stimuli.ca/lightbox/
- Replace all HTML for the image you have in your inventory posts with , or to make it square and cropped.
Now all the images in the Wordpress gallery are in a pop-up slideshow-like gallery when you click on the image in your inventory post. Also, since I am using RapidWeaver as mentioned before you must add a little more code.
- In RapidWeaver, for each inventory page, click Page Info.
- Click the Header button.
- Under the Header tab below add <?php wp_head(); ?> on a new line in the text box.
- Remove the line “<div style=”clear:both”></div>” from “yoursite.com/yourwordpressdir/wp-content/plugins/photojar-post-thumbnailer/default-theme.php”
I’m not positive but I think this gets code from all your plugins and puts it in the <head>. I noticed after adding it, there was a section called “lightbox script” in the source code when viewed online.Basically, the that you added to the post HTML is called a shortcode in Wordpress lingo. The plugins you install modify what those shortcodes mean from the default in Wordpress.I noticed that my custom fields now fall below the image. My next venture will be to try and change the CSS for Lightbox or photoJAR to keep the custom fields to the right of the photo.