Popout Vertical Menu for WordPress website using HTML and CSS

I designed a popout vertical menu for wordpress for a previous employer but they never liked it or used it.  So here it is for everyone to use!  It only uses CSS and HTML so it can be used anywhere!

To see it in action, select all of the code, cut and paste it into notepad.  Save it as "vertmenu.html" then find the file that you just saved and double click on it.

Here is a picture of it in action:

 

<style type="text/css">
#navigation {width: 180px; font-size: 1em; Font-family: arial;}
#navigation ul { margin: 0px;  padding: 0px; }
ul.top-level { background: #CCf; }
#navigation li { list-style: none; }
  ul.top-level li {
    border-bottom: #fff solid;
    border-top: #fff solid;
    border-width: 1px; 
  }
#navigation a {
  color: #000;
  cursor: pointer;
  display:block;
  height:25px;
  line-height: 25px;
  text-indent: 10px;     
  text-decoration:none;
  width:100%; 
  }
#navigation a:hover{ text-decoration:underline; }
#navigation li:hover {background: #DDF; position:top;  }
  ul.sub-level { display:none; width:600px; height:220px; }
  li:hover .sub-level {
    background: #EEF;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 180px;
    top: 5px;   }
  ul.sub-level li {
    border: none;
    float:left;
    width:180px;
    }
  
#navigation .sub-level { background: #EEF; }
 /*IE RESET HELPER*/
 li:hover .sub-level .sub-level { display:none; }
 .sub-level li:hover .sub-level { display:block; }     

 
</style>

<div id="navigation">
<ul class="top-level">
<li>
<a href="http://www.gentech.com/about-gentech/" title="About us">About us</a>
<ul class="sub-level">
<li>
<a href="http://www.gentech.com/gentech-contact-information/" title="How to Contact GenTech ">Contact us</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-catalog/" title="GenTech  Catalog">Our Catalog</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-employment/" title="GenTech Employment"> Employment Openings</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-financing/" title="GenTech Financing">Our Financing</a>
</li>
<li>
<a href="http://www.gentech.com/guide-to-mass-specs/" title="Compare Mass Spectrometer 
Features">Guide to MS</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-history/" title="GenTech History">Our History</a>
</li>
<li class="cat-item cat-item-14">
<a href="http://www.gentech.com/gentech-terms/" title="GenTech Term and Conditions">Our Terms</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-testimonials/" title="GenTech  

Testimonials">Customer Testimonials</a>
</li>
<li>
<a href="http://www.gentech.com/gentech-warranty/" title="GenTech  

Warranty">Our Warranty</a>
</li>
<li>
<a href="http://www.gentech.com/10-reasons-to-choose-gentech/" title="10 Reasons to Choose 
GenTech">Why Choose GenTech</a>
</li>
<li>
<a href="http://www.gentech.com/useful-links/" title="Useful Analytical Equipment 
Links">Useful Links</a>
</li>
</ul>
</li>
<li>
<a href="http://www.gentech.com/gc/" title="Used Gas Chromatography Equipment"> GC </a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/gc/agilenthp-gc/" title="Used Agilent/HP Gas 
Chromatography">Agilent/HP GC</a>
 </li>
 <li>
 <a href="http://www.gentech.com/category/gc/perkin-elmer-gc/" title="Used Perkin Elmer 
Gas Chromatography">Perkin Elmer GC</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/shimadzu-gc/" title="Used Shimadzu Gas 
Chromatography">Shimadzu GC</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/other-gc/" title="Other Gas 
Chromatography Instruments">Other GC</a>
 </li> 
 <li><a href="http://www.gentech.com/category/gc/gc-accessories/" title="Gas 
