Upon configuring custom permalinks for the sake of SEO and prettiness, many people find that single post pages no longer display correctly. For some reason the query is_single() does not return true for custom permalinks, which then defaults your template file back to index.php.
The easiest solution to this problem is to append your custom structure with .html .
%postname%
becomes
%postname%.html
You get to keep your permalinks and single pages will work again.
Killer Robot Clan is my family’s personal blog. The site is currently running off someone else’s template, since most of my time is eaten up doing work for other people. However, I have made an interesting tweak.
The tabs up top represent each family member. When you click on those tabs you are shown a page which displays that person’s latest Friend Feed entries. This wasn’t too hard to achieve.
First I created a page for each author. Since these are the only pages on the site, I was able to use the default page.php template. I created a conditional loop and inserted it where the content belongs:
if is_page(’user1′) {
echo “<script type=\”text\javascript\” src=\”http://friendfeed.com/embed/widget/user1\”></script>”;
}
elseif is_page(’user2′) {
echo “<script type=\”text\javascript\” src=\”http://friendfeed.com/embed/widget/user2\”></script>”;
}
…
The final step was to populate the tabs with the wp-list_pages() tag. Voila! Quick and easy Friend Feed pages.
If you’ve clicked through my site a bit, you’ve probably stumbled across my nifty portfolio page. Since the mechanics of the page are largely based on CSS and PHP, you can’t get much insight into my method through a page source view. I thought I’d be nice and spill the beans.
I set up the basic Wordpress site first, the portfolio was one of the last features I added. To get started, I created a subdirectory named “portfolio” in the base folder of the wordpress install. I populated that folder with subdirectories containing my site designs.
I like to keep a full copy of the designs I create. That way I have something to display in my portfolio if the business closes or the client fails to maintain their hosting or domain services. If the site is live I just rename index.php to indexa.php, and create a new index file that redirects to the live url. Anyone clicking a link to that site’s subdirectory will go straight to the live site, but a copy of all the files still live on my server.
So, at this point we have a directory tree structure that looks something like this:
Base Install Folder
Portfolio
Site One
Site Two
Site Three
Then I created a Wordpress page template titled “Portfolio”. It uses PHP to read the contents of the portfolio subdirectory and echo them within individual divs, setting different classes for the even and odd rows. I insert a file called “info” in each subdirectory which contains a basic description of the site. The PHP script reads that information into our portfolio display. Here is the code of my portfolio page template:
<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<div id="wrappinner">
<div id="main">
<div id="portfolio">
<?php
//set portfolio directory path
$path= "/home/bonnie/public_html/portfolio/";
//set base url
$url= "http://www.bonnieshull.com/portfolio/"
//Open portfolio directory
$dir = opendir("portfolio");
//List files in portfolio directory
while (($file = readdir($dir)) !== false)
{
//exclude private files and directories
if( $file == '.' || $file == '..' )
continue;
$info= "$path$file/info";
$description = file_get_contents($info);
if( $flag == 'on' )
{
echo "<div class=\"on\">
<a href=\"$url$file\" target=\"_blank\">".$file."</a>
<p> $description </p></div>\n";
$flag=off;
}
else
{
echo "<div class=\"off\">
<a href=\"$url$file\" target=\"_blank\">".$file."</a>
<p> $description </p></div>\n";
$flag=on;
}
}
closedir($dir);
?>
</div><!-- end portfolio -->
</div><!-- end #main -->
</div><!-- end #wrappinner -->
<?php get_footer(); ?>
Next I created a Wordpress Page titled “My Portfolio” Its very important that the Wordpress portfolio page has a slightly different name than the portfolio directory. I set the default page template to “portfolio”, and I’m ready to go. At this point there will be a “Portfolio” tab in my page navigation menu, and the page will display a list of directory names residing within the portfolio subdirectory. Functional, but ugly.
The final touch is CSS styling, appended to the end of my main stylesheet. Here is a sample:
/*
//////////////////////////////////////////////////////
ZEBRA TABlE
//////////////////////////////////////////////////////
*/
#portfolio {
padding-bottom: 20px;
border-top: 1px solid #cccccc;
width:500px;
}
#portfolio p {
color:#666666;
float:right;
width:350px;
margin:10px 10px 0px 0px;
}
#portfolio div {
border-bottom: 1px solid #cccccc;
}
.on {
background:#FBE6E3;
width:500px;
height:50px;
}
.off {
background:#ffffff;
width:500px;
height:50px;
}
.on a, .off a {
float:left;
text-transform:uppercase;
color:#6E5E5E;
margin: 10px 0px 0px 10px;
}
.on a:hover, .off a:hover {
text-decoration:underline;
float:left;
text-transform:uppercase;
color:#C74E45;
margin: 10px 0px 0px 10px;
}
Finally, I insert an index page in the portfolio directory, redirecting visitors to www.bonnieshull.com/my-portfolio. For a bit of added security I password protect any private subdirectories within the portfolio directory.
So, that’s how I did it. I hope this guide helps you out 