WordPress Attachment Page Template Code Snippets

Date: 15th November 2009 at 4:25 am | Filed under: scripts, wordpress | Author: Sam Burdge | Tags: , , , , ,

I haven't written as many WordPress tutorials as usual lately, as I have been so busy building websites and blogs, so I thought I would take the time out to share a few WordPress codes I have developed recently for attachment page templates and specifically the image attachment page template. The attachment page template is the page that displays a single image when the images link URL is set to 'Post URL'. You can set the image's link URL when inserting a single image into a post, and also when using the gallery shortcode.

The codes in this article are mostly applicable to images inserted using the gallery shortcode as they are most useful for posts or pages that have multiple image attachments. Read more about using image and file attachments.

These template codes can be added to your WordPress theme using the attachment.php and image.php files. If these template files do not exist in your theme you can create them, or WordPress will default to using single.php or index.php to show attachments by default. (See more about template hierarchy).

If you don't want to create a seperate image.php or attachment.php template you can always edit the index.php or single.php files and wrap the attachment specific codes in the is_attachment clause like so:

if(is_attachment()){
//attachment page specific code goes here
}

These php functions are loosely based on code I found in this article: Adding text links to WordPress Gallery by Michael Fields. In this article he provides code examples of how to show previous and next thumbnail links in a WP attachment page. I also made use of this previous-next keys in array function which is infinitely useful!

My first set of functions will return text links for previous image, next image and back to gallery. The functions themselves will need to be added to your theme's functions.php file before calling them in your image.php or attachment.php files. So here we go:
Read on…

15 Responses to “WordPress Attachment Page Template Code Snippets”

  • Comment by doriggidy
    Date: April 25th, 2010 at 8:08 pm

    Hi this is a great tutorial. I’m currently using nextgen gallery but want to try your gallery on my sister’s blog…so using the built in image features of WP seem to be the best solution. What you have here should be perfect for her. Great job. One question, If I wanted to have the images themselves link to the next image…how wold i do that?

  • Comment by muscle car
    Date: May 24th, 2010 at 4:29 pm

    hay that’s the cool one,but how to create thumbnail picture in random,place in sidebar or in home page header,thaks b4

  • Comment by Ted
    Date: May 27th, 2010 at 11:47 pm

    This worked perfectly for me … except, for some reason I can’t get the image captions to display. Any thoughts why they might not be coming in?

  • Comment by Shariff
    Date: July 7th, 2010 at 4:13 pm

    Wonderful Tutorial, at last I found it, I am going to try this in my blog.

    Great Going

  • Comment by Jason
    Date: July 9th, 2010 at 4:16 pm

    Thank you for this tutorial, it helped me immensely.

  • Comment by David Hobson
    Date: August 5th, 2010 at 3:59 pm

    First let me say, I am an experienced computer/internet user, however my developer side is still just an apprentice. But as a user, the second I saw white and other colored text on black background, I closed it and went on. I decided to come back and let you know because I’m sure I’m no the only one who’s done so. You might want to see what other developers think and if this technique is advisable. At least my eyes are hurting right now. Peace.

  • Comment by 2k
    Date: October 4th, 2010 at 12:27 pm

    Hi, excellent function to output the all thumbnails to attachments.php Would be amazely cool to adapting it to single.php. Is there any way to output all thumbnails the same way for single.php?

  • Comment by michelle
    Date: October 26th, 2010 at 12:56 am

    Very helpful. Thank you!

  • Comment by Clark
    Date: January 16th, 2011 at 7:38 pm

    Helpful stuff, exactly what I needed!

  • Comment by David
    Date: January 23rd, 2011 at 11:20 am

    Hi, nice tuto ! I just want to say I think the function array_navigate / prev_att_link / next_att_link could be done with one line of code ! See the wordpress function : wp_link_pages(); (http://codex.wordpress.org/Function_Reference/wp_link_pages) and to see an exemple you can look the code of the attachment.php twentyten wordpress theme.

  • Comment by David
    Date: January 23rd, 2011 at 2:15 pm

    Sorry, it’s not wp_link_pages () but previous_image_link(false) and next_image_link () with false option to insert the title : http://codex.wordpress.org/Function_Reference/previous_image_link

  • Comment by onetrek
    Date: February 27th, 2011 at 5:21 am

    This tutorial is good. But it difficult to read because of the page color. Font size if too small. As a web developer I Suggest you to make your template white color. and big font size.

  • Comment by Marirano MARINI
    Date: March 31st, 2011 at 7:44 am

    When I split an article into 2 column the first row of the second column start one line bottom.
    How can I prevent this?

    Thank you. I appreciate your job and I’ll use it when this “bug” will be take off.
    Great work!

  • Comment by surface encounters
    Date: April 7th, 2011 at 5:17 pm

    Thanks manos! Taking the two leading spaced off the end of the functions.php file worked great. Thanks!

  • Comment by Kevin
    Date: June 21st, 2011 at 8:02 pm

    Thanks for the thumbnail function! Works great!!!
    The selecting of text with your particular color scheme is hard to see though!
    Excellent work =)

