Best Plugins to Use on a New WordPress Site

Here is a my list of the absolute best plugins to use on a new WordPress site. They are extremely useful and take a lot of the grunt work out of making your site amazing!

Best Free Plugins

5.WordPress SEO

This is a very powerful and easy-to-use plugin that I use on my site. It has some niftly litte features, including the ability to customize how your post/page will look like in the search engine results page.

4.Akismet

Hands down, the BEST plugin to use to block those nasty spam comments

3.Contact Form 7

I absolutely love this plugin and have used it on every single one of my project. It is a very easy-to-use and flexible plugin for creating neat contact forms.

2.Google Analytics

This is a pretty obvious choice for tracking any of your sites traffic, where its coming from, etc. There is however a nice little alternative if you are against Google for some reason: Clicky

1.Yet Another Related Posts Plugin

I like this plugin because it encourages your users to continue browsing your site, placing links to other related posts or pages

Best Paid Plugins

5.Widget Ninja ($10)

Widget Ninja is by far one of my favorite plugins, it allows you to customize which widgets are displayed on which pages, without having to creating a million different side bars

4.Revolution Slider ($15)

The Revolution Slider is a really nice plugin for having one of the those very trendy sliders on your home page. Worth the cash

3.User Profiles Plugin for WordPress ($17)

If you are creating a site that requires your users to have a profile, this is your plugin. It even syncs automatically with Woo-Commerce sites.

2.AdPress – WordPress Ad Manager ($35)

This is a bit more expensive, just about as much as some of the lower-end WordPress themes you can buy out there. I haven’t used this plugin myself, but from all the things that I’ve heard about it, it seems like a great plugin for all your advertising needs.

1.Vaultpress ($5-$40 monthly)

More than anything this plugin provides peace of mind. Making backups for your site is super easy with this plugin.


This list of plugins is far from complete. These are just a few of the plugins that I thought were worth mentioning. I hope it helped some of you find the plugin you were looking for!

Top 5 Websites to Learn Web Design – For Beginners

First off, I’m a newbie also.

I’ve only been working as a web developer for about 2 years, so I consider myself to still be a newbie. I am far from where I want to be. Thankfully there are a ton of seriously awesome developers out there that are willing to share some of their awesomeness with the rest of us.

Here are 5 of my favorites sites

5. Lynda

Lynda.com is pretty new to me actually, I just started using this site about 5 months ago. But the amount of knowledge and resources that is in this site is awesome! I believe that this site also comes with a monthly subscription, so that is why it’s not as high on the list as it could be.

4. W3 Schools

Ahhhh, the classic W3 Schools. This is where you can learn anything and everything that you will need when you are just a newbie. Every tag, selector, and attribute known to man can be found here. I find myself on this site more often than I’d like to admit, but I’m very glad this kind of resource exists.

3. Tuts Plus

Tuts Plus! An amazing resource for just about any type of Designer/Developer. Whether you are working on Photoshop, Illustrator, Mobile Apps, or Websites, this site has got you covered!

2. Codrops

Codrops is a seriously amazing website, chuck-full of resources that are extremely useful for real-world application!

1. Css-Tricks

This is Chris Coyier’s site dedicated to bringing amazing Tips & Tricks to your screen. Everything from Video Tutorials to Snippets of Code. This site has been with me since I wrote my very first lines of code! It is a must for any developer at any skill level.

Cool Head-Turn Trick.

Saw this awesome head-turn trick on ivivision.com and thought I would try and replicate it. With the use of a bit jQuery, CSS3 and HTML5 when you hover your mouse over the image horizontally, it appears as the image follows you.

DEMO

Check out this Pen!

HTML

There are two main areas here:

  1. The area that will hold the pictures
  2. The invisible overlay that will listen for the mouse-over
<div id="faces">
	  <div id="face-area">
	      <div id="image-1" style="display:none;">
		       <img src="http://alexandery.net/wp-content/uploads/2013/04/look-left3-e1365032206956.jpg" />
	      </div>
					<div id="image-2" style="display:none;">
						  <img src="http://alexandery.net/wp-content/uploads/2013/04/look-left2-e1365032152347.jpg" />
					</div>
					<div id="image-3" style="display:none;">
					  <img src="http://alexandery.net/wp-content/uploads/2013/04/lookleft3-e1365032364205.jpg" />
					</div>
					<div id="image-4" style="display:none;">
					  <img src="http://alexandery.net/wp-content/uploads/2013/04/center-e1365032031355.jpg" />
					</div>
					<div id="image-5" style="display:none;">
					  <img src="http://alexandery.net/wp-content/uploads/2013/04/look-right1-e1365032264729.jpg" />
					</div>
					<div id="image-6" style="display:none;">
					  <img src="http://alexandery.net/wp-content/uploads/2013/04/look-right2-e1365032403284.jpg"/>
					</div>
					<div id="image-7" style="display:none;">
					  <img src="http://alexandery.net/wp-content/uploads/2013/04/look-right3-e1365032457790.jpg"/>
					</div>

					<div id="the_faces_overlay">
						<div class="the_faces" data-number="1">
      </div>
						<div class="the_faces" data-number="2">
      </div>
						<div class="the_faces" data-number="3">
      </div>
						<div class="the_faces" data-number="4">
      </div>
						<div class="the_faces" data-number="5">
      </div>
						<div class="the_faces" data-number="6">
      </div>
						<div class="the_faces" data-number="7">
      </div>
				</div>	
		</div>	
</div>Check out this Pen!

CSS

The CSS just allows us to put those 2 main areas that we created in HTML where we need them to be. The overlay need to be directly on top of the area where the pictures will be displayed. Pretty self-explanatory. :)

body{
 background: #333 
}

#faces{
	width: 500px;
	height:333px;
 margin: 0 auto;
 border: 8px solid white;
}

#faces .the_faces{
	height: 333px;
	width: 14.2857143%;
	float: left;
	margin: 0;
	padding: 0;
}

#the_faces_overlay{
	position: absolute;
	top: 0;
	left: 0;
	width: 500px;
}

#face-area{
	height: 500px;
	width: 333px;
	position: relative;
}
Check out this Pen!

jQuery

So basically what is happening here is that when the mouse enters the div area, jQuery is looking for all the divs that start with “image-”. Depending on which area the user has their mouse on, will display a different image. When the user takes their mouse off of the main div area, it goes back to the default center view.

					jQuery(document).ready(function($){
       $("#image-4").show();
       $(".the_faces").each(function(){
							$(this).on("mouseover", function(){
								$("#image-"+$(this).attr("data-number")).show();
							}).on("mouseout",function(){
								$("#image-"+$(this).attr("data-number")).hide();
							});
						});
						$("#face-area").on("mouseleave", function(){
							$("#image-4").show();
						});
						$("#face-area").on("mouseenter", function(){
							$("#image-4").hide();
						});
					});
Check out this Pen!