WPBeginner

How to Add Multiple Post Thumbnails / Featured Images in WordPress

Editorial Staff — Tue, 21 May 2013 12:00:40 +0000

Recently one of our readers asked if there was a way to add multiple post thumbnails or featured images in a WordPress post. By default, most WordPress themes come with built-in support for featured images which makes adding post thumbnails really simple. However when working on custom projects, you might need to add a second featured image to a post. In this article we will show you how to add multiple post thumbnails / featured images in WordPress.

First thing you need to do is install and activate the Multiple Post Thumbnails plugin. After activating the plugin, you need to add the following code in your theme’s functions.php file. You can add it anywhere in the file as long as you are doing it right. Read our guide on how to paste snippets from the web.


if (class_exists('MultiPostThumbnails')) {

new MultiPostThumbnails(array(
'label' => 'Secondary Image',
'id' => 'secondary-image',
'post_type' => 'post'
 ) );

 }

Once you add that, you can now add a secondary featured image to your post. All you have to do is Edit an existing post or create a new post. You should see a secondary featured image meta box right after the featured image box in WordPress post edit area.

Even though you can add a secondary featured image in your WordPress admin, it will not display on your site until you configure your theme. All you need to do is add the following code inside your post loop where you want to display it. This could be in your single.php (for single posts), archive.php (only for archive pages), etc.

Once you do that, you are done. Your theme is now ready to display multiple featured images. This is how it looked like when we tested it:

You can repeat this process to add as many featured images as needed. You can also extend the support to other custom post types instead of just posts.

Adding New Thumbnail Sizes

If for some reason you need to change the thumbnail size for the secondary featured image, then you can do so by creating additional image size in WordPress. Don’t forget to regenerate thumbnails or new image sizes. After this you can call the new image size in your multiple post thumbnails code. For example, if you created a new image size with the name secondary-featured-thumbnail you would add this code in your template:

We hope that this article helped you add multiple featured images to your WordPress themes. What are some use cases that you can think of for this plugin? When can you see yourself adding multiple post thumbnails in WordPress? Let us know by leaving a comment below.

To leave a comment please visit How to Add Multiple Post Thumbnails / Featured Images in WordPress on WPBeginner.

How to Import External Images in WordPress

Editorial Staff — Mon, 20 May 2013 11:56:04 +0000

Did you just migrate your site over to WordPress and realized that your images are still linking to the old source? Importing external images can be difficult at times. Well, it doesn’t have to be. Whether you migrated from Joomla, Weebly, Tumblr, WordPress.com, or another platform, we have the solution for you. In this article, we will show you how to import external images in WordPress with a few easy clicks.

If you used one of the WordPress importers, then your images do get imported by default. You can see if they are imported by going to the Media section in your WordPress admin. If you see that the image is already there, but the post URL is linking to the old source, then you don’t need this article. Instead you need to update URLs using the Velvet Blues Update URLs plugin.

For those who don’t see their images in the Media section, please continue reading.

Importing External Images in WordPress

We are going to use a plugin called Import External Images. This plugin makes local copies of all the linked images in a post and add them as gallery attachments for the specific post. First thing you need to do is install and activate this plugin. After activating the plugin, go to Media » Import Images. The plugin will look for and display external images in your posts. All you need to do is click on Import Images Now button to import all these images.

Import External Images plugin imports 50 images at a time to run smoothly. However if you encounter the memory exhausted error, then you can increase your PHP memory limit. Once it has processed 50 images the plugin will show you the remaining images, click on Import Images Now button again to continue.

It will also show you linked images in the post editor in case you want to import images selectively. All you have to do is go the edit screen of the specific post and import the images that you want.

We hope this article helped you import external images to your WordPress site. If you have any questions or suggestions, then let us know by leaving a comment below.

To leave a comment please visit How to Import External Images in WordPress on WPBeginner.

How to Raise Money with Crowdfunding in WordPress

Editorial Staff — Fri, 17 May 2013 12:00:12 +0000

