How to create an excellent attachment page in WordPress

Posted by on

In my last post, we talked about Best attachment/image search WordPress plugin. Well, this article is something similar to that one because I decided to dig the topic more deeply and bring you to the great concept of an attachment page. In this post, you will be learning, How to create an excellent attachment page in WordPress.

Attachment page is nothing but the particular page template which displays the attachments uploaded to your site in a detailed manner.

There are more than millions of WordPress themes available out there who give lots of new features and ensuring WordPress to be more than a Blogging platform.

In some of the themes, the attachment pages are specifically designed to pay attention to the images and other files. Such themes are mainly made for eCommerce or media purposes.

Although you want to create an excellent attachment page in your existing WordPress theme, then you need to code it manually. It is not a hard stuff, but still, it requires some basic knowledge of PHP and HTML.

Before starting the process make sure that you have a backup of your files and folders (safety measures). Backup is a necessary thing and should be done regularly. Furthermore, Backup helps in proper maintenance of site data and protection.

What are attachments in WordPress?

How to create an excellent attachment page in WordPress

Icons by flaticon.comcreate an excellent attachment page in WordPress

If you people are aware of Gmail, then you must have noticed that while composing a mail, Gmail shows an option named ‘add attachment‘. There you can upload any document or image or file. Well, WordPress is pretty similar to that. WordPress allows their users to upload any picture, zip, or document directly from the posts or media. Those are nothing but attachments.

WordPress consists of 3 different post types i.e. posts, pages, and media files (attachment). All these files are treated as posts in WordPress. These data can be viewed either on the standard page or the attachment page.

Many WordPress users think that image is only an attachment in WordPress. It is not true.

Attachment is not only an image file. It can be anything or any data type for example (png, zip, mp4, etc.). Well, by default WordPress allows following attachments to upload.

  • PNG, JPEG, JPG, GIF, BMP, etc. image files.
  • ZIP, RAR, TAR.GZ, etc. compressed files.
  • MP3, WAV, etc. music files.
  • PDF, DOCX, XLXS, PPT, etc. documents.
  • MP4, MKV, FLV, 3GP, etc. videos are allowed.

The Maximum upload file size on WordPress is 32 MB. Well, that’s cool but note that your attachment size should not exceed 32 MB, Right?

Also note that WordPress doesn’t allow some of the files such as SVG, EPS, PSD, or AI files as the browsers are not supported to view it as an attachment.  So don’t crash your site while uploading these type of files, Okay? Now let’s hop up to our next sub-topic.

What is an attachment page in WordPress?

In simple words, the WordPress page template specifically designed to show your attachments in a detailed or descriptive manner is known as an attachment page.

Note: By default, single.php is an attachment page unless you add an attachment.php file in your WordPress theme. Means if you link any of your media files to attachment page then it will be viewed using single.php file of your theme.

Attachments like images, documents as well as videos are likely to get more relevant while there is an attachment page for showing it. Here is an example of an attachment page for displaying images (must-check !important). You can also refer to the screenshot below which explains much about attachment pages.

create an excellent attachment page in WordPress

Create an excellent attachment page in WordPress

As you can see that the “image” is an attachment over here. Well, I’ve coded this in such a way that the picture is on the left side of the page and the details are on the right side. The attachment page mentioned over here is mobile friendly. I’ve also implemented the features of an image including no. of downloads, shares, image information, social share buttons and more.

You can design it according to your requirements.

The screenshot above is taken from illustrake.com (which provides cc free icons download) and the website which is made and maintained by 3nions.

There are some other useful information and features that you can add to your attachment pages such as social share buttons will be the best option. This would be helpful when you have an ebook e.g. in a PDF format and want to share it with your website’s visitors.

Requirements of Attachment page (how it works)

The attachment page requires an attachment which should be linked to it. You might have seen “Link to” option in your media options under “attachment display settings” while uploading or adding an image to your posts. In that, you have to put the value as “Link to => attachment page” to use the attachment feature of WordPress. Using this option you can see your images on attachment pages while clicking on in. See the screenshot given below for detailed information.

create an excellent attachment page in WordPress

Create an excellent attachment page in WordPress

