I get very annoyed with the lack of trust clients have with web designers. I’m sure this comes from horrible experiences with unqualified, unexperienced or new designers who tend to be cheap, quick and perform plenty of mistakes. Many potential clients tend to say, “I have a few quick and easy changes for my website” or “this won’t take long” and then provide a list of not-so-easy tasks. No one goes to their doctor and says “hey doc, I don’t feel too well, but this would be quick and easy to fix,” while having flu like symptoms.
WordPress, index.html's, and 404's
I came across a WordPress quirk I did not know how to solve for some time. Google Webmaster Tools indicated there was a missing index.html on one of my WordPress driven websites. This website is ran on the root domain and was operating as it should be. When visiting a domain (such as mywebsitename.com) what ever is displayed on the page is what appears in the index.html file. When I entered the address of my website with the index.html file, WordPress gave me a 404 error, and this further confused me.
I did some investigation, and found I was not alone in my frustration, but a solution did not exist. While heading to my root domain worked (mywebsitename.com), mywebsitename.com/index.html did not, even weirder mywebsitename.com/index.php performed the job that index.html should have. To solve this problem, my first instinct was to try a simple redirect index.html to index.php by adding code into my .htaccess file. When I added the following code something interesting happened.
RewriteEngine on
RewriteRule index.html index.php [R=301,L]
This solution produced an infinite loop causing the server to terminate the request. This further perplexed me, I needed a solution without creating another webpage that was also SEO friendly. It wasn’t until I came cross this post, detailing how to redirect index.html and index.php to the home page that I found my answer. While the initial instinct was correct, the way to go about it was all wrong, to properly redirect a request for the index.html to the proper page (and make everyone happy), I had to use the following code:
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://nexeusfatale.com/$1 [R=301,L]
By setting this condition, I prevented the server loop, redirected the request to the index.html to the root domain, informed search engines to properly update the missing webpage, and made everyone happy!
the next LVL theme updated to version 0.9.2
I have been very busy in tweaking my current web designs, including my newly released WordPress theme. I’ve made some changes (mainly those to be complient with the WordPress theme repository), and cleaned up a lot of CSS code. You can download the next LVL here. Here is the full list of the recent changes made:
version .9.2 (4/8/09)
- Fixed a font size issue with <select> tags inside of posts
- Cleaned up CSS Code
- Removed Plugin Dependend Code
- Removed Images from Sidebar and replaced with text
Enjoy!
Lightbox: Image Overlay on Webpages
Lightbox is a great image overlay effect that can be used for standalone image effects, galleries. The script fades the site background to and displays the image over the website. Here’s an example below:
The most current version of Lightbox is Lightbox v2.04, but there is a Lightbox 1 which performs a similar task. The differences between the two versions is the use if the Prototype Framework and Scriptaculous Effects Library in version 2.
Using Lightbox
Using Lightbox is really simple but only works with images or text. It relies on the use of the rel tag in the <a> tag. Before using Lightbox, you must install it. To install lightbox (after downloading it and uploading the files to you web server), you must include its three javascript files to your header with the <script> tag.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Next add the Lightbox CSS file by using the <link> tag or merge it with your current CSS file:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
After installing and linking the necessary files to the pages you intend to use Lightbox with. This is done by adding the rel=”lightbox” attribute to your <a> tags. You can also use the title attribute to display a caption with your image. Here is how the code for the demo above looks like:
<a href="http://images.nexeusfatale.com/demo/lightbox-demo.jpg" rel="lightbox" title="Lightbox Demo Image"><img src="http://images.nexeusfatale.com/demo/thumb-lightbox-demo.jpg alt="Lightbox Demo" border="0" title="Lightbox Demo Image"/></a>
One option, if you are using a PHP generated page is to create a header file and use include() to have access to lightbox on every page.
Alternative Solutions
Lightbox is a really simple and easy way to add functionality to your designs. There are several alternatives to Lightbox that provide the same or expanded functionality and are more flexible with media (such as Flash objects or more dynamic photo galleries). Thickbox is a jQuery alternative, which works with single images and galleries, as well with AJAX, IFrame and Flash content.
Lightbox in WordPress
For those using WordPress implement Lightbox may present a bit of a challenge. There is however two plugin’s that you can use, the first is Giuseppe Argento’s implantation of Lightbox 2, which is merely a plug-in version of the Lightbox 2 code, I use this plugin on this website. There’s also Rupert Morris’s implementation of Lightbox 2 which is an updated code set that features some automatic features (i.e. automatic lightboxing of images, automatic titling, arrow key implementation) .
Managing Recent Posts in Word Press
One problem I came across in making the theme “So Fresh So Clean” (to be discussed in a future blog post) was attempting to display a list of my recent blog posts without needing to use a sidebar widget. The theme is influenced by many different web designs, but borrows a few concepts from Dave Shea’s website Mezzoblue. The idea came from the book Building Findable Websites: Web Standards SEO and Beyond. In the section Displaying Your Most Recent Posts, Aaron Walter discusses Dave’s technique for displaying one post on his front page, and a list of the most recent posts in the top section of his website. Dave suggests that in order to do this you can use the following code in the WordPress loop:
<ul id="recent-posts">
<?php $posts = get_posts('numberposts=5&offset=1');
foreach ($posts as $post): ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
While this code does work, it can be problematic, the get_post() query overwrites the WordPress default variables. This means if you run any other loop specific code (i.e. the_title, the_content, the_date, etc.) they will all be affected and many not produce desired results. In my initial testing every page that used The Loop was getting it’s information from the get_posts() query as it overwrites WordPress’ default queries for pages, searches and archives. Thus they all displayed the same information.
After some searching I found a solution for the problem, creating a new WP_Query() object so that it doesn’t interfere with WordPress default functions. Here’s an updated example of the code presented above using this technique.
<ul id="recent-posts">
<?php $recent_posts = new WP_Query(); $recent_posts->Query('showposts=5@offset=1');
while ($recent_posts->have_posts()) : $recent_posts->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
If you want something a bit fancier, here’s how I created the recent posts section using the same technique.
<div id="recent_posts">
<h2>Recent Posts</h2>
<?php $recent_posts = new WP_Query(); $recent_posts->Query('showposts=5@offset=1');
while ($recent_posts->have_posts()) : $recent_posts->the_post(); ?>
<div class="recent_date"><?php the_time('m.d.Y') ?></div>
<div class="recent_post_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<br />
<?php endwhile; ?>
</div>
A deeper discussion in how to do this is on the Weblogs Tools Collection (where I found the solution). The lesson here is, in order to avoid conflicts with WordPress default functions, plugin, and countless other issues, create a new WP_Query(); object.