Raising funds for a project can be a very difficult task. In the past, we showed you how to create a donate form for non-profits using WordPress. While donate forms work great, it seems to be a thing of the past. These days people are utilizing crowdfunding platforms like Kickstarter or Indiegogo to raise a tons of money. But why work on the terms of these third party platforms and pay crazy fees, when you can do it all on your own with a few simple clicks. In this article, we will show you how to raise money with crowdfunding in WordPress.

What is Crowdfunding?

Crowdfunding is a term used to describe an organized effort by individuals to pull funds together for a project or an organization. Often startups use it for raising money by presenting projects to other people and allowing them to fund it rather than giving up equity to investors. Instead of receiving equity, each donor gets a reward of some kind. Usually these rewards include getting a shirt, stickers, other goodies, or an actual product. The reward each donor receives usually base on the amount they donate. Crowdfunding is a great way for individuals, startups, and even non-profit organizations to raise money.

Crowdfunding with WordPress

IgnitionDeck is a WordPress crowdfunding plugin that makes it easy for you to setup your own crowdfunding campaign within minutes. You can utilize their easy to use admin panel and professional skins to customize the look of your site. It has built-in integration of large social networks. Aside from the social networks, the embeddable widget makes it really easy for others to share or even embed your campaign on their sites. You have the ability to create multiple donor levels to reward your supporters accordingly as well as monitor all revenues in real time.

The best part about using IgnitionDeck WordPress crowdfunding plugin over third-party platforms like KickStarter or Indiegogo is that you can eliminate the middleman and third-party fees. We will cover the Pros and Cons later in this article. First lets look at how you can setup a crowdfunding campaign in WordPress.

Setting up a Crowdfunding Campaign in IgnitionDeck

Launching your first campaign takes only a few minutes once you have installed and activated IgnitionDeck. After activation it adds two menus to your WordPress admin menu(Projects and IgnitionDeck). Before you can create your project, you need to configure the plugin, so it works the way you like. Clickk on the IgnitionDeck menu to start modifying the settings.

The settings are easy to follow. You probably should start with choosing a theme for IgnitionDeck projects and enable social buttons. Next you should head on over to the Payment Settings tab where you can provide your PayPal email address. Edit any other settings that you like and click save settings.

Now you are ready to add projects. Go to Projects » Add New Project to start. On this page, you can add the project name along with other details by using the project metabox. You can set the funding goal, campaign start/finish dates, type of campaign etc. Once you are done, then you need to add the shortcode [project_page_complete product="1"] in to post edit area and publish your project.

After filling out your project details, you would need to create three additional pages. The first page is for project details page, you can leave it to the current page. The second page is the purchase page. This is where users will checkout and make the payment. To display the payment form on that page, you need to use the shortcode [project_purchase_form] in the page and publish it. The last page is a thank you page. You can use the shortcodes to add content from your project or simply thank users for their contribution. Once you have created those pages, come back to your project and select those pages from the drop down menu.

IgnitionDeck Crowdfunding plugin also creates embedable widgets which allows your users to embed your campaign on other websites. To encourage donations, it has a feature called donor levels. You can set rewards for each level to further motivate the donors.

Pros of using IgnitionDeck

The first obvious benefit of using IgnitionDeck is cost savings. When you are raising money on third-party platforms like Kickstarter or Indiegogo, you are paying them for raising money and the amount you pay them depends on how much money you raise. The more money you raise, the more you would be paying them. Using IgnitionDeck you would you not be paying anyone to raise money.

To give you more context: Kickstarter takes 5% of all the money you raise. On top of that you are also subject to the Amazon payment processing fees which is around 3%-5%. That’s about 9% of your total amount raised which can be a lot. On the other side, IgnitionDeck only cost $79. You have to pay 3% payment processing fees to PayPal. If you already have a WordPress site, then you don’t have any added cost. If you don’t have a WordPress site, then you should setup a WordPress site regardless.