Chromatography Instrument Accessories">GC Accessories</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/gc-kits/" title="Gas Chromatography 
Installation Kits">GC Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/gc/gc-software/" title="Gas Chromatography 
Software">GC Software</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/hplc/" title="Used HPLC Equipment">HPLC</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/hplc/new-hplc-systems/" title="New HPLC 
Systems">New HPLC Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/agilenthp-hplc/" title="Used Agilent/HP 
HPLC Instruments">Agilent/HP HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/perkin-elmer-hplc/" title="Used Perkin 
Elmer HPLC Instruments">Perkin Elmer HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/shimadzu-hplc/" title="Used Shimadzu 

HPLC Instruments">Shimadzu HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/waters-hplc/" title="Used Waters HPLC 
Instruments">Waters HPLC</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/other-hplc/" title="Other HPLC 
Instruments">Other HPLC </a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/hplc-kits/" title="HPLC Instruments 
Installation Kits">HPLC Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/hplc/hplc-software/" title="HPLC Instrument 
Software">HPLC Software</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/mass-spec/" title="Used Mass Spectrometer 
Equipment">Mass Spectrometer</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/mass-spec/gcms-systems/" title="Used GC/MS 
Instruments">GC/MS Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/lcms-systems/" title="Used LC/MS 
Instruments">LC/MS Systems</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/mass-spec-kits/" title="Mass Spec 
Instruments Installation Kits">Mass Spec Kits</a>
 </li>
 <li><a href="http://www.gentech.com/category/mass-spec/ms-accessories/" title="Mass Spec 
Instruments Accessories">MS Accessories</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/aaicp/" title="Used AA/ICP Equipment">AA/ICP</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/aa-icp/atomic-absorption/" title="Used AA 
Instruments">Atomic Absorption</a>
 </li>
 <li><a href="http://www.gentech.com/category/aa-icp/icp/" title="Used ICP 
Instruments">ICP Instruments</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/miscellaneous/" title="Misc Analytical 
Instruments">Misc.</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/misc/edwards-pumps/" title="New and Used 
Edwards Pumps">Edwards Pumps</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/other-instruments/" title="Other Used 
Instruments">Other Instruments</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/pfeiffer-pumps/" title="Used Pfeiffer 

Pumps">Pfeiffer Pumps</a>
 </li>
 <li><a href="http://www.gentech.com/category/misc/varian-pumps/" title="New Varian 
Pumps">Varian Pumps</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/parts-department/" title="Analytical Instrument 
Parts">Parts Department</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/category/parts-dept/finnigan-parts/" title="Thermo 
Finnigan Instrument Parts">Thermo Finnigan Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/hp-parts/" title="HP Instrument 
Parts">HP Instrument Parts</a>
 </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/1100/" title="HP 1100 
HPLC Instrument Parts">&HP 1100 HPLC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/5890/" title="HP 5890 
GC Instrument Parts">&HP 5890 GC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/59715972/" title="HP 
5972 MS Instrument Parts">&HP 5970-72 MS Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/5973/" title="HP 5973 
MS Instrument Parts">&HP 5973 MS Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/6890/" title="HP 6890 
GC Instrument Parts">&HP 6890 GC Parts</a> 
  </li>
  <li> <a href="http://www.gentech.com/category/parts-dept/hp-parts/7673/" title="HP 7673 
Autosampler Parts">&HP 7673 AS Parts</a> 
  </li>
 <li><a href="http://www.gentech.com/category/parts-dept/other-parts/" title="Other 
Scientific Instrument Parts">Other Instrument </a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/perkin-elmer-parts/" 
title="Perkin Elmer Instrument Parts">Perkin Elmer </a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/pfeiffer-parts/" title="Pfeiffer 
Instrument Parts">Pfeiffer Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/tekmar-parts/" title="Tekmar 
Instrument Parts">Tekmar Instrument Parts</a>
 </li>
 <li><a href="http://www.gentech.com/category/parts-dept/varian-parts/" title="Varian 
Instrument Parts">Varian Instrument Parts</a>
 </li>
</ul>
</li>
<li><a href="http://www.gentech.com/services-overview/" title="Analytical Instrument 
Services">Services</a>
<ul class="sub-level">
 <li><a href="http://www.gentech.com/bench-repair/" title="Analytical Instrument 
