What’s Coming in WordPress 4.5 (Features and Screenshots)

The beta version of WordPress 4.5 was released last week. We followed the development closely, and we are excited to report that WordPress 4.5 is expected to be released during the second week of April, 2016. In this article, we will highlight what’s coming in… Read More »

The post What’s Coming in WordPress 4.5 (Features and Screenshots) appeared first on WPBeginner.

The beta version of WordPress 4.5 was released last week. We followed the development closely, and we are excited to report that WordPress 4.5 is expected to be released during the second week of April, 2016. In this article, we will highlight what’s coming in WordPress 4.5 with features and screenshots.

What to expect from upcoming WordPress 4.5

Note: You can try out the beta version on your computer or on a staging environment by using the WordPress Beta Tester plugin.

This is the beta release, which means no more new features will be added until the final release of WordPress 4.5. However, please know that some of these features may not make it into the final release.

Theme Logo Support

Adding theme logo from customizer is a long awaited feature. WordPress 4.5 will add theme logo support to WordPress core.

Many premium WordPress themes already allow users to upload custom logo using their own options panel. With the core support for the feature, it would become possible for users to do that from the theme customizer.

Theme Logo Support in upcoming WordPress 4.5

Themes would be able to define support for logo with size values like this:

add_image_size( 'twentysixteen-logo', 1200, 175 );
add_theme_support( 'site-logo', array( 'size' => 'twentysixteen-logo' ) );

If a theme does not support this feature, then it will not be visible in the customizer.

Visual Editor Improvements

Majority of WordPress users spend most of their time creating content. Anything that can make the writing experience better and faster is always a good thing.

WordPress 4.5 will bring some new improvements to the visual editor, which will improve the writing experience for users.

Inline Link Editing

WordPress comes with some great time saving shortcuts, which all help you write faster. One of these shortcuts is CTRL+K (Command+K on Mac), which allows you to insert links in posts.

This shortcut opens the insert link popup, which is a bit distracting.

With WordPress 4.5, pressing CTRL+K will show an inline insert link menu. Simply type the URL and continue writing your post without removing hands from keyboard.

Inline link editing in WordPress 4.5

More Inline Text Shortcuts

Inline text shortcuts were introduced in WordPress 4.3. They allowed users to quickly add formatting markup by using simple text shortcuts.

WordPress 4.5 is introducing more shortcuts like `code` for code and **bold** for bold.

New inline text shortcuts in WordPress 4.5

For those users who don’t like these shortcuts, here is how to disable inline text shortcuts in visual editor.

Improved Moderate Comment Screen

Many bloggers spend a lot of time moderating comments in WordPress. Comment moderation is a necessary evil that we all have to tolerate in order to combat comment spam in WordPress.

WordPress sends you an email notifications when there is a new comment submitted. Clicking on the approve, spam or trash link in the email will take you to a screen where you can see that comment with a button to perform the desired action.

This screen does not allow you to edit a comment. It also does not show you any formatting in comment text, which isn’t pleasant.

Moderate comment screen in WordPress 4.4.2

With WordPress 4.5, you will get to see an improved screen. It will show you the formatting in comment text as it would appear in the browser. It will also have a link to edit the comment.

Moderate comment screen in upcoming WordPress 4.5

Responsive Preview in Customizer

WordPress 4.5 will bring another cool addition to the customizer. You would now be able to see responsive previews of your site directly in the customizer.

You can click on the device icon at the bottom to switch the view between devices. Currently it shows Desktop, tablet, and mobile device previews. This gives you a generic idea of how your site would look on these devices.

Responsive previews in customizer

Optimized Image Size Generation

WordPress introduced responsive images in WordPress 4.4. This means that since 4.4, users on smaller screens get to see a smaller image appropriate for their screen.

This feature is great as it not only improves performance of websites on smaller screens, it also saves them money on data plans.

WordPress 4.5 will improve this further more. It will optimize images further to reduce their site upto 50% without any visible quality loss.

We still recommend saving images optimized for web for best results.

Allow Users to Login Using Email Address

It is hard to keep track of all the usernames we use across all the different sites. This is why many popular sites like Facebook, Twitter, and others allow their users to use their email address as username.

While you can easily forget your username, most people don’t forget their email address.

In the past, WordPress didn’t allow users to login with email by default. This is expected to change in WordPress 4.5.

Since each WordPress user on your site already has an email address associated with their account, they will now be able to use their email address to login.

WordPress 4.5 will allow users to login with email address

Developer Features

WordPress 4.5 will bring many under the hood improvements for developers. Here are some of the exciting improvements for developers:

Selective Refresh in Customizer – In customizer if a change has to be applied the entire page has to be reloaded. WordPress 4.5 will come with a robust framework allowing selective refresh in the customizer. This will make it incredibly fast, and it will allow developers to do great things with live previews. (#27355)

Customizable Embed Templates – WordPress 4.4 also introduced embeds which allowed users to embed posts from their own and other WordPress blogs. WordPress 4.5 will make the embed templates customizable so that theme authors can have custom displays. (#34561)

WP_Site Class – WordPress 4.5 will come with WP_Site class for multisite WordPress installs. (#32450)

Script Loader – Adding inline scripts will become easier with the introduction of wp_add_inline_script() in WordPress 4.5. (#14853, #35873)

We hope this article helped you learn what’s coming in WordPress 4.5. Let us know which features you find exciting and what you would like to see in future releases of WordPress?

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post What’s Coming in WordPress 4.5 (Features and Screenshots) appeared first on WPBeginner.

How to Make a Niche Review Site in WordPress Like a Pro

Do you want to create an online reviews site? Writing reviews of your favorite products allow you to help others in making a purchase decision while also earning referral fees, known as affiliate commissions. In this article, we will show you how to create a… Read More »

The post How to Make a Niche Review Site in WordPress Like a Pro appeared first on WPBeginner.

Do you want to create an online reviews site? Writing reviews of your favorite products allow you to help others in making a purchase decision while also earning referral fees, known as affiliate commissions. In this article, we will show you how to create a niche review site in WordPress like a Pro, so you can earn money from it.

Why Create a Reviews Site?

Creating a reviews website in WordPress

What’s the first thing that you do when you’re looking to buy something online? If you’re like most of us, then you check the online reviews of that product to see what others are saying about it.

This is why a popular online review site, TripAdvisor, is worth roughly $12 billion dollars.

Now while everyone cannot be as big as TripAdvisor, we know several folks that are earning anywhere from few hundreds to few thousand dollars a month from running a niche review site.

There are two popular ways of creating a reviews site. The first is to add a reviews section on your existing blog. The second is to create a completely independent online reviews site.

Regardless of the direction you choose, it’s important that don’t pick a highly competitive niche.

For example: there are tons of sites talking about digital camera reviews, but not as many that are talking about camera accessory reviews.

The secret to building a successful review site is to finding the right niche. A perfect niche has low competition, and it should be something that you’re passionate about.

Here are few factors to think about:

  • What resources can you offer to build traffic?
  • Can you easily attract advertisers? (i.e are there people selling paid products)
  • Are there affiliate programs available?
  • Are other people making money in this niche?
  • What is the competition like?

You can use tools like SEMRush, BuzzSumo, and Google Keyword Planner to help with research.

Once you have picked your niche, let’s take a look at how you can create a reviews site.

Step 0. Before You Start

To get started with WordPress, the first thing you would need is a good WordPress hosting and your own domain name. We highly recommend Bluehost because they will give you a free domain and 50% off their hosting plan (special for WPBeginner users). Bluehost is also an officially recommended hosting provider of WordPress.

If you want a Bluehost alternative, then take a look at Siteground who also offer the same special offer to WPBeginner users.

Once you have signed up for WordPress hosting and set up your domain name, the next step is to install WordPress on your hosting account. We have a step by step tutorial on how to install WordPress. Once you have installed WordPress, continue following this tutorial.

If you already have a WordPress site, then just move to step 2.

Step 1. Choosing the Perfect WordPress “Review” Theme

The first step after setting up your WordPress site is to select a perfect WordPress theme.

When you look around for WordPress themes, you will probably find tons of articles about the best WordPress review themes, stay away from those.

You don’t need a WordPress review site template. Most of those WordPress review themes are bloated and will lock you into use them forever.

That’s why it’s better to use a WordPress reviews plugin because plugins will work with any theme / design that you choose.

You will have the flexibility to change your themes in the future without having to hire a developer.

We have an article that will help you find the perfect theme and install it in WordPress.

Basically pick a theme that you like in terms of look and feel. We will show you how to add the reviews functionality in the next step.

Step 2. Installing the best WordPress Reviews Plugin

First thing you need to do is install and activate the WP Product Review plugin.

The base plugin is free, and does not lack features that would hold you back. However, for additional functionality you will need to buy their premium addons package.

The WP Review Pro Addons package costs around $75. WPBeginner users get an extra 20% off the regular price. Visit ThemeIsle coupon code to claim the discount.

WP Product Review plugin is easy to use and it helps you stand out in search engines by adding schema markup on your review.

In plain English, it adds those star ratings next to your reviews in Google to help you stand out.

Schema Review Example

So go ahead and install this plugin.

Upon activation, you will notice a new menu item labeled ‘Product Review’ in your WordPress admin menu. Clicking on it will take you to plugin’s settings page.

WP Product Review settings page

The settings page is divided into different sections. First you need to set up the general settings.

Start by selecting where you want to display the review box. There are three options to choose from. You can show the review box after or before the content, or you can manually add it using the shortcode.

The next option is to choose whether you want to allow users to add their reviews as comments. If you allow this, then you also need to select how much influence user reviews will have on the actual review.

After that you need to choose how many number of options, pros, and cons you want to be displayed. By default the plugin will allow you to add 5 of each. You can adjust that if you need.

Now move on to the rating colors tab in settings. This is where you can define the default colors used by the plugin for ratings. WP Product review uses different colors for excellent, good, not bad, and weak ratings.

Rating colors

You can change the rating colors to match with your theme.

Next, click on the ‘Typography’ tab in the settings. This is where you can choose the default text for pros and cons columns. You can also change the text colors for different sections.

Choose text colors for review box in Typography settings

The final tab on the settings page is the buy button. On this tab, you can select the colors you want to use for the buy button.

Buy button will also have your affiliate link, so it is important that you choose a color that encourages more users to click.

Buy button settings

Don’t forget to click on the ‘Save All Changes’ button to store your settings.

Step 3: Adding a Review in WordPress

Adding a review using WP Product Review plugin is quite easy. Simply edit or create a new post in WordPress.

You will write your main review, like you would write any other post in WordPress.

On the post edit screen, scroll down to the bottom, and you will find the ‘Product review extra settings’ meta box. Click on ‘Yes’ next to the option ‘Is this a review post?’.

Adding product review data in a review post

This will expand the meta box and you will now see the additional settings for your review.

First you need to provide product details like images, buy now button text, product or affiliate link, and product price.

Adding product details

After that you need to add your options. These are like different aspects of the product and how you grade it for those qualities. You can add a number from 0 to 100, where 100 is the highest grade and 0 is the lowest.

Product options

Next you will add the pros and cons lists. Add the best features of the product in the pros list and the features it lacked in the cons list.

Adding pros and cons of a product with your review

Once you are done, simply save or publish your post.

You can now visit the post to see the review box in action.

Product review box displayed  in WordPress review post

Step 4. Displaying Your Reviews in Sidebar

WP Product Review allows you to show your review posts in the sidebar and other widget-ready areas. Visit Appearance » Widgets page, and you will find the top products widget and the latest products widget in a list of available widgets.

Adding reviews widgets in WordPress sidebar

Simply add the widget to a sidebar and configure its options. You can select the number of products you want to display, product title and image display settings. Once you are done, click on the save button to store your widget settings.

Now go ahead and visit your website to see the reviews widget in action. It will show the latest reviews with ratings and product image.

Latest and top product reviews in WordPress sidebar

We hope this article helped you create a beautiful reviews site with WordPress. You may also want to see our list of 10 best affiliate marketing tools and plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Make a Niche Review Site in WordPress Like a Pro appeared first on WPBeginner.

WordPress vs Static HTML – What’s Best for Your Business Website?

Do you want to launch a business website but not sure how to get started? Recently while attending an event, one of the users asked us what’s the advantage of using WordPress over a static HTML site. If you had a developer tell you that… Read More »

The post WordPress vs Static HTML – What’s Best for Your Business Website? appeared first on WPBeginner.

Do you want to launch a business website but not sure how to get started? Recently while attending an event, one of the users asked us what’s the advantage of using WordPress over a static HTML site. If you had a developer tell you that you need a HTML site or was wondering because you had heard this elsewhere, then you’re in the right place. In this article, we will compare WordPress vs HTML and what’s best for your business website.

HTML vs WordPress for business websites

What is WordPress?

WordPress is a Content Management System (CMS). Content Management Systems allow YOU to manage your website from a user friendly interface.

You can make all the changes on your website from an admin area which is quite easy to understand, even for absolute beginners.

While there are many CMS out there, WordPress is the most popular one because it powers nearly 26% of all websites on the internet.

It is important not to confuse WordPress.org with WordPress.com. WordPress, the open source CMS is available on WordPress.org. On the other hand, WordPress.com is a blog hosting service. Please see our guide on the difference between WordPress.org and WordPress.com.

Having said that, let’s take a look at the pros and cons of using WordPress.

Advantages of Using WordPress

Easy to Update – You can simply login to your WordPress site and add new pages without paying your developer. WordPress is easy to use and has an intuitive user interface, which makes it easy for you to create or update pages on your site.

WordPress user interface

Professional Templates – There are thousands of ready-made templates that you can use on your site. These themes are developed by professionals from all over the world.

Incredibly Powerful – WordPress websites can be easily extended with plugins. By installing plugins, you can add any functionality to your existing website such as adding a contact form, adding a reservation system, adding a photo gallery, and more.

Full control and Ownership – You get full control of your website, its domain name, and all its contents. You can make any changes you want, and there is no limit on how much your site can grow in popularity, traffic, sales, and users.

Disadvantages of Using WordPress

Learning Curve – While WordPress is easy to use but it takes a while for most beginners to get familiar with the software. There is plenty of help available to get over this learning curve quickly, but it will take a little effort.

Maintenance – You will be responsible for keeping WordPress, installed plugins, and themes up to date. You can also use manged WordPress hosting who can do this for you.

What is a Static HTML Website

HTML is the markup language used to display web pages. Most websites on the internet use HTML with a variety of markup and scripting languages to create web pages.

Typically you will need to hire a web developer to create an HTML website for your business. They will use HTML, CSS, JavaScript and some other technologies to build your website.

HTML code behind a static HTML site

CMS software like WordPress use database to store and retrieve content. On the other hand, HTML websites have all your content in static files.

Having said that, Let’s take a look at advantages and disadvantages of a HTML website for your business.

Advantages of a HTML Website

Little to No Maintenance – Once your website is live, you do not need to install any updates or regularly backup. If nothing is changed, you can just backup your website once and forget about it.

Low Requirements – HTML websites don’t need servers with PHP or MySQL installed on them. They can run on cheaper server with low resources. Although most good web hosting companies offer PHP and MySQL support.

Disadvantages of a HTML Website

No Updates – Unless you know HTML/CSS, static HTML websites can be very difficult to update for beginners. You will need to hire a developer even for smaller tasks like adding new pages, updating old content, or uploading videos or images.

No Additional Features – If your business grows and you want to add a feature to your website like a store, a survey or poll, a gallery, etc. All of this would require you to hire a developer and in most cases they would recommend you to move to WordPress.

Costs – Considering that you will have to hire people even for smallest tasks, the cost of a HTML website could get much higher than a WordPress website.

What is Better? WordPress or HTML?

Now that we know the pros and cons of both WordPress and HTML websites. Let’s talk about which one is better for your business website.

If you are certain that you will never want to update, change, or add anything new to your website, then by all means go for a HTML website. It will be faster and will serve your purpose.

If you want to have the freedom and control of your website and not waste money on monthly retainers paying developers to add images, then WordPress is obviously the better choice.

For those who want grow their business website to make you more money, then WordPress is the way to go forward.

Using WordPress you can add content to your website without hiring anyone. You can create as many pages as you need at any time.

You can add a blog section to keep your customers updated, or even build your own email list and keep bringing more customers to your business.

You will be part of a global community of businesses using WordPress to manage their online presence. You will find plenty of free help, resources, tools and plugins to grow your business every day.

Instead of paying developers loads of money for smallest things, you will be able to spend that money on growing your business with WordPress.

How to Get Started With WordPress for Your Business Website?

First, you will need to sign up for a WordPress hosting service provider. These are specialized companies that will host your website on their servers.

We recommend Bluehost as they are the official WordPress hosting providers. They also offer our users a free domain name and 50% off hosting (see our Bluehost coupon).

WordPress is famous for its quick and easy installation. Take a look at our step by step WordPress installation tutorial for beginners.

After the installation you will need to select a theme for your website. You may also want to checkout the must-have WordPress plugins for business websites.

We hope this article helped you compare WordPress vs HTML and the best solution for your business website. You might also want to see our list of 19 types of websites you can create with WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post WordPress vs Static HTML – What’s Best for Your Business Website? appeared first on WPBeginner.

Benchmarking .NET code

You've got a fast car...photo by Robert Scoble used under CC

A while back I did a post called Proper benchmarking to diagnose and solve a .NET serialization bottleneck. I also had Matt Warren on my podcast and we did an episode called Performance as a Feature.

Today Matt is working with Andrey Akishin on an open source library called BenchmarkDotNet. It’s becoming a very full-featured .NET benchmarking library being used by a number of great projects. It’s even been used by Ben Adams of “Kestrel” benchmarking fame.

You basically attribute benchmarks similar to tests, for example:

[Benchmark]
public byte[] Sha256()
{
return sha256.ComputeHash(data);
}

[Benchmark]
public byte[] Md5()
{
return md5.ComputeHash(data);
}

The result is lovely output like this in a table you can even paste into a GitHub issue if you like.

Benchmark.NET makes a table of the Method, Median and StdDev

Basically it’s doing the boring bits of benchmarking that you (and I) will likely do wrong anyway. There are a ton of samples for Frameworks and CLR internals that you can explore.

Finally it includes a ton of features that make writing benchmarks easier, including csv/markdown/text output, parametrized benchmarks and diagnostics. Plus it can now tell you how much memory each benchmark allocates, see Matt’s recent blog post for more info on this (implemented using ETW events, like PerfView).

There’s some amazing benchmarking going on in the community. ASP.NET Core recently hit 1.15 MILLION requests per second.

https://t.co/6ndwe0WEqa Core – 2300% More Requests Served Per Second #aspnetcore #dotnet #WebDev https://t.co/mOufivMyuO

— Ben Adams (@ben_a_adams) February 18, 2016

That’s pushing over 12.6 Gbps a second. Folks are seeing nice performance improvements with ASP.NET Core (formerly ASP.NET RC1) even just with upgrades.

Upgraded stevedesmond.ca to @aspnet 5 RC (from b8), response time went from 20ms to 4ms. Not a typo. @DamianEdwards @shanselman @jongalloway

— Steve Desmond (@stevedesmond_ca) November 22, 2015

It’s going to be a great year! Be sure to explore the ASP.NET Benchmarks on GitHub https://github.com/aspnet/benchmarks as we move our way up the TechEmpower Benchmarks!

What are YOU using to benchmark your code?


Sponsor: Thanks to my friends at Redgate for sponsoring the blog this week! Have you got SQL fingers?Try SQL Prompt and you’ll be able to write, refactor, and reformat SQL effortlessly in SSMS and Visual Studio. Find out more with a free trial!


© 2016 Scott Hanselman. All rights reserved.
     
You've got a fast car...photo by Robert Scoble used under CC

A while back I did a post called Proper benchmarking to diagnose and solve a .NET serialization bottleneck. I also had Matt Warren on my podcast and we did an episode called Performance as a Feature.

Today Matt is working with Andrey Akishin on an open source library called BenchmarkDotNet. It's becoming a very full-featured .NET benchmarking library being used by a number of great projects. It's even been used by Ben Adams of "Kestrel" benchmarking fame.

You basically attribute benchmarks similar to tests, for example:

[Benchmark]

public byte[] Sha256()
{
return sha256.ComputeHash(data);
}

[Benchmark]
public byte[] Md5()
{
return md5.ComputeHash(data);
}

The result is lovely output like this in a table you can even paste into a GitHub issue if you like.

Benchmark.NET makes a table of the Method, Median and StdDev

Basically it's doing the boring bits of benchmarking that you (and I) will likely do wrong anyway. There are a ton of samples for Frameworks and CLR internals that you can explore.

Finally it includes a ton of features that make writing benchmarks easier, including csv/markdown/text output, parametrized benchmarks and diagnostics. Plus it can now tell you how much memory each benchmark allocates, see Matt's recent blog post for more info on this (implemented using ETW events, like PerfView).

There's some amazing benchmarking going on in the community. ASP.NET Core recently hit 1.15 MILLION requests per second.

That's pushing over 12.6 Gbps a second. Folks are seeing nice performance improvements with ASP.NET Core (formerly ASP.NET RC1) even just with upgrades.

It's going to be a great year! Be sure to explore the ASP.NET Benchmarks on GitHub https://github.com/aspnet/benchmarks as we move our way up the TechEmpower Benchmarks!

What are YOU using to benchmark your code?


Sponsor: Thanks to my friends at Redgate for sponsoring the blog this week! Have you got SQL fingers?Try SQL Prompt and you’ll be able to write, refactor, and reformat SQL effortlessly in SSMS and Visual Studio. Find out more with a free trial!



© 2016 Scott Hanselman. All rights reserved.
     

9 Best WordPress Portfolio Plugins for Designers & Photographers

Are you a designer or photographer looking for the easiest way to build a portfolio website in WordPress? There are plenty of WordPress portfolio plugins that allow you to easily build beautiful portfolio websites. However, finding the perfect portfolio plugin can be difficult for beginners.… Read More »

The post 9 Best WordPress Portfolio Plugins for Designers & Photographers appeared first on WPBeginner.

Are you a designer or photographer looking for the easiest way to build a portfolio website in WordPress? There are plenty of WordPress portfolio plugins that allow you to easily build beautiful portfolio websites. However, finding the perfect portfolio plugin can be difficult for beginners. In this article, we have hand-picked some of the best WordPress portfolio plugins for designers and photographers.

Top WordPress portfolio plugins

Choosing Between WordPress Portfolio Themes vs WordPress Portfolio Plugins

Many WordPress portfolio themes come with built-in functionality to create a portfolio website. So why would anyone want to choose a plugin when themes can do the job?

Themes in WordPress are only supposed to handle the visual appearance of your website. This includes, colors, styles, layouts, and presentation of your content.

Plugins on the other hand are the proper way to add functionality to your WordPress site such as slider, contact form, etc.

Adding a portfolio is a functionality and hence it needs to be added with a plugin.

Using a portfolio theme ties your website with that theme. If you change it, then you will loose your portfolio data. While it will still be stored in your WordPress database, it will not be visible with the new theme. Recovering it to be used in a new theme can be very difficult.

On the other hand, if you decide to use a plugin, then you are free to use it with any theme that you want.

Having said that, let’s take a look some of the top WordPress portfolio plugins.

1. Envira Gallery

Envira Gallery

Envira is a premium WordPress gallery plugin. It allows you to create beautiful image galleries and albums. Already used by thousands, Envira Gallery is the best WordPress plugin for photographers and designers.

Creating a portfolio with Envira Gallery is quite easy. Simply create galleries containing your portfolio items. Group galleries into Albums, and you are good to go. You can add your portfolio items anywhere on your WordPress site with the click of a button.

For detailed instructions, take a look at our guide on how to add a portfolio to your WordPress site.

2. Nimble Portfolio

Nimble Portfolio Plugin

Nimble Portfolio offers an easy way to add portfolio to your WordPress site. You can upload your images or other digital works by creating a new portfolio item.

Portfolio items are a custom post type where you will need to set portfolio item photograph as featured image. Nimble also allows you to group different images into filters.

The base Nimble Portfolio plugin is free and comes with limited skins. For more skins and features, you will need to purchase premium add-ons offered by the developer.

3. WordPress Portfolio Plugin

WordPress Portfolio Plugin

WordPress portfolio plugin is another free portfolio plugin. It allows you to automatically generate thumbnails of websites you add to your portfolio using ShrinkTheWeb API.

You can customize the appearance of portfolio items using custom CSS and HTML. You can group different portfolio items by adding them to Groups.

4. Portfolio Gallery

Portfolio Gallery

Portfolio Gallery is a popular free WordPress portfolio plugin. It comes with different viewing and display options. It allows you to sort portfolio items into categories.You can also add multiple images/videos per project.

One downside is that the base plugin is free but most of the plugin features are locked and are available with the paid version.

5. Projects by WooThemes

Projects by WooThemes

Projects is a free WordPress portfolio plugin written by the folks behind WooCommerce. It is a simple and basic portfolio plugin.

The plugin comes with a custom post type for projects. You can create as many projects as you want. Each project can have its own cover image, gallery, short and long description.

One downside is that it does not open your images in lightbox. Clicking on each project loads the project page. Clicking on each image will again reload image as attachment page.

6. Portfolio

Portfolio

Portfolio plugin simply allows you to create multiple portfolios with different projects in them. Each project can have its own cover image and gallery.

It is a free plugin, but most its features are locked and available in a paid version. It only offers one layout with free version. It also uses its own user interface for creating portfolios, which is fast but does not match rest of the WordPress UI.

7. NextGen Gallery

NextGen Gallery

NextGen is a popular WordPress plugin for creating image galleries. It can also be used to create your portfolio. You can create your image galleries and albums.

You can also tag your gallery items and display your portfolio with lightbox popups. The free version of plugin comes with good balance of features and functionality. However, you will need the paid version to get support and more features.

8. Portfolio by BestWebSoft

Portfolio by BestWebSoft

Portfolio by BestWebSoft is another popular choice for WordPress portfolio plugin. It can work for any kind of portfolio, but it is designed to focus on web development agencies.

It has custom taxonomies for executioners and technologies. You can mention users who worked on a project as executioners and technologies used in that project.

9. Custom Content Portfolio

Custom Content Portfolio

Custom Content Portfolio allows you to create a very basic portfolio. You can add your projects to categories and tags.

It allows you to add project details. Like you can enter client info, project start and finish date, website, etc.

For project images inside the project details, you will still need to add extra images. The featured image will be used as a cover image. You will also need to configure your theme, so that it displays the projects in a grid layout.

That’s all we hope this article helped you find the best WordPress portfolio plugins for designers and photographers. You may also want to see our list of 41 best free photography themes for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 9 Best WordPress Portfolio Plugins for Designers & Photographers appeared first on WPBeginner.

Selecting the Perfect WordPress Theme – 9 Things You Should Consider

Selecting the Perfect Theme for WordPress is an essential step to your blog’s success. We have a created the ultimate guide that will help you select the perfect WordPress theme, install the theme in your WordPress along with the list of themes we suggest.

The post Selecting the Perfect WordPress Theme – 9 Things You Should Consider appeared first on WPBeginner.

Most beginners feel overwhelmed when it comes to selecting a theme for their WordPress site. There are thousands of free and paid options. Each theme looks better than the other. How do you choose the best theme for WordPress? In this article, we will share the 9 things you should consider, so you can choose the best WordPress theme for your site.

Selecting the perfect theme for Your WordPress site

Why You Should be Careful When Choosing a WordPress Theme?

WordPress is used to create all kind of websites. That’s why each theme caters to a different market.

Your WordPress theme should complement the content of your website. For example, if you are creating a blog on politics or social issues, then you would want a theme that improves readability.

Readability

Many WordPress themes come with tons of customization options. If not coded properly, these options can make it difficult for you to change themes or use other WordPress plugins. You will be locked into that theme or will have to pay a developer to help you switch.

On the other hand, some WordPress themes that look really great can actually make your website incredibly slow. No one likes slow websites, particularly Google, which prefers to rank faster websites higher.

Your theme is the face of your WordPress site and plays an important role in how users as well as search engines perceive it.

You’ve probably heard the saying that not all glitters is gold.

Having said that, let’s take a look at the steps you can take to make sure that you select the best theme for your WordPress site.

1. Strive for Simplicity

Simplicity is the best rule in design

Many WordPress themes come with lots of colors, complex layouts, flashy animations, etc. Sometimes you may need those things, but in most cases you don’t really need all that.

Simplicity is the ultimate sophistication.
~ Leonardo da Vinci

Look for a theme that has a design layout that helps you support your goal. It needs to look good but without compromising on usability and simplicity.

Make sure that the theme’s presentation style is not overly complicated. The purpose of web design is to help users find information they need and to help site owners achieve their goals at the same time.

If a theme looks great but does not help you get new business or subscribers, then it is not a good theme. It is also not a good theme when your users can’t really find their way around your website.

Take a look at these 37 simple WordPress themes for some inspiration.

2. Responsive is Not Optional Anymore

Choose a Responsive WordPress Theme

Responsive themes adjust their layout across different screen sizes and devices.

A significant number of web traffic is generated from mobile and other handheld devices. Depending on your website’s topics, this number could go even higher than 50% of your traffic.

Google shows mobile friendly websites on top in their mobile search results. Regardless of your site’s topics and demographics, all websites need to be responsive and fully mobile ready.

Most WordPress themes are already responsive by default. But there are still sellers who are selling fixed width layouts that are not mobile friendly at all. Make sure that the theme you are choosing for your website is mobile friendly.

Testing a Theme for Mobile Readiness

The easiest way to test whether a theme is responsive or not is by resizing your browser screen. As you resize your browser screen, you will notice that the theme’s layout will adjust itself to the screen width.

For more thorough testing you can copy the URL of theme’s demo page and paste it in Google’s Mobile Friendly Test page.

Testing a responsive theme against Google Mobile Friendly Test

Please note that this test will show some warnings, regardless of how good a theme is. Lookout for any red flags like text too small, content wider than screen, etc.

3. Browser Compatibility

Browser compatability testing

Your users will be using different browsers. Your theme may look perfect on the browser you use, but there might be something broken in other browsers.

This is where browser compatibility comes in. Most WordPress theme developers test their themes rigorously by using sophisticated browser compatibility testing tools.

They may clearly mention this on their website. But if they don’t, then you can always run some basic tests to check the theme on different browsers like Google Chrome, Firefox, Internet Explorer, Safari, etc.

Don’t forget to test on different browsers on mobile as well.

4. Supported Plugins

Supported plugins

The real power of WordPress comes with WordPress plugins. These plugins make it possible for you to do anything with your WordPress site.

While there are plenty of WordPress plugins, some are must-have WordPress plugins for every websites. Like Gravity Forms, Yoast SEO, W3 Total Cache, etc.

Make sure that your WordPress theme supports all popular plugins. If you are unsure, ask theme developer about it.

5. Translation + Multilingual Ready

Multilingual and translation ready WordPress themes

A large number of WordPress sites are not in the English language. You may be creating a website in a language other than English. Maybe you have plans to create a multilingual WordPress site in the future.

Make sure that your WordPress theme is translation ready and supports multilingual WordPress plugins.

6. Page Builders

Drag and drop page builders for WordPress themes

Page builders are WordPress plugins that allow you to create page layouts using drag and drop user interface.

Many premium WordPress themes come with page builders pre-installed. Some of these page builders are used by that theme developer only.

Using such a page builder to create landing pages can produce a lot of unwanted code. If you ever switch the theme, then those pages will require a lot of cleaning up.

You should choose themes that are shipping with one of the most used page builder plugins. You can also purchase these page-builders separately to use with other themes as well.

7. Support Options for When You Need Help

Support for your WordPress theme

One downside of using a free WordPress theme is that there is no guaranteed support. While some developers provide excellent support for their free themes, many free themes have no support option.

If you mess up your WordPress theme, then you will have to figure it out on your own. You can also end up paying a third-party developer to solve the tiniest problems.

Make sure that you select a WordPress theme that has good documentation and support option. Most premium WordPress themes offer detailed documentation with 1 year of email based support.

8. SEO Friendliness

Check your theme for SEO friendliness

Your WordPress theme plays a crucial role in your site’s SEO friendliness. A good looking theme can still generate poorly coded HTML, this could affect your site’s performance on search engines.

It could be difficult for beginners to analyze a theme’s source code on their own. This is why many premium WordPress theme developers will let you know that their pages are optimized for SEO.

You can also take a look to see if the page generates proper HTML5 by checking it with W3C Markup Validation service. However, please note that the W3C tool will generate many warnings which are nothing to be worried about.

9. Ratings and Reviews

Check ratings and reviews for a WordPress theme

Another solid indicator of a WordPress theme’s quality is ratings and reviews provided by their users. If the theme is sold on a third-party marketplace, then you will see customer reviews.

For free WordPress themes, you will find the ratings section just below the download button. It will show the number of reviews and stars given by users. If you click on 5 stars, then it will show you all the reviews that gave the theme 5 stars.

Read theme reviews and ratings by other users

Almost all WordPress themes can get a few bad reviews. but if the number of bad reviews is unusually high, then you should read them carefully.

Our Recommendations

There are plenty of free WordPress themes available with new ones being released on a daily basis. That’s why we regularly publish the list of our favorite free themes in our showcase section.

Some of the popular items in our theme showcase are:

However, as we have mentioned above that support is one of the most important factor to consider when selecting a theme. Free WordPress themes do not come with guaranteed support and updates.

Most premium WordPress themes offer 1 year of support and updates. Here are some of the theme shops that we highly recommend.

How to Install a Theme in WordPress

Installing a WordPress theme is really simple. First you need to download the theme’s zip file to your computer.

After that login to your WordPress admin area and go to Appearance » Themes page.

Themes page in WordPress admin area

On top of the themes page, you need to click on the Add New link.

This will take you to the add new theme page. You can use this page to look for free themes to install. But since we have already downloaded the theme, you need to just click on Upload theme link at the top.

Upload a theme

You will now see the theme upload box. Click on choose file button to select the theme zip file you downloaded to your computer earlier and then click on the Install now button.

Upload and install theme zip file

WordPress will now upload the theme from your computer to your website and install it for you. Once it is done, you will see a success message with links to preview or activate the theme.

Theme installation successful

If you do not want to use a theme right away, then you can click on the live preview button to test out the theme without activating it.

Please note that you will have to activate a theme in order to use it on your website.

For more detailed instructions, see our beginner’s guide on how to install a WordPress theme.

How to Safely Change WordPress Themes

For new WordPress sites, you can just select the perfect theme and install it on your site. However, if you have a established WordPress site, then you need to properly switch your theme to avoid any effect on your site’s performance and SEO.

First you need to understand what happens to a WordPress site when you switch themes. Here is our guide on what happens when you switch your WordPress theme.

Some settings on your WordPress site will disappear and will not automatically apply to your new theme. You need to understand these things, and how you can put them back on your new theme.

We have compiled a handy checklist of things you must do before changing WordPress themes.

After that you need to follow the instructions in our tutorial on how to properly switch WordPress themes on your site.

We hope this article helped you select the perfect theme for your WordPress site. You may also want to see our list of must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post Selecting the Perfect WordPress Theme – 9 Things You Should Consider appeared first on WPBeginner.

How to Add an Author Info Box in WordPress Posts

Do you want to add an author bio box in your WordPress posts? The author bio box is a small section where you can display information about the post author with links to their website and social profiles. In this article, we will show how… Read More »

The post How to Add an Author Info Box in WordPress Posts appeared first on WPBeginner.

Do you want to add an author bio box in your WordPress posts? The author bio box is a small section where you can display information about the post author with links to their website and social profiles. In this article, we will show how to add an author info box in WordPress.

Adding author info box in WordPress

Why and When You Need an Author Info Box in WordPress

Seeing an actual person behind the content helps build credibility and strengthens your site’s authority among users.

For single author websites, you can just add an about me page. But for a multi-author WordPress sites, you will need to add an author info box below each post.

The author box encourages authors to interact with readers. It provides an additional incentive to authors to build their own following.

If you accept guest posts from other bloggers on your website, then an author info box will help you gain more traction on your site.

Having said that, let’s take a look at how to easily add an author info box in WordPress posts.

Adding Author Info Box in WordPress Posts

There are many different ways that you can use to add an author info section. We will show you a two different plugins as well as the code method. This way you can choose a method that works best for your site.

Method 1: Author Box Below WordPress Posts Using Plugin

Most site owners want to display author information at the end of a post. Here is how you can easily display an author info box at the end of WordPress posts.

First thing you need to do is install and activate the Guerrilla’s Author Box plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Each author on your site will need to add their biographical information and links to their user profiles. They can do this by logging in to their WordPress account on your website and then click on the Profile link from the WordPress admin menu.

User editing their own profile in WordPress

As a site administrator, you can also fill in this information yourself by editing each user’s profile. You will need to visit Users » All User page, and then click on the edit link below the user you want to edit.

Editing user profiles by an Administrator in WordPress

You can now visit any WordPress post on your site, and you will see the author info box below the post.

Author info box added with plugin

The plugin uses the default WordPress avatar system, called Gravatar. Your authors will need to add their photo on Gravatar website. For more information take a look at our guide about Gravatar, and why you should start using it right away.

Customizing Appearance of Author Info Box

Guerrilla’s Author Box plugin comes with very basic CSS. It inherits the link and text colors from your WordPress theme.

However, if you want to customize it, and you are comfortable working with CSS, then you can copy the plugin’s default CSS and paste it in your theme or child theme‘s stylesheet.

Here is a sample CSS that you can use as a starting point. We have changed the background color and made the author photo round instead of square.

.guerrillawrap {
    background: #ECECEC;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    border: 1px solid #d0d0d0;
    float: left;
    padding: 2%;
    width: 100%;
}

.guerrillagravatar {
    float: left;
    margin: 0 10px 0 0;
    width: 10%;
}

.guerrillagravatar img { 
border-radius:50%;
border:1 px solid #eee;
}

.guerrillatext {
    float: left;
    width: 84%;
}

.guerrillatext h4 {
    font-size: 20px;
    line-height: 20px;
    margin: 0 0 0 0;
    padding: 0;
}

.guerrillatext p {
    margin: 10px 0 15px 0;
    font-style: italic;
}

.guerrillasocial {
    float: left;
    width: 100%;
}

.guerrillasocial a {
    border: 0;
    margin-right: 10px;
}

This is how author info box looked on our demo website after applying this CSS. Yours may look slightly different depending on the fonts and colors used by your WordPress theme.

Author info box with rounded avatar

Method 2: Author Info in Sidebar Widget For Single Posts

The above method is great if you wanted to display the author info below posts. However, some of you may want to display author bio in the sidebar or any widget ready area.

Here is how you can display author info in a sidebar widget.

First thing you need to do is install and activate Meks Smart Author Widget plugin.

Upon activation, you need to visit Appearance » Widgets page. There you will find Meks Smart Author under the list of available widgets. Add this widget to the sidebar where you want to display the author information.

Smart author widget

The widget comes with a number of options. Most important option that you need to check is the checkbox next to ‘Automatically detect author’ option.

Auto detect author widget

Click on the save button to store your widget settings. You can now visit your website to see the author information widget in action.

Author info widget in WordPress

This plugin also fetches user information from their WordPress profile. Your authors will need to fill their biographical information.

Method 3: Adding Author Info Box Using Code

Both methods described above rely on plugins. If for some reason you need to add author info box manually, then here is how you can do it.

First you need to add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_author_info_box( $content ) {

global $post;

// Detect if it is a single post with a post author
if ( is_single() && isset( $post->post_author ) ) {

// Get author's display name 
$display_name = get_the_author_meta( 'display_name', $post->post_author );

// If display name is not available then use nickname as display name
if ( empty( $display_name ) )
$display_name = get_the_author_meta( 'nickname', $post->post_author );

// Get author's biographical information or description
$user_description = get_the_author_meta( 'user_description', $post->post_author );

// Get author's website URL 
$user_website = get_the_author_meta('url', $post->post_author);

// Get link to the author archive page
$user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
 
if ( ! empty( $display_name ) )

$author_details = '<p class="author_name">About ' . $display_name . '</p>';

if ( ! empty( $user_description ) )
// Author avatar and bio

$author_details .= '<p class="author_details">' . get_avatar( get_the_author_meta('user_email') , 90 ) . nl2br( $user_description ). '</p>';

$author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  

// Check if author has a website in their profile
if ( ! empty( $user_website ) ) {

// Display author website link
$author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow">Website</a></p>';

} else { 
// if there is no author website then just close the paragraph
$author_details .= '</p>';
}

// Pass all this info to post content  
$content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
}
return $content;
}

// Add our function to the post content filter 
add_action( 'the_content', 'wpb_author_info_box' );

// Allow HTML in author bio section 
remove_filter('pre_user_description', 'wp_filter_kses');

This code simply fetches the author information and displays it below WordPress posts. You need to style this author info box so that it looks nice and matches your WordPress theme.

You can use this CSS into your theme or child theme’s stylesheet. Feel free to modify it to meet your needs.

.author_bio_section{
background: none repeat scroll 0 0 #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}

.author_name{
font-size:16px;
font-weight: bold;
}

.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}

This is how the author info box looked on our demo site.

Manual author info box

We hope this article helped you add author info box in WordPress posts. You may also want to see our guide on how to add or remove capabilities to user roles in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add an Author Info Box in WordPress Posts appeared first on WPBeginner.

9 Best Heatmap Tools and Plugins for Your WordPress Site

Do you wish that you had better insights into how your users interact with your website? Heatmap tools and plugins can help you visualize where users click, how far they scroll, and how they really use your site. In this article, we will show 9… Read More »

The post 9 Best Heatmap Tools and Plugins for Your WordPress Site appeared first on WPBeginner.

Do you wish that you had better insights into how your users interact with your website? Heatmap tools and plugins can help you visualize where users click, how far they scroll, and how they really use your site. In this article, we will show 9 Best heatmap tools and plugins for your WordPress site.

Heatmap Tools and Plugins

What is Heatmap?

A Heatmap allows you to visualize how visitors use your website. Heatmap tools provide an overlay on top of your pages showing areas with more activity as hotter than the areas with low user activity.

Heatmap tools offer visual analytics about which areas your users click, look, and scroll. This information helps you understand usability issues with your website and optimize it for better conversions and user experience.

These tools are different than other analytics tools like Google Analytics. Traditional analytics tools provide you information like how users came to your site, what pages they view, and how they move from one page to another.

Heatmaps analytics tools tell you how users actually use and interact with your site design.

Having said that, here are the best heatmap tools and plugins for your WordPress site.

1. Crazy Egg

CrazyEgg

Crazy Egg is probably the most popular heatmap tool available in the market today. It offers click heatmaps, mouse cursor heatmaps, and scroll heatmaps. It offers another useful feature called confetti heatmap.

Confetti heatmap by Crazy Egg allows you to divide the heatmap data into traffic sources. This means you can see how users from social networks, search, or other sources interact with your website.

Crazy Egg is extremely easy to add into a WordPress website. They even have a plugin that makes installation a breeze.

The pricing for Crazy Egg starts from $9/ month for 10,000 visitors and 10 active pages. Their most popular plan is called Plus, which offers 100,000 visits, 50 active pages, and hourly reports for $49/month. All plans come with one month free trial.

Unlike other heatmap tools, Crazy Egg does not limit your usage to per site, this means you can use the same account on multiple websites.

2. Mouseflow

Mouseflow

Mouseflow is another easy to use heatmap tool for WordPress users. Mouseflow offers click heatmaps, scroll heatmaps, movement heatmap, and attention heatmap.

It also offers recording of website visitor activity. This means you can look at a user interacting with your site. Another useful feature offered by Mouseflow is form analytics, which allows you to see why users are abandoning your forms.

Mouseflow also allows you to track funnels. You can also set custom funnels so that you can see how users from different traffic sources behave differently on your site.

Pricing for Mouseflow starts at $19/month for 1,000 recorded sessions limited to 1 website. Prices increase with more recorded sessions and websites you add to your plan. Mouseflow also offers a free plan limited to 100 recorded sessions for a single site.

3. Lucky Orange

Lucky Orange

Lucky Orange is another popular choice in heatmap analytics. They offer heatmap tracking for clicks, movement, and scroll depth. Apart from that, they also offer session recording and traffic segmentation.

It also comes with forms analytics, conversion funnels, visitor polls, and a live chat software that you can add to your website. The list of feature covers almost everything that you would want from a heatmap tool.

The pricing for Lucky Orange starts from $10 / month for 25,000 page views on single site.

4. Inspectlet

Inspectlet

Inspectlet is a very powerful session recording and heatmap service. It covers all three types of heatmap tracking: clicks, cursor movement, and scrolling.

They also offer conversion funnel analytics with very powerful filtering feature. There is a robust tagging filter, which you can use to tag individual users. This way you can see how they interact on returning visits. Inspectlet also provides form analytics to understand and optimize your lead generation.

Pricing for Inspectlet starts from $39 per month with 5000 recorded sessions limited to 1 site. They also offer a free plan limited to 100 recorded sessions for a single site.

5. Heatmap.me

Heatmap.me

Heatmap.me claims to be one of the simplest to use heatmap analytics tool in the market. It is easy to install and comes with a very small JavaScript code that loads asynchronously without slowing down your website.

Unlike some tools in this list, Heatmap.me offers real time heatmaps. You can see how users are interacting with your site live. It also respects privacy of your users by not logging unnecessary data.

Heatmap.me offers a free plan limited to 5 pages on 1 site. Their paid plans start with $100 per month for unlimited pages on a single site.

6. Ptengine

Ptengine

Ptengine provides heatmap and web analytics tool packed into one. It offers click, conversion tracking, scroll and attention heatmaps. They also offer A/B testing between two heatmaps, which is a useful feature for designers testing different interfaces.

Their web analytics features include device segmentation, campaign performance, one click filters, and page analysis.

Pricing at Ptengine starts from $7 per month for 1 site, 5 heatmaps, and 25K pageviews. They also offer a free plan with 1 heatmap on a single site limited to 1000 pageviews.

7. Clicktale

Clicktale

Clicktale is another popular choice for heatmaps analytics. They offer a very powerful session recording technology and great in-depth heatmaps analysis features. But he biggest advantage is that they offer integrations with other analytics tools that you may already be using, like Google Analytics, Optimizely, Google Tag Manager, etc.

Clicktale has heatmaps, session recording, conversion analytics, advanced analytics, etc.

Clicktale does not have pricing information listed on their website. Instead, you will have to contact their sales teams to request a demo and then discuss the pricing.

8. SeeVolution

SeeVolution

SeeVolution offers a very easy to use way to include heatmaps on a WordPress site. They have plugins for all popular CMS, including WordPress. Apart from easy installation, they also offer a very clean and nice dashboard that helps users understand the data they are seeing.

Heatmaps by SeeVolution include clicks, scrolling, mouse interactions and movement heatmaps. They also include site wide analytics to give you an overview of your site’s performance.

SeeVolution offers a free plan for 1000 visits limited to 1 site. Their paid plans start from $79 per month for 2 domains. They also offer 14 day free trial on all their plans.

9. Hotjar

Hotjar

Hotjar is powerful suite of apps bundled into one analytics and conversion optimization tool. It combines heatmaps, session recordings, funnels, form analytics, polls & surveys, and a recruiter tool to get testers.

They offer click, tap, scroll, and mouse movement heatmaps. With session recording and conversion funnels you can discover and fix usability issues on your site. Hotar’s reporting dashboard is intuitive and easy to use.

Their pricing plans start from $29 per month for 10,000 page views and snapshot size of 2,000 visits for heatmaps, forms and recordings. They also offer a limited free plan, which you can use to try it out.

We hope this article helped you find the best heatmap tools and plugins for your WordPress site. You may also want to see our list of 9 best WordPress SEO plugins and tools that you should use

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 9 Best Heatmap Tools and Plugins for Your WordPress Site appeared first on WPBeginner.

How to Properly Uninstall a WordPress Plugin

Once you install WordPress, usually one of the first thing you do is install plugins. As your site and skills grow, you quickly realize that certain plugins weren’t the best fit for you. Well, it’s important that you deactivate and delete those plugins. In this… Read More »

The post How to Properly Uninstall a WordPress Plugin appeared first on WPBeginner.

Once you install WordPress, usually one of the first thing you do is install plugins. As your site and skills grow, you quickly realize that certain plugins weren’t the best fit for you. Well, it’s important that you deactivate and delete those plugins. In this article, we will show you how to properly uninstall a WordPress plugin and explain why it’s important.

Do you want to uninstall a WordPress plugin? Many WordPress beginners often install different plugins to check out which one works for them. It is important that you uninstall plugins that you don’t want to use on your site. In this article, we will show you how to properly uninstall a WordPress plugin.

Uninstall WordPress plugin

Why You Need to Uninstall a WordPress Plugin?

There are thousands of WordPress plugins available, and you can easily install any WordPress plugin on your site. However, it is also important that you uninstall any WordPress plugins that you don’t want to use.

WordPress plugins are like apps that you can run on your site. This gives them enormous control of your site. While plugin authors do their best to keep the plugins secure and safe, history shows us that mistakes do happen from time to time.

This means that any plugin that you are not using on your site can be a potential liability.

Keeping unnecessary files on your site also increases your WordPress backup size. This means that it will take more time for you to download or restore backup.

Yes, you can definitely install as many WordPress plugins as you need. However if you are not using a plugin, then we believe that you should uninstall it properly.

Difference Between Deactivating and Uninstalling a WordPress Plugin

Many users fall into the habit of simply going to a plugins page and deactivating plugins that they don’t want to use.

Deactivating a plugin without permanently deleting it is very handy for debugging and bug fixes because it keeps your settings and configuration in place should you reactivate. However often users end up finding a different solution and never using this plugin again.

Inactive Plugins

A deactivated WordPress plugin can still make your site vulnerable because it can still be used to run malicious code on your site. Most folks do not take proper security measures such as adding a firewall like Sucuri, disabling PHP execution, etc.

While you do get update notifications for deactivated plugins that are hosted in the WordPress repository, you do not get them for premium plugins.

That’s why we always recommend that you should only deactivate plugin when you just want to temporarily disable them. If you do not intend to activate it any time soon, then it is better to uninstall the plugin.

By properly uninstalling the plugin, you also keep your database clean from “junk data” that plugins often leave behind.

Remember you can always download and reinstall the plugin.

How to Uninstall a WordPress Plugin

WordPress makes it super easy to uninstall plugins from the admin area. Simply login to your WordPress dashboard and go to the Plugins page.

You will see the list of currently installed plugins on your site. Active plugins are highlighted with blue background color and have a link below to deactivate them.

Installed plugins on a WordPress site

Inactive plugins have links below to activate, edit, or delete them. Click on delete link below the plugin that you want to uninstall.

WordPress will now ask you to confirm that you want to delete the plugin.

Deleting a WordPress plugin to unintsall it

You need to click on ‘Yes, delete these files’ button. WordPress will now safely remove plugin from your web server.

That’s all you have successfully uninstalled a plugin from your WordPress site.

There are some more steps that you can take to remove all traces of the plugin. However, these steps are optional and not recommended for absolute beginners.

Removing Extra Files Added by a WordPress Plugin

In most cases, simply deleting a WordPress plugin will uninstall it completely. However, there are some plugins that store files outside of the plugins folder. Those files will not be deleted when you uninstall the plugin.

You can check and delete files stored by the plugin using a FTP client. Connect to your website using FTP, and then go to /wp-content/ folder.

Delete extra plugin files using FTP

Many WordPress backup plugins, gallery plugins, and sliders create and store data directly in the wp-content folder. If you do not have a complete backup of your WordPress site, then you should download these files to your computer as backup.

After that you can safely delete these files from your server.

Removing Unused Shortcodes in WordPress

Many WordPress plugins use shortcodes to add things into your posts or pages. Once you deactivate or uninstall a plugin, those shortcodes will become visible in your posts, and they look quite ugly.

[pluginshortcode]

You can easily disable shortcodes by adding this code in your theme’s functions.php file or a site-specific WordPress plugin.

add_shortcode( 'pluginshortcode', '__return_false' );

This code basically adds the shortcode back and make it display nothing. Don’t forget to replace pluginshortcode with the shortcode tag used by the plugin you want to remove.

It is important to note, that you will need remove this code if you ever decide to use that plugin again.

For more detailed instructions, see our guide on how to find and remove usused shortcodes from WordPress posts.

Cleaning Up WordPress Database

Some WordPress plugins create their own tables in WordPress database. If these tables have too much data in them, then that would increase your WordPress backup size.

You can delete those tables using phpMyadmin. However, we must warn you that you should be very careful about making any changes to the WordPress database. Like always, it is highly recommend that you have complete WordPress backup before you perform any action.

All of our recommended WordPress hosting providers offer cPanel with phpMyAdmin. Login to your cPanel account and scroll down to the database section. There you will find the phpMyAdmin icon.

phpMyAdmin cPanel

Clicking on it will launch phpMyAdmin. You need to click on your database and then select the tables you want to delete. Below the tables list, you will see a drop down labeled ‘with selected’. You need to click on the drop down, and then select ‘Drop’.

Deleting unwanted database tables using phpMyAdmin

You will now see a warning that you are about to delete these tables. You need to click on Yes to confirm the action. Please note that it is irreversible, once deleted you will not be able to restore these tables unless you have a backup.

Confirm you want to delete tables

phpMyAdmin will now drop the tables and will delete all data in those tables.

For more details, you may want to check out our beginner’s guide to WordPress database management with phpMyAdmin.

We hope this article helped you learn how to properly uninstall a WordPress plugin. You may also want to see our guide on how to deactivate all WordPress plugins when not able to access wp-admin.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Properly Uninstall a WordPress Plugin appeared first on WPBeginner.

How to Add a Full Screen Search Overlay in WordPress

Recently, one of our readers asked if we could write a tutorial on how to add a full screen search overlay in WordPress. You have probably seen this on popular sites like Wired. When a user clicks on the search icon, the search box opens… Read More »

The post How to Add a Full Screen Search Overlay in WordPress appeared first on WPBeginner.

Recently, one of our readers asked if we could write a tutorial on how to add a full screen search overlay in WordPress. You have probably seen this on popular sites like Wired. When a user clicks on the search icon, the search box opens up and covers the whole screen which can improve user experience on mobile devices. In this article, we will show you how to add a full screen search overlay in WordPress.

Adding a full screen search in WordPress

The full screen search is slowly becoming a trend because it drastically improves the search experience for mobile users. Since mobile screens are very small, by offering a full screen overlay, you make it easy for users to type and search on your website.

When we first got this tutorial request, we knew it would require some code. Our goal at WPBeginner is to make things as simple as possible.

Once we had finished writing the tutorial, we realized that it was too complicated of a process, and it should rather be wrapped into a simple plugin.

Adding Full Screen Search Overlay in WordPress

First thing you need to do is install and activate the WordPress Full Screen Search Overlay plugin. For more details, see our step by step guide on how to install a WordPress plugin.

WordPress Full Screen Overlay Search plugin works out of the box, and there are no settings for you to configure.

You can simply visit your website and click on the search box to see the plugin in action.

Full screen search

Please note, that the plugin works with the default WordPress search feature. It also works great with SearchWP, which is a premium plugin that greatly improves the default WordPress search.

Unfortunately, this plugin does not work with Google Custom Search.

Customizing Full Screen Search Overlay

The WordPress Full Screen Search Overlay plugin comes with its own stylesheet. In order to change the appearance of the search overlay, you will have to edit the plugin’s CSS file or use !important in CSS.

First you will need to connect to your website using an FTP client. If you are new to using FTP, then take a look at our guide on how to upload files to WordPress using FTP.

Once you are connected, you need to locate the plugin’s CSS folder. You will find it under the following path:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

You will find a file full-screen-search.css inside css folder. You need to download this file to your computer.

Open the file, you just downloaded in a plain text editor like Notepad. You can make any changes to this file. For example, we wanted to change the background and font color to match our demo website.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

In this code, we have only changed background color at line 62, and added font color at line 150. If you are good with CSS, then feel free to change other style rules as well.

Once you are done, you can upload this file back to plugin’s CSS folder using FTP. You can now see your changes by visiting your website.

A WordPress site with Full screen search overlay

Important Note:

If you are using this in your own theme, then it’s better to use !important tags so the plugin updates wouldn’t override any changes.

For developers and consultants, you can also just rename the plugin and bundle it as part of your theme or services.

We only created this plugin because all other ways of writing this tutorial would’ve been too complicated for beginner users.

We hope this article helped you add full screen search overlay to your WordPress site. You may also want to see our guide on how to add a search toggle effect in WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add a Full Screen Search Overlay in WordPress appeared first on WPBeginner.