IgnitionDeck is hosted on your own WordPress site. You can integrate it deeply with other tools on your website. There are many extensions available for free which can integrate IgnitionDeck with other popular tools such as Mailchimp and Aweber mailing lists, Facebook, Pinterest, Google Drive, Easy Digital Downloads, etc. There is even a module available for Stripe payment gateway in case you want to provide an alternate payment method on your site.

The key is that your brand remains the main focus and people will be contributing because they trust you not because they trust a third party platform. This strengthens your brand and helps you build a strong community of people who are really invested into your product and ideas.

Cons of using IgnitionDeck

Third party platforms like Kickstarter already have a large community of users who trust Kickstarter’s brand. If you are just starting out on your own website then you would probably want to go to a place where users already exist instead of building your own user base. However, if you already have a small community, then you can grow it further with IgnitionDeck.

Another downside of using IgnitionDeck on your own website could be the management of website. You will have to worry about web hosting, upgrades, backups, plugins and maintenance. On Kickstarter, you use their infrastructure to raise the money. However, lets not forget that there is a cost to using their infrastructure which can be way higher than IgnitionDeck and WordPress.

The social reach of a Kickstarter project is an influential factor. To have the same kind of effect on your own website, you will probably have to work a lot harder. Major online publications are always looking at KickStarter projects to see if something interesting catches their eyes.

Raising money with Crowdfunding in WordPress with IgnitionDeck is a cost effective, easy to use, and powerful solution. It is flexible and quite easy to extend and integrate into any WordPress theme. We hope that this article helped you learn how to raise money with crowdfunding in WordPress. Would you like to try crowdfunding on your own site or would you rather use a third-party platform? Let us know by leaving a comment below.

To leave a comment please visit How to Raise Money with Crowdfunding in WordPress on WPBeginner.

How to Ask Readers to Add Your WordPress Blog Icon on iPhone

Editorial Staff — Thu, 16 May 2013 12:14:33 +0000

Recently one of our users asked us how to add the little notification that asks their iPhone users to add a bloc ifon to their home screen. This feature was being heavily used by popular sites like TechCrunch and others. If you have a great looking responsive design for your WordPress blog, and you have a good number of mobile users, then it makes sense for you to implement this technique. In this article, we will show you how to ask your readers to add your WordPress blog icon on their iPhone or iPad home screen. This encourages readers to visit your site more often because they have a one-click access to your website similar to an app.

Editor’s Note: please only do this if your mobile site is functional and actually looks good. Otherwise these things can be pretty annoying.

First thing you need to do is install and activate the Add to home screen WP Plugin. Upon activation, a new settings page will be added under Settings » ATHS Options. The settings page allows you to control the behavior and functionality of this plugin. In the settings page, you need to add your website’s icon. You want the icon to be recognizable because this is what your users will see on their home screen. To add an icon go to Media » Add New in your admin panel. Upload an image file with these exact dimensions (144×144 pixels). Copy the URL of this image file and paste it in the plugin settings page.

Once you do that, then you are good to go. This plugin will work on iPhone, iPad, and iPod touch devices. However, it will only work on the safari browser. When a user visits your website, they will see a notification asking them to add your blog’s link as a web app on their device. They can tap on the notification to install your website as a web app. If you provided an icon on the plugin settings page, then it will be used as the home screen icon. Otherwise, a snapshot of your web page will be used as icon.

Add to home screen WordPress plugin provides you with an option to open your website in the fullscreen web app mode instead of Safari web browser. It is recommended that you choose the fullscreen mode so that the users who have already added your blog will not see the balloon notification each time they visit your website. To do that go to Settings » ATHS Options page. Scroll down to Navigation Options , and select Fullscreen mode from Choose your browser drop down menu.

We hope that this article helped you add a notification that ask your readers to add your WordPress blog icon on their iPhone. What are your thoughts on these balloon notifications? Do you ever add them on your iPhone? Would you add this on your site? Let us know by leaving a comment below.

To leave a comment please visit How to Ask Readers to Add Your WordPress Blog Icon on iPhone on WPBeginner.

How to Add the Facebook Like Box / Fan Box in WordPress

Editorial Staff — Wed, 15 May 2013 12:00:06 +0000