Repair">Bench Repair</a>
 </li>
 <li><a href="http://www.gentech.com/installation/" title="Analytical Instrument 
Installation">Instrument Installation</a>
 </li>
 <li><a href="http://www.gentech.com/packing-instructions/" title="Instrument Packing 
Instructions">Packing Instructions</a>
 </li>
 <li><a href="http://www.gentech.com/request-service-form/" title="Request Instrument 
Service Form">Request Service Form</a>
 </li>
 <li><a href="http://www.gentech.com/service/" title="Instrument Service 
Information">Service Information</a>
 </li>
 <li><a href="http://www.gentech.com/shipping/" title="Analytical Instrument 
Shipping">Instrument Shipping</a>
 </li>
 <li><a href="http://www.gentech.com/circuit-board-repair" title="Analytical Circuit Board 
Repair">Circuit Board Repair</a>
 </li>
</ul>
</li>
</ul>
</div>

How to list all posts in WordPress

I recently had the need to list all posts on a WordPress web site.  After hours of playing around I found a great Plugin called "Get Post List With Thumbnails".  It did a great job of listing everything in the sidebar but the explanation on how to get it to show up in a page is a bit difficult to understand. 

To list everything in a page, create the page, then switch to HTML and put something like this into it - [gplt orient="h" imgo="false" ttgo="true" dtgo="false" dtfrm="1" categ="" postnr="200" linn="4" divwid="300" tbwid="100" tbhig="100" cp="1" cs="1" lwt="2" tte="" sptb="false" tgtb="false" ordm="DESC" ordf="ID" metk="" mett="" pgin="" ptype="post" dexcp="false" gptb="false"] 

That short code above will do 4 across by 50 top to bottom for a total of 200 posts.  It looks like this:

The short code is a bit difficult to figure out.  To get an idea of what the codes mean use the widget in a sidebar and the long version of the short codes will then show up.

Wordpress - How to replace TimThumb Improved

Back in 2009 I replaced TimThumb in the Mimbo WordPress Template with a change in the function that was used to get the thumbnail images. This function is found under "Theme Functions" and it is called "Get_post_image". The problem was that TimThumb was slow, and there already is a thumbnail image created whenever you upload an image to your Wordpress blog. That created thumbnail image usually ends in "-150x150.jpg".

The version of this function that I wrote back in 2009 was too slow because it used the "if file exists" test to see if the image name that it created was correct and if it did not exist then it went with the full sized image and just scaled it down by specifying a width and height of 150 and 150.

So the simplest way to select the already available thumbnail image is to remove the last 12 digits and replace them with "-150x150.jpg", Right? Unfortunately reality varies greatly from theory. The first problem is that you might have a ".gif" or some other image extension. So you have to remove the extension, then remove the next few digits, then replace them and then put the extension back.

Well that works about 75% of the time. The next issue that you have to deal with is if the image is smaller than around 600 pixels wide, there might not be any extension added onto the image that needs to be removed, so you just need to add the "-150x150" to the image. How can you tell what format the image is in? That is done by breaking down the image and then looking for first a "-", then a 3 digit number, then an "x" then, optionally, a second three digit number. So here is the code to do all of that:




/* For Getting the Image FASTER */
//GET-POST-IMAGE1 by Bob Davis - improved version of script by Tim McDaniels