If your theme doesn’t have a template to display attachments, then WordPress will use single.php template automatically i.e. your post template.

Well, all this automated stuffs about WordPress is great, isn’t it?

But I will recommend you to create attachment page template (attachment.php) and not to use a single.php file for displaying attachments if your site focusses more on images or photo blogging. Because these type of websites requires an excellent and informative attachment page which, Right?

After activating this option, your attachment page will grab a separate permalink for itself.

Yes, of course, it will create a different permalink for the attachments on your WordPress site. Suppose if the post URL is http://www.3nions.com/mypost and the attachment name is image.png then the URL of your attachment page will be http://www.3nions.com/mypost/image.png.

It will fetch the URL of the post to which it is uploaded and create its URL.

Yeah, I know what you are waiting for 🙂

How to create an excellent attachment page in WordPress?

Creating an attachment page on WordPress is quite easy. But for that, you have to add some codes and snippets into your theme. By the way, there is no such plugin available in WordPress repo to create attachment pages in your WordPress theme. Well, that’s sorrowful news, but there are some themes which are integrated with attachment pages (Hint- X theme for premium, Hueman for free).

Let’s begin with the process to create an excellent attachment page in WordPress.

Before we start, I recommend you to backup your theme data carefully. Because safety is first, you are going to code, and when you code you should be careful.

Worth Reading: Best backup plugins for WordPress Beginners.

Firstly create an attachment.php file in your theme’s root directory i.e. wp-content/themes/yourtheme/attachment.php.

Of course, a blank attachment file won’t work so copy the code given below and paste it into your attachment.php file.

This code will show your theme’s header and footer and the attachment image and details between it. Remember, if your theme doesn’t have header or footer file the code will only show the attachment image, title, and the link to the parent post.

The good news is that I will be sharing some more information which will make this post “really awesome !”. Well, what if your website’s visitors want to download the image when they view your attachment page?

Well, the code for that is just below 🙂

This will add the Bootstrap download button in your attachment.php which will help your visitors to download the original image file.

If you want to extend this download feature on your site, then you should go for this code (given below).

Do you know what I just did with this code? I’ve added the different dimensions of the image to the attachment page. If the user wants to download the picture in full or medium size, they can easily do it by using this feature.

Also If you want to display the name of the author you can use <?php the_author(); ?>  tag on your attachment page.

So let me give you a complete code for attachment page. You can directly use this code in your blank attachment.php file without using the above codes.

After adding this code to your “blank” attachment.php file make sure that you have saved all the changes by hitting update file button.

If you’re getting problem while copying the code, download your attachment.php file from the link given below.

Download attachment file from here.

That’s all people. Your attachment page is now ready.

You might like these links.

If you liked this post do share it on facebook and twitter. And if you got into some kind of issue let me know, I will help you throughout the process. Reveal if I’ve missed something using the comment box. Ta da…

create an excellent attachment page in WordPress

Share This Post

Last updated: June 7, 2017

Authored by :

I’m 3nions’s co-founder and an individual contributor to the team. Besides being a Web Enthusiast, My latest obsession is SEO. When I’m not playing with CSS3 or Adobe Illustrator, I love adventuring nature and eating.

7 comments

Hi Prakhar,
That was an amazing tutorial. Though I was knowing that but a lot before I did that. So, it was like rechecking it more me.
Thanks for sharing.
Have a good day.

Hey Robin,
Happy to hear that this post helped you. Keep visiting.

Thanks for this tutorial.
The link http://illustrake.com/packs/captain-america-icon-pack/attachment/am2/ isnt working can you check that please.

Thanks for informing, we will update it soon. Until then you can try this link which is just similar to that link http://icons.illustrake.com/captain-america-icon-pack/captain-america-shield/

Where have you put the URL of the image to be dowloaded. Also what if I have to link any zip file with button ? Thanks

Download URL is in the attachment.php file on line 29 to line 30. You can use the same code (as above) for downloading zip files too, just change the link.

For reference :

Download

Before using this button, please add Bootstrap to your WordPress theme

You may also like my tutorial on Bootstrap buttons.

excellent tutorial. question, how do I also show the image caption and description in the info box where you have the author and image title?

Leave a Reply