Facebook like box also known as Facebook fan box has become a must have element for many website. It allows website owners to provide their users with an easy way to join their facebook community and get updates right in their Facebook news feed. Recently one of our users brought it to our attention that we have not covered the topic of how to add the facebook like box in WordPress. Although we have covered how to add the facebook like button, facebook send button, and facebook comments. In this article, we will show you how to add the facebook fan box in WordPress.

Adding Like Box using Official Facebook Plugin for WordPress

Perhaps the simplest way to add a facebook like box to your WordPress site is by using the official Facebook plugin for WordPress. First thing you need to do is install and activate the Facebook plugin. After activating the plugin, go to Appearance » Widgets. Simply drag and drop the Facebook like box widget to your sidebar. You will need to provide the URL of your facebook fan page in the widget configurations.

The widget has the same options as Facebook social plugins for websites. You can choose to show a stream, show faces, remove header, change border color. There are currently only two themes available light and dark.

Adding like Box Manually Without using any Plugin

It is possible to add Facebook like box manually without using any plugin. Go to Facebook Social Plugin’s Like Box page. Provide the URL of your Facebook page and configure the looks of the like box.

Press the Get Code button to get Like box code.

Facebook provides you multiple ways to add the like box code on your website. You can choose from HTML5, XFBML, and iframe. We will show you how to add each of them but you need to choose one. In our opinion HTML5 is a reasonably good option for most WordPress powered websites. XFBML is good for people using other Facebook plugins that use XFBML to display Facebook buttons. Use iframe if the first two options don’t work for you.

Adding HTML5 Facebook Like Box Code in WordPress

Click on the HTML5 tab from the code window and copy the first part of the code. They recommend that you paste it right after tag which is usually found in your header.php file. However, it will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. The first part of the code would look like this:

This javascript connects your website to the Facebook’s javascript library. Now copy the second part of the code, which would look something like this:

This part of the code tells the javascript that you loaded earlier to display the like box at this location and with these parameters. For the sake of this example, we will paste this code in the sidebar widgets. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and paste the code inside it. Save your widget and check your website.

This will work in any other area of your site as well. If you are savvy with code, then you can paste this in your footer, after post, etc.

Don’t forget to change the facebook fan page URL to your own page URL.

Adding XFBML Facebook Like Box Code in WordPress

Click on XFBML tab to get the code for XFBML Facebook like box. To add an XFBML Facebook Like Box you need to add three tiny pieces of code in WordPress.

Copy the first piece of code and paste it in your theme’s header.php file right after tag. Similar to the last one, this code will work anywhere in the body. To make things easy on yourself, you can simply add it in the footer by using our Insert Headers and Footers plugin. This code would like something like this:

This tiny javascript function connects your website to the Facebook’s javascript library.

The second line of code is an XML namespace declaration, and you need to add it in the tag of your site. The easiest way would be to open your theme’s functions.php file, paste the following code:

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

Lastly, copy the third line of code which would look something this:

This code tells the javascript that you have loaded in the first step, to display the like box at this location and with these parameters. Go to Appearance » Widgets. Drag and drop a text widget to your sidebar and inside that text widget paste the third line of code. Save your changes and preview your website.

Adding Facebook Likebox iframe in WordPress

Click on the IFRAME tab to copy the iframe code. Go to Appearance » Widgets and drag and drop a Text widget to your sidebar. Paste the iframe code inside the text widget and save changes. Open your site to preview the facebook fan box.

We hope this article helped you add Facebook Like box / Fan box on your WordPress site. For questions and feedback please leave a comment. You can also follow us on Facebook.

To leave a comment please visit How to Add the Facebook Like Box / Fan Box in WordPress on WPBeginner.

How to Install WordPress on your Windows Computer Using WAMP

Editorial Staff — Tue, 14 May 2013 12:00:37 +0000

Did you know that you can install WordPress on your personal computer for learning and testing purposes. The process of installing WordPress on your personal computer is also known as setting up a local server environment or localhost. Often theme designers and plugin developers install WordPress on a local server environment to speed up their development process. An average user can use the local server environment to test plugins and/or make changes to the site before making it live for their audiences. In this article, we will show you how to install WordPress on your Windows computer using WAMP.