function get_post_image1 ($post_id=0, $width=0, $height=0, $img_script='') {
  global $wpdb;
  if($post_id > 0) {
    $sql = 'SELECT post_content FROM ' . $wpdb->posts . ' WHERE id = ' . $wpdb->escape($post_id);
    $row = $wpdb->get_row($sql);
    $the_content = $row->post_content;
    if(strlen($the_content)) {
      preg_match("/<img src\=('|\")(.*)('|\") .*( |)\/>/", $the_content, $matches);
      if(!$matches) {
    preg_match("/<img class\=\".*\" title\=\".*\" src\=('|\")(.*)('|\") .*( |)\/>/U", $the_content, $matches); }
    $the_image_ext = substr($matches[2],-4);
    if ($the_image_ext == ".JPG") {  $the_image_ext = ".jpg"; }
    $the_image_dash = substr($matches[2],-12,-11);
    $the_image_num = substr($matches[2],-11,-8);
    $the_image_x = substr($matches[2],-8,-7);
// replace -???x??? with -150x150 and then add .jpg back on
    $the_image_src = substr($matches[2],0,-4);
    $the_image_repl = $the_image_src . '-150x150' . $the_image_ext;
// just add -150x150 and then add .jpg back on
    $the_image_src = substr($matches[2],0,-12);
    $the_image_add = $the_image_src . '-150x150' . $the_image_ext;
// Check to see it the name ends in -???x???
        if(($the_image_dash=='-') && (is_numeric($the_image_num)) && ($the_image_x=='x')) {
       $the_image = '<img alt="" src="' . $the_image_add .'" width="' . $width . '" height="' . $height . '" />';
           } else {
           $the_image = '<img alt="" src="' . $the_image_repl . '" width="' . $width . '" height="' . $height . '" />';  
                 }
        return $the_image;
      }
    }
  }

Combined Aggregate Web Site

A few years back I developed a Key Word Analyzer (KAT) tool. It is at www.davismission.org/keyword

Now I am working on another feat of web programming that I call a "CAF" web site.  Imagine having your Facebook, YouTube, Ebay, Twitter and many more sites all aggregated onto one web site.

I am developing what I call a Combined Aggregate Feed (CAF) Web Site to bring several of my web sites together into one location. What do you think is the best Three Letter Acronym (TLA) for this kind of web site? It is a work in progress and can be found at http://www.davismission.org/bobdavis321/

This was not easy and just doing an < object data="web site" > because that does not work for a lot of web sites. For example for Facebook you have to create a "Badge" then link that badge into your web site.

The code for twitter is a Java script that looks like this:
new TWTR.Widget({
  version: 2, type: 'profile', rpp: 4, interval: 30000, width: 'auto', height: 400,
  theme: {
    shell: { background: '#333333', color: '#ffffff'
    },
    tweets: { background: '#ffffff', color: '#000000', links: '#880088',
    }
  },
  features: { scrollbar: false, loop: false, live: false, behavior: 'all'
  }
}).render().setUser('bobdavis321').start();

To get the scoop on how I did it all just right click on the web site and select "reveal code" or "reveal page source" in Firefox..

How to use SQl to fix all records in Wordpress

Ever discover that you need to change all records in a Wordpress database. Recently I needed to add a "/" to every record, so I used PHP Admin and a SQL command to make that change.

Really Static Versus WP Super Cache Revisited

We stopped using Really Static after upgrading to WordPress 3.  However I have re installed it and it is working with WordPress 3.2

We switched back because Alexa said it was taking 2.3 seconds to load a page and sometimes it would even take longer than that.  I could tell that web pages were loading faster immediately!  Everything seems much faster with Really Static!  I will post some graphs as soon as Google updates their web stats to reflect the change in caching programs.

Wordpress and Twenty Ten Bugs

As Wordpress gains more features it is also gaining more bugs!  I am getting annoyed with some of the bugs as they do not make a lot of sense.  The most annoying one is that if some text is bold and you change the font color the font color remains black in the editor screen, but it has the correct color in the actual web page.

Here are there bugs I have found so far.

1. The items picture sometimes replaces the header picture.  This was meant to be a feature, avoid using large images that may get cropped and used to replace the header image or delete a few lines of code to prevent this from happening.

2. 'Strong' overrides 'Font Color=' in editor (Text appears to be black), but it appears correctly on actual web pages.

3. 'Remove featured image' does not work unless you go into 'media' and delete the image.  Otherwise the thumbnail image will be the one you tried to remove.

Wordpress Drop Down Menu's with NO programming.

