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.

How to Raise Money with Crowdfunding in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

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.

How to Ask Readers to Add Your WordPress Blog Icon on iPhone is a post from: WPBeginner which is not allowed to be copied on other sites.

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.

How to Add the Facebook Like Box / Fan Box in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

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.

How to Install WordPress on your Windows Computer Using WAMP is a post from: WPBeginner which is not allowed to be copied on other sites.

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.

How to Display Round Gravatar Images in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

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.

How to Hide Title for Selective WordPress Posts and Pages is a post from: WPBeginner which is not allowed to be copied on other sites.

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 ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

This code adds <span>Post Author</span> 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:

<?php wp_list_comments( array( 'callback' => '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 ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

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.

How to Style Your WordPress Comments Layout is a post from: WPBeginner which is not allowed to be copied on other sites.

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 :

<?php wp_redirect(get_permalink($post->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.

How to Disable Image Attachment Pages in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

All what you have to do is add the following code in your theme’s functions.php file or a site specific plugin:

add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 );
add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );

Once you have done that, then you are done. You have successfully enabled oEmbed for text widgets. You can head over to Appearance » Widgets to test it. Simply add a Youtube video URL in your text widget, and watch the magic.

For those of you who want to know what this code does, it simply adds a filter widget_text allowing text widgets to run shortcode for oEmbed and auto-embed content.

For those who don’t like to deal with code, then you can simply activate Text Widget oEmbed plugin. It literally does the same thing. The plugin only has 2 lines of code that we shared above.

We hope that this article helped you enable oEmbed in text widgets. If you have any questions or comments, then please let us know by leaving a comment below.

How to Enable oEmbed in WordPress Text Widgets is a post from: WPBeginner which is not allowed to be copied on other sites.

What is a WordPress Child Theme

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. In the past, there was no easy way of updating WordPress themes without losing all the custom styling and changes that you had made. This becomes chaos when all the sudden you find out a widely used script in popular themes has a major exploit, and you need to update your themes ASAP. It becomes a tough choice because on one hand, you would lose all the custom styles if you update. On the other hand, you risk your site getting hacked if you don’t update fast enough.

The core team and the community decided to solve this problem by introducing the concept of parent theme and child theme. A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features without losing the ability to update the parent theme.

In theory, any WordPress theme can have child themes however not all WordPress themes are good parent themes. A parent theme with limited functionality and features is not exactly an ideal parent theme candidate in most cases. We will talk about the exceptions later on in the article.

A good parent theme also known as theme frameworks usually contains its own action hooks and filters. This allows designers and developers to create a robust custom WordPress site using child themes in a fraction of time.

Why do people use WordPress Child Themes?

Designers and developers use child themes to speed up their development. When using a good parent theme, you can drastically reduce the time it takes for you to create a WordPress site. All good parent themes aka theme frameworks offer tons of functionality and customization options, so you don’t have to code everything. DIY users often create child themes to tweak an existing theme without losing the ability to update the parent theme if needed.

Creating a WordPress child theme can be as simple as creating a new style.css file in a new folder. All you really need is one line in your new style.css header that defines the template (see the Codex for reference). A robust child theme can have just as many template files as the parent theme if not more. A child theme can have template files that are not even available in the parent theme.

When Should You Use a Child Theme?

The decision to use a child theme often depends on your needs. Most sites that we build for ourselves and our clients are child themes of the Genesis theme framework. In rare cases when the project is too complex or too simple, then we build it as a standalone custom WordPress theme. As WordPress developers, we need to streamline our workflow while creating quality themes. Creating a child theme of Genesis framework helps us accomplish just that.

For users we recommend child themes only if you find yourself constantly adding new functions to your theme’s functions.php file and/or constantly adding/modifying the style.css file of your theme. In these cases, we highly recommend that you use a child theme. A short while ago during our WordPress meetup talk, one of the members asked us what if you are only adding custom styles? Is it better to use a child theme or a custom CSS plugin?

The answer to that depends on how savvy and comfortable you are with technology. If you are only modifying the styles of a few elements, then using a custom CSS plugin works just fine. However, if you find yourself changing the entire color scheme, moving things around in the CSS, etc, then you definitely should consider using a child theme.

Picking a Good Parent Theme is IMPORTANT

All WordPress frameworks are parent themes, but not all parent themes are frameworks. We cannot stress this enough. While any WordPress theme can have child themes, not all of them are meant to be used as theme frameworks. We have seen numerous beginners who make the mistakes of creating a child theme of a parent theme that doesn’t offer much functionality.

If you are creating a child theme where you find yourself replacing a lot of the parent theme files, then you should rethink your process. For example you really like the Twenty Eleven theme, and you decided to create a child theme. In your child theme, you had the style.css file, and functions.php file. On top of that, you decided that you don’t like the way the footer looks, so added footer.php. Same for header, etc. If this is the case, then you shouldn’t be using Twenty Eleven as a parent theme. Rather you should be using it as a starter theme that you turn into your own custom theme.

We have had several users who created custom child themes which really should be totally independent custom themes because they had overridden almost all of the parent theme files.

In short, you should use a child theme when you need the functionality, features, and awesomeness of a powerful parent theme without writing much code for it yourself.

Advantages of Using a WordPress Child Theme

Like most things, there are advantages and disadvantages to using a WordPress Child theme. Let’s take a look at advantages first.

1. Safe Updates
A child theme automatically inherits the parent theme’s features, styles, and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme arrives, you can safely update it as all your modifications are saved in the child theme.

2. Easy to Extend

A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more.

3. Fallback Safe

When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme’s functionality available as the fallback option.

Disadvantages of Using a Child Theme

One of the biggest disadvantage of using child themes is the time you need to invest to learn about the parent theme. There is a learning curve specially when you are working with robust frameworks because each of them have their own hooks and filters. You really have to know those to maximize the potential. In our opinion, this learning curve is a one-time thing. For example the first few child themes that you create might take you longer, but after that you will be creating custom websites in a fraction of time. Your overall performance will improve.

Another disadvantage often pointed out is that your parent theme’s developers may loose interest and abandon it, drop a feature that you were using in your child theme, or bring a change that totally destroys your child theme. This is not as bad as it sounds. Mainly because all good WordPress themes are open source and GPL. If the parent theme developer abandons the project, then nothing says that you have to stop using it. Often times, other folks in the community step up to take over the project. If the original theme developers remove a certain feature, then you can simply add it in your child theme. You have the code for it. Lastly, if they make a drastic change that you don’t like, then you can always avoid updating. Theme updates are crucial when there is a security exploit. We always recommend users to update themes because it helps ensure future compatibility with other scripts and plugins.

If you are using a commercial theme framework like Genesis, then you have support option available to help you upgrade your theme or troubleshoot problems. Also a platform like Genesis is not going to just disappear because there is a stable business organization behind it with thousands of customers world wide. For example, they removed certain built-in widgets, but they made them publicly available as plugins for those who still wanted to use it.

Conclusion

It is important to know that even though you can always create a child theme of any WordPress theme, sometimes you may not need a child theme. Think about the number of changes you have planned for your child theme, if the changes you are planning are minor, then you can always create a custom-style.css file in your theme or use a Custom CSS plugin. If the changes are too extreme where you find yourself overriding the core parent theme files, then you probably should be creating a custom theme.

We hope that this article helps you understand what is WordPress Child Theme and whether it is a good fit for you or not. If you think we missed something, then please let us know in the comments below.

What is a WordPress Child Theme? Pros, Cons, and More is a post from: WPBeginner which is not allowed to be copied on other sites.