Leave a Comment

aprettypenny.co.uk - Retro, antique & collectables store

Date: 26th October 2009 at 12:51 am | Filed under: portfolio | Author: Sam Burdge | Tags:

A Pretty Penny is a new online store for everything retro and collectable including a wide range of designer glass and ceramics.  I would highly recommend it as a place to get quirky, unusual Christmas presents! I built the store on the free shop script platform (which uses Smarty templates).

Screenshot:

app-screen

The store is now open. Check it out: www.aprettypenny.co.uk

Leave a Comment

WordPress Tips - Removing The Title Attribute From wp_list_categories & wp_list_pages

Date: 29th January 2009 at 11:47 pm | Filed under: development, scripts, wordpress | Author: Sam Burdge | Tags: , , ,

I noticed in the WordPress forums that a lot of people were asking how to remove the title="example" attribute from the links generated by the WordPress template tags wp_list_categories and wp_list_pages. The title attribute is what generates the little text box with something like "View all posts filed under <category>" when you hover over a link.

I had previously devised a 'hack' for removing the dreaded title attribute for a theme I worked on. The key is to set the 'echo' parameter of the function to '0' and then to use preg_replace code to remove the title attribute. Here is the code:

wp_list_categories:

<?php
$cool_cats = wp_list_categories('echo=0');
$cool_cats = preg_replace('/title=\"(.*?)\"/','',$cool_cats);
echo $cool_cats;
?>

wp_list_pages:

<?php
$clean_page_list = wp_list_pages('echo=0');
$clean_page_list = preg_replace('/title=\"(.*?)\"/','',$clean_page_list);
echo $clean_page_list;
?>

Personally I don't mind having the titles on my site navigation, and I use the NAVT plugin to generate my nav, so the template tags don't apply for me.