Note: If you install WordPress locally on your computer, then the only person who can see that site is you. If you want to have a live WordPress site available to the public, then you need to have a Domain and WordPress Web hosting. We recommend that you follow this guide on how to install WordPress.

What is WAMP?

WAMP or WampServer is a compilation of Apache web server, PHP and MySQL bundled for Windows computers. Basically, you need WAMP to setup your own local server environment and install WordPress on Windows. There are other clients for Windows such as XAMPP, but we use and recommend WAMP. It is free and easy to use.

Installing Wampserver on your PC

First thing you need to do is go to WampServer website and download the latest WampServer. You will be presented with various options on their download page. Simply choose the one that applies to your Windows (64-bit or 32-bit). When in doubt, select the 32-bit version because it will work on 64-bit versions of Windows.

Once you have downloaded WampServer, run the installation program and follow on-screen instructions. At one point during the installation, WampServer will ask for the location of the default web browser. By default it will use Internet Explorer, but you can change that to Google Chrome or Firefox by locating the browser in Program Files.

Once you are done with the installation, launch WampServer.

Setting Up a Database for WordPress

WampServer comes with phpMyAdmin, a web based application to manage MySQL databases. Click on the Wampserver icon in windows taskbar and then click on phpmyadmin.

phpMyAdmin will open in a new browser window. Click on Databases in phpmMyAdmin to create a new database for WordPress. Choose a name for your database and click on Create button.

Installing WordPress on Windows with WAMP

Download a copy of WordPress from WordPress.org. Extract the zip file and copy the wordpress folder. Go to C:\wamp\www\ and paste wordpress folder there. You can rename the wordpress folder to anything you want for example mysite, wpbeginner, etc. For the sake of this tutorial, we renamed our wordpress directory to mysite. Now open a web browser and go to:

http://localhost/mysite/

WordPress will inform you that it can not find a wp-config.php file. Click on the Create a Configuration File button to create it.

On the next screen, you need to provide your database information. The database name will be the one that you selected. In our case, we called it test_db. By default your database username will be root, and there is no password, so you can leave it blank. Click on the submit button and WordPress will create a configuration file for you.

After this you will see a screen informing you that WordPress has successfully created the configuration file, and you can proceed with the installation. Click on Run Install button.

On the next screen, fill out the installation form. You need to provide a title for your website, choose an admin username and password, and provide admin email address. Finally press the Install WordPress button.

WordPress will quickly run the installation and create database tables. Once done, you will see a success message after the installation. You can then proceed to your WordPress by clicking on the Log in button.

Troubleshooting WAMP Skype Error

If you have Skype installed and running then WampServer may not be able to work properly due to a conflict with Skype. The conflict is caused by both Apache and Skype using the same port 80. There is a simple fix for this problem. Open Skype and go to Tools » Options. Click on Advanced and then Connections. Uncheck the box that says Use port 80 and 443 as alternatives for incoming connections. Save options and restart Skype.

Enabling Pretty Permalinks in WAMP

Pretty permalinks will not work by default on your local server environment. All your URLs will look like localhost/mysite/?p=18. If you go to Settings » Permalinks and use one of the other opttions, then it will show you “page not found” errors. We have already written about a solution here that will show you how to enable custom permalinks in WAMP.

We hope that this article helped you install WordPress on your Windows computer using WAMP. Having a local server environment is great for learning and testing purposes. Remember, if you want to run a blog for other people to see, then you do not need to install WordPress on your computer. You need to install WordPress on a web hosting provider. If you have any questions, then please feel free to ask in the comments below.

To leave a comment please visit How to Install WordPress on your Windows Computer Using WAMP on WPBeginner.

How to Display Round Gravatar Images in WordPress

Editorial Staff — Mon, 13 May 2013 12:35:38 +0000

