Note: If you want to watch the video version of this, then we have it available in our free WordPress videos section.

Creating an Image Gallery in WordPress

First thing you need to do is to create a new post. Alternatively if you want to add the gallery to an existing post, then click to edit that post. Once you are on the post edit screen, you need to click on the Add Media button.

This will open the WordPress media uploader. Now you need to click on Create Gallery link that you see on the left side of the screen. To add images to the gallery, you can either upload the images from your computer or choose existing images from your media library (images that you have previously uploaded to your site). All you have to do is select the images you want by clicking on them. This will add a checked mark that you see on each image in the screenshot below.

Once you have selected all the images that you want to add in your gallery, click on “Create New Gallery” button in the media uploader. Media uploader will then show your selected images in the Edit Gallery view. Here you can add captions to your images, change gallery settings, and rearrange the order of images by simply dragging and dropping them in the order you want them to appear in. When you are done with editing the gallery, click on the Insert Gallery button.

Clicking on Insert Gallery button will close the media uploader and insert the gallery code inside your WordPress post. If you are using the Visual Editor then you will see a box in post edit area indicating that there is gallery code.

If you are using simple text editor mode to write your post, then you will see your gallery shortcode. Something like this:

[gallery ids="5,8,6,7,9,10,11,12"]

Check your gallery by clicking on the post preview button. If you are unsatisfied with the look then you can always click on Add Media button to edit gallery settings. You can rearrange order, increase or decrease image columns, add or remove an image or description. Once you are happy with the way it looks, you can publish your post and your gallery will be visible for everyone.

Note: Yes, this technique can be used for pages as well. If you want to add an image gallery to WordPress pages, then follow the same exact method.

Now that we have created an image gallery in WordPress, lets take a look at how to make it look prettier and easier to browse through.

Show Gallery Images in Carousel

The carousel view for images in WordPress gallery is similar to the photo view in Facebook. Originally this feature started out as part of the Jetpack plugin which is a collection of plugins released by WordPress.com. However, the problem with the Jetpack is that it requires you to connect your site with WordPress.com even if there is no need to do so. Sometime ago, we decided to fork the Carousel plugin from Jetpack and release it as a standalone plugin for everyone who wants to use it.

To use the carousel for your image galleries, first thing you need to do is install and activate the Carousel without Jetpack plugin. Once you activate it, this plugin will work out of the box meaning you don’t need to configure anything. Just go to your gallery post and click on an image in the gallery to see it in action. Or check out our image gallery below:

There are a few changes you can make to the plugin. To configure it go to Settings » Media scroll down to Image gallery carousel. Here you can choose either a black or white background for carousel view. Or disable exif data or the carousel view itself.

There are several other plugins to create amazingly beautiful image galleries with WordPress. However, for most people the default gallery feature is perfect for their needs. If you don’t mind playing with the codes, then check out this cool example of how we extended the default gallery functionality to create a photo album gallery in WordPress. If you find yourself adding a lot of images to your blog or you are a photoblogger, then we highly recommend that you check out showcase of best photography themes for WordPress.

We hope that you found this article helpful and it helped you create an image gallery in your WordPress site. If you have questions or suggestions, then please leave a comment below.

To leave a comment please visit How to Create an Image Gallery in WordPress on WPBeginner.

MAMP is an easy-to-install compilation of Apache, MySQL, and PHP bundled together for Mac. Using MAMP you can install WordPress on your Mac and test drive it. Most WordPress developers and designers use MAMP on their Mac for development purposes. However, your website on MAMP is only visible to you. In order to make it live you would need WordPress hosting.

How to Install MAMP on Mac

Go to the MAMP website and download MAMP. Once the download is finished, open the downloaded file. Drag and drop the image file inside it to your Applications folder. Follow the on screen instructions. You can now launch MAMP from Applications » MAMP.

Note: MAMP also installs MAMP Pro, so remember to click on the right one.

Before you get started, we recommend that you configure it to your liking. Click on the Preferences button to change the options. You will see a new dialog box. Lets start with the Ports tab. You need to enter ports which will be used by Apache and MySQL. Enter port 80 for Apache, and 3306 for MySQL. Setting Apache to use port 80 will allow you to access your local websites from http://localhost instead of http://localhost:8888. However, using port 80 also means that each time you start servers you will have to provide the admin password of your computer.

The next step is to set document root. Document root is the folder where you will create and store your websites. In the preferences dialog box, click on Apache and select the folder where you want to store your websites. Ideally, you should store your websites in a new folder inside your documents folder. You can name this folder anything you want, htdocs, mywebsites, wpdev, etc. For the sake of this example, we will call it mysite.

Click OK to save your changes. On the MAMP app screen make sure both Apache and MySQL servers are running.

Installing WordPress on Mac

Download a copy of WordPress from WordPress.org. Extract the zip file, copy the wordpress folder inside it and paste it in your MAMP document root folder. Rename this folder to anything you want e.g. mysite.

Click on Open Start Page button in MAMP application window. A new browser window will open. Click on phpMyAdmin from the top menu bar.

phpMyAdmin is a web based application used to manage MySQL databases. In phpMyAdmin click on Databases and then create a new database. You can name this database anything you want. We will use this database name in the next step.

Open a new browser window and type http://localhost/mysite. If you re-named the wordpress folder to something else, then use that name here. WordPress will notify you that it was unable to find wp-config.php file. Click on Create a Configuration File button.

On the next screen provide your database information. In the database name field, enter the name of database you created earlier. For database username and password fields use root. Use localhost as your database server.

WordPress will now connect to your database and create a configuration file for you. After this it will show you a success message. Click on Run Install button to proceed.

On the next screen, WordPress will ask you to provide your website information, choose a username and password, and enter an email address. Fill in the form and then click on Install WordPress button.

WordPress will now run the installation script, create tables inside database and set up your website. You will see a success message once the installation is complete.

That’s all, now you can run WordPress on your Mac using MAMP, just like you would run WordPress on a live web server. Just launch MAMP application to start your local server and use WordPress. Once you have played with WordPress on your localhost, then you can install WordPress on a live site.

We hope that this article helped you install WordPress on Mac using MAMP. For questions and feedback please leave your comments below.

To leave a comment please visit How to Install WordPress Locally on Mac using MAMP on WPBeginner.

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.

<?php 

if (class_exists('MultiPostThumbnails')) : 

MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');

endif;

 ?>

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:

<?php 

if (class_exists('MultiPostThumbnails')) : 

MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image', NULL,  'secondary-featured-thumbnail');

endif;

?>

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.

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.

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.

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.

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 <body> 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:

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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:

<div class="fb-like-box" data-href="http://www.facebook.com/wpbeginner" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

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 <body> 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:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=403924843027405";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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 <html>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:

<fb:like-box href="http://www.facebook.com/wpbeginner" width="292" show_faces="true" stream="true" header="true"></fb:like-box>

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.

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 &raquo 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.

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.

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.