I have been raving over the new features in Wordpress and I need to clarify that I am talking about Wordpress with the "Twenty Ten 1.2" theme.  That theme is installed by default and yesterday I blogged about the built in thumbnail support, today its about the drop down menus.  There is a new 'appearance' tab called 'menu' from there you need to select the category from the bottom center select box.  You check the boxes you want then select 'add to menu'.  A simple menu is that simple.  Drop downs require that you offset the drop downs to the right of the main category as can be seen on the right side of the menu 'Parts' tab.

Once that is done click on "Save Menu" and then check to see if ti is all working like you wanted it to work.

Wordpress now features thumbnails!

The default installation of Wordpress now features thumbnails in the search and category listings. You just have to enable them.  The first step is to select 'Gallery' in the new 'format' box.  then select 'Set featured image' (all the way at the bottom right corner) to add the image that will be the 'thumbnail' (although it is a bit larger).

Then when the pop up comes up you upload the image like you do for other images but there is a new thing at the bottom called 'Use as featured image' that you need to select.

If you do everything right then there should be images in the search results and the category listings. This is all done without any special coding.

Perhaps tomorrow I will show you how to set up pull down menus also without any coding!

Wordpress page title tag modification for dynamic titles

This code will get the web page title and description to automatically change from a page to a category to a post. That way the blue status bar at the top of your browser will more accurately reflect what you are seeing. Also If you roll over the browsers tab the box that appears will reflect what page you are on.

Basically what is says is is this a single post? If so, show the post title. Is it a category? If so, show the category name. Otherwise show the blog description.

< title > 
< ?php if ( is_single() ) 
{ bloginfo('name'); echo " - "; 
single_post_title('', true); }
elseif ( is_category() ) { bloginfo('name'); 
echo " - "; $category = get_the_category();
echo $category[0]->cat_name; }
else { bloginfo('name'); echo " - "; 
bloginfo('description'); }
? > < /title >

< meta name="description" content="
< ?php if ( is_single() ) { 
bloginfo('name'); echo " - "; 
single_post_title('', true); }
elseif ( is_category() ) { 
bloginfo('name'); echo " - "; 
$category = get_the_category();
echo $category[0]->cat_name; }
else { bloginfo('name'); echo " - "; 
bloginfo('description'); }
? > / >

WordPress - Clean up your Database!

I was working on our WordPress database looking for an error in one of the posts.  While using a PHP based SQL editor I discovered that every post had about 6 or more copies of itself.  They were all the previous revisions of that post.  Then I realized that records of revisions is why our SQL database is so big!

So then I looked for a way to clean up that huge database.  I came across a plug-in called 'WP-Cleanup' and it worked great!  It easily reduced the database size from 19.4 megs down to only 3.4 Megs!  I would highly recommend WP_Cleanup for anyone using WordPress.  It should be run once a month not once a year.

Now I am looking for a way to get rid of all of the unused pictures, there must be thousands of them!

WordPress Super Cache or Really Static?

We have been trying to get our Word Press pages to load as fast as you would expect them to.  We eventually went to 'Really Static' to cache our web pages.  It knocked the socks off of every other WP cache program!  Then we upgraded to WP 3.0 and our site speed dropped back to what it was before we used a caching program. 

In the picture above the short lived dip below 1.5 seconds was when we used 'Really Static'.  Then the jump back up to 4 seconds per page was when we upgraded to WP 3.0.  Now here is a really interesting question, is this chart relevant?  For one thing WP Super Cache does not return cached pages to 'bots' and 'spiders'.  That 'feature' can be turned off by deleting all the entries under 'Rejected User Agents'.  According to one web site that change may double your performance while reducing server load.

Another feature to change in WP Super Cache from the default settings is to enable 'preload cache mode' and set the time to 1440 minutes.  That is to only load the cache every 24 hours.  That is fine for us because we do not allow comments, you would have to make an exception for comments if you allow comments. 

All together though it appears like WP 3.0 is REALLY SLOW!  We are trying to find a solution, but let me know if you know of one!

Word Press Cache programs