Recently, we showed you how to style your comments layout and how to style your comment form. One of our users emailed us and asked “how did you make your gravatar images round? Are you storing gravatar images locally to get them to be round?” In this article, we will show you how to display round gravatar images in WordPress. We will use the border-radius property of CSS3 to create circular gravatar images.

First thing you need to do is edit your theme’s style.css file. You can do this by using a FTP program or by going to Appearance » Editor in your WordPress admin. Next, you want to add the following code in your CSS file:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

This should work on most WordPress themes. However, if this does not work on your theme, then there is probably some plugin or your theme function messing with the default classes used for gravatar in WordPress. In order to find out which css class gravatar images are using in your theme, you need to open a blog post that has comments. Scroll down to the comments section, and right click on the gravatar image to select Inspect Element. It will show you the source code for your gravatar, like this:

If the gravatar image has something other than avatar then use that instead of .avatar in the above css code.

We hope that this article helped you display round gravatar images on your WordPress blog. Let us know if you have any questions or feedback by leaving a comment below.

To leave a comment please visit How to Display Round Gravatar Images in WordPress on WPBeginner.

How to Hide Title for Selective WordPress Posts and Pages

Editorial Staff — Fri, 10 May 2013 12:00:58 +0000

In our post about how to hide widget titles, we had an interesting comment that presented a solution to hide title on selective single post and pages. We thought that it might be useful for some people. In this article, we will show you how to hide title for selective WordPress post and pages. We will also show you how to hide title of all WordPress posts and/or pages.

Hide Titles for Selective Posts and Pages

Do you want to hide titles for selective posts and pages without editing a single line of code? Then all you need to do is install and activate the Hide Title plugin for WordPress. After activation, go to the edit screen for the specific post and page. You can do this by simply clicking on the Posts or Pages menu in your WordPress admin and clicking on the item that you want to edit. On the edit screen, you will see a Hide Title meta box like this:

All you need to do is check this box and click on update or publish post button. That’s it. Now this plugin will hide the title on singular page views. What that means is that it will still show the title on your homepage or other archive pages, but not on the single page views. Open the post in the single post view to test the result to make sure that everything looks right.

This solution can be pretty handy if you are creating a simple landing page and you don’t want to show the title.

Hide Titles for All WordPress Posts and Pages

We can’t think of a reason why someone would do this, but lets look at how to hide the titles for all WordPress post and pages for the sake of learning. If for some reason, you want to hide title for all posts and pages on single pages, then you can achieve this by editing your theme. There are few ways of doing this.

The easiest solution would be add this code to your WordPress theme’s functions.php file.

function wpb_hidetitle_class($classes) {
if ( is_single() || is_page() ) : 
$classes[] = 'hidetitle';
return $classes;
endif; 
return $classes;
}
add_filter('post_class', 'wpb_hidetitle_class');

This filter simply adds an extra class .hidetitle to the post_class() function only when a single post or page is displayed. However, this filter will only work if your WordPress theme has support for the post class. If you want to do this for posts only and not pages, then just get rid of the part || is_page().

After adding this function, you need to add this css rule into you theme’s stylesheet.

.hidetitle .entry-title { 
display:none;
}

In the above CSS we have used display css property to hide the post and page title. However this CSS rule will only work if your WordPress theme uses entry-title in the post or page title. To find out which CSS class your theme uses for post titles, simply open your post in Google Chrome or Mozilla Firefox and take your mouse over to post title. Right click and select Inspect Element. Your browser will split up and you will see page source highlighting the source code for post title where you can see the CSS class used by your theme.

Lets assume that your theme uses article-title as CSS class for post titles. Simply change the CSS like this:

.hidetitle .article-title { 
display:none; 
}

The reason why we say that the above solution is the easiest one is because it will work for child themes of popular theme frameworks like Genesis and others. It will also work just fine for standalone WordPress themes.

Now both of the solutions that we have mentioned above will hide the title, but they are still loading the titles. So in other words, they are hiding it but not removing it. If you are a theme designer or someone who wants to remove the post or page title from your template, then you need to remove the_title code from appropriate theme files.