27 Responses to “WordPress Tips - Removing The Title Attribute From wp_list_categories & wp_list_pages”

  • Comment by pressitfor.me
    Date: January 29th, 2009 at 11:54 pm

    WordPress Tips - Removing The Title Attribute From wp_list_categories & wp_list_pages | Sam Burdge…

    I noticed in the WordPress forums that a lot of people were asking how to remove the title=”example” attribute from the links generated by the WordPress template tags wp_list_categories and wp_list_pages. The title attribute is what generates the lit…

  • Comment by tom
    Date: February 10th, 2009 at 3:49 pm

    Where would I place the code snippet for wp_list_pages?

  • Comment by Sam Burdge
    Date: February 10th, 2009 at 4:56 pm

    Hi Tom

    The code snippet above is meant to replace the existing wp_list_pages function used in your theme.

    wp_list_pages is usually called in either header.php, footer.php or sidebar.php of your theme.

    More info about wp_list_pages here:
    http://codex.wordpress.org/Template_Tags/wp_list_pages

    Sam

  • Comment by Sumit Khanna
    Date: April 1st, 2009 at 3:39 pm

    Thanks for the code snippit! I had started using nicetitles for http://chattanoogaswing.org and then noticed that wp_list_pages added tiles to all the links!

    The calendar I was using doesn’t add a class for the dates I wanted the tooltips on. If it did, I could just modify the nicetitles javascript to only select that class of element.

    Using your little regex to remove the titles form wp_list_pages is much easier!

    Also, cool theme you’ve got going on here. I like the green-on-black console look.

  • Comment by Designs Genius
    Date: May 19th, 2009 at 10:15 pm

    thanx a lot for this tip !.
    I have another question for everybody : How can I remove a hyperlink from wp_list_pages, but only from the first ul in the heirachy ?
    thx for all who will consider my question ! :)

    Sébastien from France

  • Comment by Frank Karlstrøm
    Date: June 17th, 2009 at 8:30 pm

    Yet another thank you from me. Have been looking for a plugin to do this, but this is even better. Do you think it’s better for me to write a private plugin implementing this small little code? to avoid the snippet to be removed when I upgrade WP.

  • Comment by Robert Carro
    Date: July 6th, 2009 at 5:41 pm

    W9xinK great tips. I enjoyed reading this,

  • Comment by coda
    Date: July 29th, 2009 at 11:49 pm

    Exactly what I was looking for, thanks a lot!

  • Comment by norton
    Date: September 10th, 2009 at 2:59 pm

    Thanks a lot . I needed to remove the “title-attribute” because of a firefox(macOs)-bug that would always reload the dropdown after stoping to move the mouse on it.
    This would not happen if there was no “title-attribute” anymore. To figure out this already took forever. This code finally make my dropdowns work like they should.

  • Comment by JR
    Date: September 11th, 2009 at 2:49 pm

    What happens if it isn’t hard coded into the theme and WP seems to be generating them of its own accord? What file do I need to edit?

  • Comment by Matt Furtado
    Date: September 16th, 2009 at 8:16 pm

    For the wp_list_categories hack, how would I get the category name to display instead of “View all posts filed under “? Is there a simple hack that I’m not aware of?

  • Comment by Matt Brewster
    Date: September 18th, 2009 at 1:53 pm

    Great tip - many thanks :)

  • Comment by Will Stern
    Date: October 8th, 2009 at 4:19 pm

    You rock. Great post.
    To answer JR, and anybody else wondering, open your header.php and look for replace it with his code.
    If there are specifics in your brackets, make sure to include them in his code in addition to echo=0
    Mine looks like this: $clean_page_list = wp_list_pages(’title_li=&depth=2&echo=0′);

  • Comment by Will Stern
    Date: October 8th, 2009 at 4:20 pm

    meant to say look for the php calling wp_list_pages() …the php code got cut out. :(

  • Comment by fatihturan
    Date: November 29th, 2009 at 1:08 pm

    Good tip. Thanks.

  • Comment by Tim Holt
    Date: January 4th, 2010 at 4:03 pm

    Those who aren’t comfortable editing their theme files can use the Remove Title Attributes plugin to solve this problem.

  • Comment by Tom
    Date: January 31st, 2010 at 8:07 pm

    Tasty… RegExp is not my bag!

  • Comment by kevin
    Date: February 23rd, 2010 at 9:21 pm

    Cool exactly what i needed. Thanks!

  • Comment by Khaled Hakim
    Date: June 25th, 2010 at 5:50 pm

    Thank you for this awesome snippet of code. One of my picky clients did not want the titles to appear on hover. I was using the wp_listpages function, of course and I am glad I came across this site.

    What this code does, for those who are not sure, is remove the title that appears when the mouse is over (hover) an item in the list that is generated through the use of the wp_listpages function.

    Cheers.

  • Comment by Vidhu
    Date: July 12th, 2010 at 4:43 am

    Wow… This is what i was looking for… Now its working finely in my website… Thanks for the useful tip…

  • Comment by Nathan
    Date: July 28th, 2010 at 12:42 pm

    I used this code and it removed the titles, but it added the text “Pages” before all of the actual pages and it is messing up my menu, how can I get rid of that text?

  • Comment by Sam
    Date: November 13th, 2010 at 11:42 pm

    Guys can anyone put little bit more information here please!!!

    where in the world we should put that piece of code?

  • Comment by althahabi
    Date: December 15th, 2010 at 9:59 pm

    sorry , but where to find the two functions wp_list_categories
    wp_list_pages

    in the theme twentyten !

    thanx

  • Comment by alex chousmith
    Date: January 27th, 2011 at 3:52 pm

    thanks for the tip, it totally works

  • Comment by Ian
    Date: March 14th, 2011 at 6:25 pm

    Found this via Google leading me to the WP forums, works great, better than editing core, thanks!

  • Comment by Ian
    Date: March 14th, 2011 at 6:27 pm

    @ Nathan, try this:

    wp_list_pages(’echo=0&title_li=’);

    note the title_li=

    that makes the list title equal to nothing! Cheers

  • Comment by marion
    Date: March 22nd, 2011 at 3:21 pm

    Thank you, this is perfect! Your solution worked for my categories and custom taxonomies. I wish you can also write a code to remove the parent category links =D

Leave a Comment

Basic HTML Template (XHTML 1.0 Transitional)

Date: 18th January 2009 at 11:44 pm | Filed under: scripts | Author: Sam Burdge | Tags: ,

When starting a fresh HTML site it is very useful to have a basic HTML template to use. This template should include:

  • Doctype declaration
  • Head and body tags
  • Title tags
  • Most commonly used meta tags
  • Include for a CSS style-sheet

Having an empty template document will save you time, and will ensure that you don't forget to include any of the most important features of the html page structure. This template should serve as a 'blank canvas' as it were, rather than starting with a completely blank document every time. Here is an example of my template for XHTML 1.0, which can also be downloaded from the link at the bottom of this article:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
@import url(style.css );
</style>
 
</head>
 
<body>
 
</body>
</html>

DOCTYPE:

The doctype declaration (DTD) is important as it tells the browser what type of HTML you are using, and therefore which conventions you will need to follow when coding the site's content. For more information on this check out this Recommended  list of DTDs to use in your Web document.

TITLE:

This is the title that appears at the top of the browser window, it is also the title that appears in the google listing for your page. It is good practice to have a different title for each page of your site. The title can be split into two parts:

  1. The name of your site
  2. A description of the page

resulting in something like:  UK Diving - The worlds largest internet resource for divers (Site name - Site description) or:  UK Diving - Contact Us (Site name - Page description).

STYLE-SHEET:

The stylesheet provides all the colour, layout and text-formatting styles for your html page, it is written in CSS (Cascading Style Sheet).  Please refer to this document on Cascading Style Sheets for more info about CSS. The style-sheet can actually be written entirely between the two style tags, but I prefer to include it as a separate document, as this can be easily included in every page of the site, and once it is stored in the users cache it will also save on page loading time. The style-sheet in my example template is called 'style.css'.

META TAGS:

I use three basic meta tags in my HTML template:

  1. Content type — This tells the browser which character set you are using. In my template I use UTF-8.
  2. Description — This is the description of your page that appears in search engine listings.
  3. Keywords — A list of key words and phrases that relate to your page,  seperated by commas. This is for search engine purposes too.

ABOUT WRITING XHTML 1.0:

Here are some of the rules of XHTML 1.0.

All nested tags must be closed in the reverse order in which they are opened:

<div><span>Hello</span></div> = Correct
<div><span>Hello</div></span> = Incorrect

All tags that don't have a closing tag must be treated as self-closing with a backslash:

<img src="test.jpg" /> = Correct
<img src="test.jpg"> = Incorrect
<br /> = Correct
<br> = Incorrect

All special characters must be encoded correctly:

& = incorrect
&amp; = correct

Please feel free to use my template as a basis for your HTML pages. You can also test your HTML markup for errors using the online W3 markup validator, or the Web Developer Toolbar for Firefox.

DOWNLOAD TEMPLATE:


4 Responses to “Basic HTML Template (XHTML 1.0 Transitional)”

  • Comment by pressitfor.me
    Date: January 22nd, 2009 at 6:10 pm

    Basic HTML Template (XHTML 1.0 Transitional) | Sam Burdge…

    Having an empty template document will save you time, and will ensure that you don’t forget to include any of the most important features of the html page structure. This template should serve as a ‘blank canvas’ as it were, rather than starting wit…

  • Comment by whmcs templates
    Date: February 2nd, 2010 at 7:29 am

    Good post and nice design, is this a regular template?.

  • Comment by Amy
    Date: December 4th, 2010 at 5:05 am

    Thank You for the post. I am not real keen on black websites, however, this is very nice and professional looking. First one that I’ve seen with black background that I really like! Smooth and sophisticated, course you already know that!

  • Comment by Khulna Information
    Date: May 24th, 2011 at 4:49 am

    Excellent work… it is so much helpful to me..

Leave a Comment

76 digital remix - Home Page Template Preview

Date: 28th December 2008 at 6:26 pm | Filed under: blog, themes, wordpress | Author: Sam Burdge | Tags: , , , ,

A quick update on my soon to be released 76 digital remix theme... Here is a sneak preview of one of the possible custom home page templates which will be fully configurable:  News  Feed  Home Page Template

Screenshots of some of the different layouts and color schemes, and of course the different flash site headers will be published here soon, so stay tuned for more sneak previews!

Leave a Comment

 Page 1 of 3  1  2  3 »