I have been experimenting with WordPress Caching programs. Over that last few months I have been trying out WordPress caching programs to see what works the best.

We started with 'WP Super Cache'. It delivered pages very fast, unless it was the first time the page had been accessed this hour, and then it was slow. But every once in a while the page load time would get really slow. I recorded an 18 second page load using YSlow under Firefox. It happens about every 100 page views, something goes terribly wrong and some pages may never load at all!

So next we tried DB Cache reloaded. They claim to be really fast, by loading the database into memory so it can be read much faster. The load on the server went way down, but the average page load was 2 seconds, about the same time as it was without any caching program.

So now we are trying 'WP-Cache'. With it installed the average page load time is about 1 second. Of course we need to leave it on line for a while to see how Alexa and Google will respond to it.

This picture shows our page load time over several months.  The sharp changes on the left 2/3 were recorded while using WP Super Cache.  The gradual changes on the right were while using DB Cache.

Wordpress - rounded tab corners

Firefox and Chrome recently included the ability to create rounded corners in CSS or style sheets.  After some playing around I was finally able to get it to actually work.  Google Chrome also has support for rounded corners under the name 'webkit'.  Note that the paramaters have to be different for Firefox and for Chrome.  The 4px parameter sets the size in pixels of the corners.

Here is the CSS to make it all work;

#nav li {

float: left;

list-style:none;

color:#3f3f3f;

border-top: solid white;

border-left: solid white;

}

#nav a, #nav a:visited {

display: block;

text-decoration: none;
background:#f0f0f0;
padding:5px 12px;
color:#3f3f3f;
border-top: 1px solid gray;
border-right: 1px solid gray;
border-left: 1px solid gray;
-moz-border-radius-topright:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-right-radius:4px;
-webkit-border-top-left-radius:4px;
}

Here is what the rounded corners look like in tabs.

WordPress With Better Meta Tags

Once again I am back with another WordPress fix. Google will report problems with a WordPress based web site unless you fix a few simple problems.

One thing that is needed is to put a description under each and every picture on your web site. Google looks for some text that is near to the picture to identify the picture. Then Google will use that text to place your picture into google image search results. That text can be done by using the caption tag that is available with every picture that you upload into your web site. Just make sure that you fill it in and do not just depend upon the name of the picture to get it listed.

Another problem is the lack of good meta tags in WordPress. There is a fix for this problem in the WordPress codex but it only places the post title into the meta tag. The results of doing this is that Google will then report that the meta tag is too short. The solution is to put your blog title, the categories, and then the post title into the meta tags. This is usually long enough to make Google happy. The code below does that with a "-" in between each of them.

< meta name="Description" content="< ?php if ( is_single() ) {
bloginfo('name'); echo " - "; foreach((get_the_category()) as $category) 
{ echo $category->cat_name . ' - '; } single_post_title('', true); 
} else { bloginfo('name'); echo " - "; bloginfo('description'); }
?> " />

< meta name="Keywords" content="< ?php if ( is_single() ) {
bloginfo('name'); echo " - "; foreach((get_the_category()) as $category) 
{ echo $category->cat_name . ' - '; } single_post_title('', true); 
} else { bloginfo('name'); echo " - "; bloginfo('description'); }
?> " />

Wordpress show make model & price

Wordpress is a great CMS system but it is a little tricky to display any custom Fields. Displayed below is the code needed to be added to the archives list so that it will preview the make model and price of your items. Of course you need to create the custom fields and fill them in for each item in order for this code to work. Another trick is to add a link to the item itself when you click on the tag. To do that you need to add your own 'a href' and then strip the code off the 'get_the_tags' response.

< a href="< ?php the_permalink() 
?>"> <?php echo strip_tags(get_the_tag_list
('Item: ', ', ')); > </a>
< ?php $key="Price"; if 
(get_post_meta($post->ID, $key, true)!="") 
echo "Price: ".get_post_meta($post->ID, $key, true); ?>
< ?php $key="Make"; if 
(get_post_meta($post->ID, $key, true)!="") 
echo " Make: ".get_post_meta($post->ID, $key, true); ?> 
< ?php $key="Model"; if 
(get_post_meta($post->ID, $key, true)!="") 
echo " Model: ".get_post_meta($post->ID, $key, true); ?>  