If you only want to do this for single post views, then you will likely find this code located in your single.php file. However, if you want to do this for through out the site, then you will need to edit files like index.php, archive.php, single.php, and any other file that contains a loop basically. It will require trial and error if you are new to this.

If you are working with one of the theme frameworks, then you would want to stick with the plugin solution or the post_class solution that we showed you.

We hope that this article helped you hide the title for specific WordPress posts and pages. What possible use cases can you see where you would want to hide post or page titles in single views? Let us know by leaving a comment below.

To leave a comment please visit How to Hide Title for Selective WordPress Posts and Pages on WPBeginner.

How to Style Your WordPress Comments Layout

Editorial Staff — Thu, 09 May 2013 12:50:47 +0000

Recently we showed you how to style the WordPress comment form, and we thought it would be incomplete if we did not write about styling WordPress comments layout. In the past, we have discussed that there are default WordPress generated CSS classes and IDs to help make it easier for theme designers to style their templates. In this article, we will be using those default classes to show you how to style your WordPress comments layout and some of the cool things you can do with it.

For the sake of this example, We will be modifying the default Twenty Twelve WordPress theme in this article. Note: This article is for beginning theme designers and DIY users who have fair understanding of HTML and CSS.

Default WordPress Comments Classes

By default WordPress generates these classes for elements in the comments template:

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

How to Find Which CSS Classes You Need to Edit

Before we move on to styling WordPress comments layout, a little tip for our new users. Google Chrome and Mozilla Firefox web browsers come with a handy tool that you can use to improve your WordPress theme development skills. The tool is called Inspect Element. Simply take your mouse to an element on a web page, right click and choose inspect element. Your browser window will split into two rows and in the lower window you will see the source code of that element. Also in the lower window, you will be able to see CSS elements and how they are styled. You can even edit the CSS in there for testing purposes. It’s important to remember, anything you change using the Inspect Element is only visible to you. The moment you refresh the page, those changes will disappear. To make the changes permanent, you have to use your style.css file or other appropriate files in your themes.

Adding Odd and Even Background Colors for Comments

Having a different background color for odd and even comments is a design trend that has been around for some years now. It helps the readability specially if you have a lot of comments. It also looks really good with certain theme colors which is why many designers want to utilize this functionality. To help designers achieve this goal, WordPress adds an odd and even class to each comment respectively.

You can easily add the odd/even styling for comments in your theme’s style.css by pasting the following code.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

The result would look something like this:

Styling Comment Author and Meta Information

WordPress also adds classes to elements displayed in each comment header. This allows theme designers to customize the display of author information and other comment meta such as comment date and time. Here is a sample code to paste in your theme’s style.css file to style these elements differently. In this example we have added background color to comment meta along with some spacing.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

This is how it should look like:

Styling Post Author Comments Differently

Often times you might see that post author comments are highlighted either with a different background color or some additional badge. WordPress adds a default class bypostauthor to all comments made by the post’s author. WordPress theme designers can use this class to style post author comments differently.

Some themes, use their own callback function to display comments. Using the callback function, these themes may add additional information to a comment by post author. For example, Twenty Twelve uses the following line in the comment callback function twentytwelve_comment() (located in functions.php file of the theme).

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? ' ' . __( 'Post author', 'twentytwelve' ) . '' : '' );

This code adds Post Author to the comment meta information. Depending on how your WordPress theme handles comments by the post author, you can modify that to anything you want.

If you are using a different theme than Twenty Twelve, then you need to find out how your theme handles comments. Simply open your theme’s comments.php file. If your theme is using its own callback function, then you would see it inside wp_list_comments function, like this:

 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

In the above example, you can see that the theme is using twentytwelve_comment as the callback function. If a callback function is specified, then the most probable location to find this function is in your theme’s functions.php file.

In this example we are changing this function to display Editor instead of Post Author. To do that we have modified the comment callback function like this:

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? ' ' . __( 'Editor', 'twentytwelve' ) . '' : '');

We are also going to modify the way it looks by adding the following in our theme’s style.css file like this:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

This is how it would look like:

Styling Comment Reply Link in WordPress Comments

Most WordPress themes have a reply link below each comment. This functionality is only displayed if you have threaded comments enabled. To enable threaded comments, go to your WordPress admin (Settings » Discussion). Look at the section where it says other comment settings, and check the box for enable threaded (nested) comments.

The default CSS classes generated by WordPress for the reply link are reply and comment-reply-link. We will be using those classes to modify the reply link and turn into a CSS button.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

This is how it would look like:

Styling Comment Edit Button

In most WordPress themes, logged in users with the capability to edit comments can see a comment edit link below each comment. Here is a little CSS that uses the default class comment-edit-link to modify the appearance of the link.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Here is how it would look like:

Styling Cancel Comment Reply Link

In most good WordPress themes, clicking on the Reply link opens up the comment form just below the comment you are replying to with a link to cancel comment reply. Lets modify this cancel comment reply link by using the default CSS ID cancel-comment-reply.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

Here is how it would look like:

Styling the WordPress Comment Form

Usable, aesthetically pleasant and stylish comment forms encourage users to leave a comment on your blog. Earlier we have written a detailed article about how to style WordPress comment form. We would highly recommend that you go check that out to see how you can take your WordPress comment form to next level.

We hope that this article helps you style your WordPress comments layout. If you have any questions or suggestions, then please feel free to let us know by leaving a comment below.

To leave a comment please visit How to Style Your WordPress Comments Layout on WPBeginner.

How to Disable Image Attachment Pages in WordPress

Editorial Staff — Wed, 08 May 2013 12:45:18 +0000

WordPress by default creates a single page for each attachment that you have on your site. This includes images, audio/video files, pdfs, etc. This functionality is great for photographers, but not so much for the rest of us. Often we get complaints from beginners who accidentally linked their images to the attachment pages, and they don’t like the way it looks. That’s a big issue because a lot of themes don’t have special templates for the image attachment pages. Sometimes an image on your website can become popular and people might start landing on the attachment page directly from Google. Ideally you would want them to land on your post and see the image in the context you have used it. In this article, we will show you how to disable image attachment pages in WordPress.

If you are already using WordPress SEO by Yoast plugin, then go to your SEO » Permalinks options page. All you have to do is check the box next to “Redirect attachment URL’s to parent post URL”. This will redirect users arriving at attachment pages to the parent post.

For those who are not using the WordPress SEO by Yoast plugin, you can still disable image attachment pages and redirect users to parent post using another plugin called Attachment Pages Redirect. All you have to do is install and activate the plugin. Upon activation the plugin starts redirecting users landing on attachment pages to parent post. If no parent post is found, then the users are redirected to homepage. This plugin works out of the box and has no settings page. Simple and easy.

If you are among those who don’t like plugins, then there is an option for you as well that. Create a new file in your WordPress theme folder and name it image.php. If your theme already has an image.php file, then you need to edit that instead. All you have to do is add this code as the first line in your image.php file :

post_parent)); ?>

Save image.php file and upload it into your theme directory. Now when a users reaches the image attachment page, then they will be redirected to the parent post.

Lastly, just want to emphasize that there is nothing wrong with using good plugins. See our article on how many plugins should you install on your site. We recommend that everyone use WordPress SEO by Yoast plugin, so doing this is as simple clicking on one checkbox.

On our site, we haven’t disabled image attachments entirely because there are some instances where we want to send folks to a specific chart or image that we have on the site. Instead what we have done is that we excluded it from our sitemap. Furthermore, we have added a meta robots text noindex, nofollow to all of our attachment single pages using Yoast’s SEO plugin. You can do this too by going to Titles & Metas tab and going under Post Types. Simply check the noindex, nofollow tag for ONLY the attachment post type.

We hope that this article helped you disable image attachment pages in WordPress and redirect users to parent posts. If you have any questions or feedback, then please let us know by leaving a comment below.

To leave a comment please visit How to Disable Image Attachment Pages in WordPress on WPBeginner.