WordPress Fast thumbnails

I have an idea on how to make fast WordPress thumbnails. There are two methods used inWordPress. One is to use a special custom field that contains the thumbnail name, this requires filling in that field for every item and also uploading the thumbnails for every item.

The second method is to use an add on program like 'TimThumb' that makes thumbnails from the images and then sends the thumbnails to your computer. Your computer then caches them so after the first time they are instantly there. The problem is that it takes time for the web server to shrink the images down so a cache of images is maintained on the server as well.

I have a third solution that works very fast. When pictures are uploaded to WordPress it sets them up with three sizes, large, medium, and small. They are 600x600 pixels, 300x300 pixels, and 150x150 pixels. They are identified by 600x600, 300x300, or 150x150 being added on to the end of the pictures name. You select the size that you want to use for your article.

Now notice that the 150x150 size is 1/16 the total size of the full 600x600 sized image. Why not just select the 150x150 image, send that as the thumbnail and have your browser shrink it to 100x100 or whatever thumbnail size that you want? The images could then be selected totally automatically and sent with very little work by the web page server. All the work would then be done by the user's computer and that would be very little work they would have to do.

The program would find the image reference in the post, then strip off the last 4 characters (usually '.jpg') then add '-150x150' on the end, then put back the last 4 characters. It sounds simple but it is only about 90% successful so far. The problems are that if the image was smaller than 150x150 to begin with then there is no 150x150 image, so it would have to go back to the original image. The next problem is that if you selected the 300x300 image. In that case the last 7 characters would have to be stripped off before the 150x150 was added onto the end.

Sorry the code listing here on BlogSpot is not turning out well. The code goes in the functions as a replacement for get_the_image that uses timthumb. In live testing this code is about 2 times faster using a database of about 500 items. However about 5 % of the thumbnails did not work, so thumbnails had to be manually created and uploaded to fix that problem. One last change fixed problems where the .JPG was capitalized in the uploaded image but was lower case in the thumbnails.

/* For Getting the Image FASTER */
//GET-POST-IMAGE1 quicker than the script by Tim McDaniels

function get_post_image1 ($post_id=0, $width=0, $height=0, $img_script='') {
global $wpdb;
if($post_id > 0) {
$sql = 'SELECT post_content FROM ' . $wpdb->posts . ' WHERE id = ' . $wpdb->escape($post_id);
$row = $wpdb->get_row($sql);
$the_content = $row->post_content;
if(strlen($the_content)) {
preg_match("/< img src\=('|\")(.*)('|\") .*( |)\/> /", $the_content, $matches);
if(!$matches) {
preg_match("/< img class\=\".*\" title\=\".*\" src\=('|\")(.*)('|\") .*( |)\/> /U", $the_content, $matches); }
$the_image_ext = substr($matches[2],-4);
if ($the_image_ext == ".JPG") {  $the_image_ext = ".jpg"; }
$the_image_num = substr($matches[2],-11,-7);
$the_image_src = substr($matches[2],0,-4);
$the_image_150 = $the_image_src . '-150x150' . $the_image_ext;
$the_image_src = substr($matches[2],0,-12);
$the_image_300 = $the_image_src . '-150x150' . $the_image_ext;
if ($the_image_num=="150x" || $the_image_num=="300x" || $the_image_num=="600x" ) {
$the_image = '< img alt="" src="' . $the_image_300 .'" width="' . $width . '" height="' . $height . '" /> ';
} else {
$the_image = '< img alt="" src="' . $the_image_150 . '" width="' . $width . '" height="' . $height . '" /> '; 
}
return $the_image;
}
}
}

I tried posting the code as a gif, but it was too small to read. Thanks to makeblogpopular.blogspot.com I now have readable code!