How to Style WordPress Navigation Menus

Do you want to style your WordPress navigation menus to change their colors or appearance? While your WordPress theme handles the appearance of your navigation menus, you can easily customize it using CSS to meet your requirements. In this article, we will show you how… Read More »

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.

Do you want to style your WordPress navigation menus to change their colors or appearance? While your WordPress theme handles the appearance of your navigation menus, you can easily customize it using CSS to meet your requirements. In this article, we will show you how to style the WordPress navigation menus on your site.

Styling navigation menus in WordPress

We will be showing two different methods. The first method is for beginners because it uses a plugin and does not require any code knowledge. The second method is for intermediate DIY users who prefer to use CSS code instead of a plugin.

Method 1: Styling WordPress Navigation Menus Using a Plugin

Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable with editing theme files or writing CSS code on their own.

That’s when a WordPress styling plugin comes in handy. It saves you from editing theme files or writing any code.

First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.

Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.

Next, you need to click on the CSS Hero button in your WordPress admin toolbar.

Launch CSS Hero

CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.

CSS Hero Toolbar

You need to click on the blue icon at the top to start editing.

After you click the blue icon, take your mouse to your navigation menu, and CSS Hero will highlight it by showing the borders around it. When you click on the highlighted navigation menu, it will show you the items that you can edit.

Point and click to customize menu

In the screenshot above, it shows us top navigation menu container. Let’s assume we want to change the background color of our navigation menu. In that case, we will select top navigation which affects our entire menu.

CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.

CSS properties

You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.

Change appearance of an element

In the screenshot above, we selected background, and it showed us a nice interface to select background color, gradient, image, and more.

As you make changes, you will be able to see them live in the theme preview.

Live preview of your CSS changes

Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

Method 2: Manually Style WordPress Navigation Menus

This method requires you to manually add custom CSS and is meant for intermediate users.

WordPress navigation menus are displayed in an unordered list (bulleted list).

Typically if you use the default WordPress menu tag, then it will display a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.

This might work if you only have one menu location. However, most themes have multiple locations where you can display navigation menus.

Using only the default CSS class may cause conflict with menus on other locations.

This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using a code like this:

<?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
         ) );
?>

This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.

Now you can style your navigation menu using this CSS structure.

// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {} 

You will need to replace #header with the container CSS class used by your navigation menu.

This structure will help you completely change the appearance of your navigation menu.

However, there are other WordPress generated CSS classes automatically added to each menu and menu item. These classes allow you to customize your navigation menu even further.

// Class for Current Page
.current_page_item{} 

// Class for Current Category
.current-cat{} 

// Class for any other current Menu Item
.current-menu-item{} 

// Class for a Category
.menu-item-type-taxonomy{}
 
// Class for Post types
.menu-item-type-post_type{} 

// Class for any custom links
.menu-item-type-custom{} 

// Class for the home Link
.menu-item-home{} 

WordPress also allows you to add your own custom CSS classes to individual menu items.

You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.

Head over to Appearance » Menus page in your WordPress admin and click on the Screen Options button.

Enable CSS classes option for individual menu items

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Adding a custom CSS class to a menu item in WordPress

Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.

Examples of Styling Navigation Menus in WordPress

Different WordPress themes may use different styling options, CSS classes, and even JavaScript to create navigation menus. This gives you a lot of options to change those styles and customize your navigation menus to meet your own requirements.

The inspect tool in your web browser will be your best friend when it comes to figuring out which CSS classes to change. If you haven’t used it before, then take a look at our guide on how to use inspect tool to customize WordPress themes.

Basically, you just need to point the cursor to the element you want to modify, right click and then select Inspect tool from browser’s menu.

Using inspect tool to look up for CSS classes to modify

That being said, let’s take a look at some real life examples of styling navigation menus in WordPress.

1. How to Change Font Color in WordPress Navigation Menus

Here is the sample custom CSS that you can add to your theme to change font color of navigation menus.

#top-menu  li.menu-item a {
color:#ff0000;
} 

In this example, the #top-menu is the ID assigned to the unordered list that displays our navigation menu. You will need to use the inspect tool to find out the ID used by your theme.

Changing font color of WordPress navigation menus

2. How to Change Background Color of Navigation Menu Bar

First you’ll need to find out the CSS ID or class used by your theme for the container surrounding navigation menu.

Finding CSS class for navigation menu container

After that you can use the following custom CSS to change background color of navigation menu bar.

.navigation-top { 
background-color:#000; 
}

Here is how it looked on our demo website.

Changing background color of navigation menu bar

3. How to Change Background Color of a Single Menu Item

You may have noticed that many websites use a different background color for the most important links in their navigation menu. This link could be a login, sign up, contact, or buy button. By giving it a different color, it makes the link more noticeable.

To achieve this, we will add a custom CSS class to the menu item that we want highlight with a different background color.

Head over to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. This will bring up a fly down menu where you need to check the box next to ‘CSS classes’ option.

Enable CSS classes option for individual menu items

After that you need to scroll down to the menu item that you want to modify and click to expand it. You will notice a new option to add your custom CSS class.

Adding custom css class to a menu item

Now you can use this CSS class to style that particular menu item differently.

.contact-us { 
background-color: #ff0099;
border-radius:5px;
}

Here is how it looked on our test site.

Changing background color of a single menu item in WordPress navigation menus

4. Adding Hover Effects to WordPress Navigation Menus

Do you want your menu items to change colors on mouse-over? This particular CSS trick makes your navigation menus look more interactive.

Simply add the following custom CSS to your theme.

#top-menu  li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
} 

In this example, #top-menu is the CSS ID used by your theme for the unordered navigation menu list.

Here is how this looked on our test site.

Mouseover effect in WordPress navigation menus

5. Create Sticky Floating Navigation Menus in WordPress

Normally navigation menus appear on top and disappear as a user scrolls down. Sticky floating navigation menus stay on top as a user scrolls down.

You can add the following CSS code to your theme to make your navigation menus sticky.

#top-menu {
    background:#2194af;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: right;
    padding-right:30px
}

Simply replace #top-menu with the CSS ID of your navigation menu.

Here is how it looked in our demo:

Sticky navigation menu

For more detailed instructions and alternate method, see our guide on how to create a sticky floating navigation menu in WordPress.

6. Create Transparent Navigation Menus in WordPress

Many websites use large or fullscreen background images with their call to action buttons. Using transparent menus makes your navigation blend in with the image. This makes users more likely to focus on your call to action.

Simply add the following sample CSS to your theme to make your navigation menus transparent.

#site-navigation { 
background-color:transparent; 
}

This is how it looked on our demo site.

Transparent navigation menus in WordPress

Depending on your theme, you may need to adjust the position of the header image so that it covers the area behind your transparent menus.

We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.

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 Style WordPress Navigation Menus appeared first on WPBeginner.

Docker on a Synology NAS – Also running ASP.NET and .NET Core!

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I’ve filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it’s just \\SERVER or http://server. It’s a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It’s a personal cloud.

It also runs:

  • Plex – It’s a media server with over 15 years of home movies and photos. It’s even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad…then I watch them offline on the plane.
  • VPN Server – I can remotely connect to my house. Even stream Netflix when I’m overseas.
  • Surveillance Station – It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server – Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren’t over Skype, etc.
  • Cloud Sync/Backup – I have files in Google Drive, Dropbox, and OneDrive…but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you’ll find new uses for it all the time! I have the 1511 (now 1515) and it’s amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It’s “glennc/fancypants.” That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1
ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn’s app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you’ll need to SSH in as root, or you’ll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It’s really one of the nicest Docker UIs I’ve seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can “turn them on and off” like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup “F5 Docker Debugging” in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I've filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it's just \\SERVER or http://server. It's a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It's a personal cloud.

It also runs:

  • Plex - It's a media server with over 15 years of home movies and photos. It's even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad...then I watch them offline on the plane.
  • VPN Server - I can remotely connect to my house. Even stream Netflix when I'm overseas.
  • Surveillance Station - It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server - Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren't over Skype, etc.
  • Cloud Sync/Backup - I have files in Google Drive, Dropbox, and OneDrive...but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you'll find new uses for it all the time! I have the 1511 (now 1515) and it's amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It's "glennc/fancypants." That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1

ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn's app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you'll need to SSH in as root, or you'll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It's really one of the nicest Docker UIs I've seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can "turn them on and off" like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup "F5 Docker Debugging" in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

Docker on a Synology NAS – Also running ASP.NET and .NET Core!

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I’ve filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it’s just \\SERVER or http://server. It’s a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It’s a personal cloud.

It also runs:

  • Plex – It’s a media server with over 15 years of home movies and photos. It’s even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad…then I watch them offline on the plane.
  • VPN Server – I can remotely connect to my house. Even stream Netflix when I’m overseas.
  • Surveillance Station – It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server – Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren’t over Skype, etc.
  • Cloud Sync/Backup – I have files in Google Drive, Dropbox, and OneDrive…but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you’ll find new uses for it all the time! I have the 1511 (now 1515) and it’s amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It’s “glennc/fancypants.” That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1
ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn’s app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you’ll need to SSH in as root, or you’ll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It’s really one of the nicest Docker UIs I’ve seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can “turn them on and off” like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup “F5 Docker Debugging” in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

Docker on Synology is amazingI love my Synology NAS (Network Attached Storage) device. It has sat quietly in my server closet for almost 5 years now. It was a fantastic investment. I've filled it with 8TB of inexpensive Seagate Drives and it does its own flavor of RAID to give me roughly 5TB (which, for my house is effectively infinite) of storage. In my house it's just \\SERVER or http://server. It's a little GNU Linux machine that is easier to manage and maintain (and generally deal with) that just chills in the closet. It's a personal cloud.

It also runs:

  • Plex - It's a media server with over 15 years of home movies and photos. It's even more magical when used with an Xbox One. It transcodes videos that then download to my Windows tablets or iPad...then I watch them offline on the plane.
  • VPN Server - I can remotely connect to my house. Even stream Netflix when I'm overseas.
  • Surveillance Station - It acts as a DVR and manages streams from a dozen cameras both inside and outside the house, scanning for motion and storing nearly a week of video.
  • Murmur/Mumble Server - Your own private VOIP chat service. Used for podcasts, gaming, private calls that aren't over Skype, etc.
  • Cloud Sync/Backup - I have files in Google Drive, Dropbox, and OneDrive...but I have them entirely backed up on my Synology with their Cloud Sync.

51FvMne3PyL._SL1280_Every year my Synology gets better with software upgrades. The biggest and most significant upgrade to Synology has been the addition of Docker and the Docker ecosystem. There is first class support for Docker on Synology. There are some Synology devices that are cheaper and use ARM processors. Make sure you get one with an Intel processor for best compatibility. Get the best one you can and you'll find new uses for it all the time! I have the 1511 (now 1515) and it's amazing.

ASP.NET Core on Docker on Synology

A month ago Glenn Condron and I did a Microsoft Virtual Academy on Containers and Cross-Platform .NET (coming soon!) and we made this little app and put it in Docker. It's "glennc/fancypants." That means I can easily run it anywhere with just:

docker run glennc/fancypants

Sometimes a DockerFile for ASP.NET Core can be as basic as this:

FROM microsoft/aspnetcore:1.0.1

ENTRYPOINT ["dotnet", "WebApplication4.dll"]
ARG source=.
WORKDIR /app
EXPOSE 80
COPY $source .

You could certainly use Docker Compose and have your Synology running Redis, MySql, ASP.NET Core, whatever.

Even better, since Synology has such a great UI, here is Glenn's app in the Synology web-based admin tool:

Docker on Synology - Node and ASP.NET Core Apps 

I can ssh into the Synology (you'll need to SSH in as root, or you'll want to set up Docker to allow another user to avoid this) and run docker commands directly, or I can use their excellent UI. It's really one of the nicest Docker UIs I've seen. I was able to get ASP.NET Core and the Node.js Ghost blog running in minutes with modest RAM requirements.

image

Once Containers exist in Docker on Synology you can "turn them on and off" like any service.

ASP.NET Core on Docker on Synology

This also means that your Synology can now run any Docker-based service like a private version of GitLab (good instructions here)! You could then (if you like) do cool domain mappings like gitlab.hanselman.com:someport and have your Synology do the work. The Synology could then run Jenkins or Travis as well which makes my home server fit nicely into my development workflow without use any compute resources on my main machine (or using any cloud resource at all!)

The next step for me will be to connect to Docker running on Synology remotely from my Windows machine, then setup "F5 Docker Debugging" in Visual Studio.

image

Anyone else using a Synology?

* My Amazon links pay for tacos. Please use them.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

How to Backup & Restore Your WordPress Site with UpdraftPlus

Backups are the first layer of security for any WordPress site. Aside from having automated backups, you also need to have an easy way to restore the backup if needed. In this article, we will show you how to easily backup and restore your WordPress… Read More »

The post How to Backup & Restore Your WordPress Site with UpdraftPlus appeared first on WPBeginner.

Backups are the first layer of security for any WordPress site. Aside from having automated backups, you also need to have an easy way to restore the backup if needed. In this article, we will show you how to easily backup and restore your WordPress site with UpdraftPlus.

UpdraftPlus

Why You Need a Backup & Restore Solution for WordPress?

Research shows that data loss and downtime cost $1.7 trillion each year to the globally economy.

All websites on the internet are vulnerable to data loss and security threats. As a website owner, these are some common scenarios when you may lose your data:

  • Your website can get hacked and hackers may destroy your data.
  • Your hosting provider can lose your data
  • Your host reserves the right to terminate your account and delete all your data.

There are many other scenarios where you could end up losing your website and all the valuable data created over the years.

The best way to protect yourself against these threats is to regularly backup your WordPress site.

WordPress does not come with a built-in backup solution. However, there are several great WordPress backup plugins which allow you to automatically backup and restore your WordPress site.

UpdraftPlus is one of the best WordPress backup plugins. It allows you to setup automatic backup schedules. It will also help you restore your WordPress site in case something bad happens.

Having said that, let’s take a look at how to easily backup and restore your WordPress site with UpdraftPlus.

Creating WordPress Backup with UpdraftPlus

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

Upon activation, you need to visit Settings » UpdraftPlus Backups page to configure plugin settings.

Settings page UpdraftPlus

Now you need to click on the settings tab.

This is where you will set up an automatic backup schedule and a remote location to store your backups.

UpdraftPlus settings

First you need to choose a backup schedule for your files. Files include your WordPress themes, plugins, images and other uploads.

After that you need to select a backup schedule for your WordPress database. WordPress is a database driven software. All your posts and pages, comments, website settings, are stored in the database.

Your backup schedule should be based on how often you add new content to your website.

For example, If you add two blog posts each week, then you can select a fortnightly backup of files and weekly backup of database.

Next, you need to choose where to store your backup files.

It is a bad idea to save your backups on the same location as your website. Losing your website, means you will also lose access to your backup files.

This is why you need to choose a remote cloud storage service to store your backups.

UpdraftPlus allows you to save your backups to several cloud storage services including Dropbox, Google Drive, Microsoft OneDrive, any many others. You can also send your backups to an email address.

Simply click on a remote service to select it, and you will see setup instructions below.

For the sake of this tutorial, we will show you how to use Dropbox as your remote backup storage service with UpdraftPlus.

We will go ahead and click on Dropbox to select it and then scroll down to the bottom of the page and click on the save changes button.

UpdraftPlus will save your settings. However, you still need to give UpdraftPlus access to your Dropbox account.

Scroll down to remote storage setup instructions and click on the link next to ‘Authenticate with Dropbox’ option.

Setting up Dropbox as your remote storage service for backups

The link will take you to the Dropbox website where you will be asked to sign-in using your Dropbox email and password.

After login, you will be asked if you want to allow UpdraftPlus to access your Dropbox account.

Allow UpdraftPlus to access Dropbox

UpdraftPlus will only have permission to access its own folder in ‘Apps » UpdraftPlus” folder. Click on ‘Allow’ button to continue.

You will be redirected to UpdraftPlus website where you need to click on ‘Complete Setup’ button to finish setup.

Complete setup

You will now be taken back to your WordPress site, and you will see the UpdraftPlus settings page again. Scroll down to the bottom of the page and click on the Save Changes button.

You have now setup backup schedule and remote location to store your backups.

Creating Manual WordPress Backups with UpdraftPlus

UpdraftPlus can automatically create backups based on the schedule you selected earlier. However, you can also manually create backups any time you want.

First you need to visit Settings » UpdraftPlus Backups and click on ‘Backup Now’ button.

Creating a manual backup with UpdraftPlus

This will bring up a pop-up with options to select files/database backup and whether you want to send the backup to remote storage. (see which WordPress files should you backup?)

Manual backup

Click on the ‘Backup Now’ button to continue.

UpdraftPlus will now start creating backup of your files and database. You will be able to see the progress on the settings page.

Backup Progress

The process may take a while depending on the size of your website.

UpdraftPlus will also start uploading your backup files to the remote location.

Restoring Your WordPress Backup with UpdraftPlus

Creating backups is easy, but the real useful part about backups is the ability to restore them with the same ease.

UpdraftPlus makes it easy to restore your WordPress site from a backup.

If your WordPress site was hacked or you want to start fresh, then first you will need to delete everything and install WordPress again.

Next, you will need to install and activate the UpdraftPlus plugin again on your fresh new WordPress site.

Upon activation, you need to visit Settings » UpdraftPlus Backups page and click on Restore button.

This will bring you to the backups page. UpdraftPlus will scan your server to see if it can find an existing backup in /wp-content/updraft/ folder on your website.

However, since you deleted everything from your website it will not be able to find the backup files.

If you saved the backup files on your computer, then you can click on ‘Upload backup files’ link to manually upload and restore them.

Upload backup files manually

You can also connect UpdraftPlus to remote location (Dropbox, Google Drive, etc). This way UpdraftPlus will be able to scan remote location and use your previously stored backups.

Click on the Settings tab and then choose the remote location you used earlier to store your backups.

Reconnect remote storage location

Follow the instructions to authenticate your website with the remote storage service.

Don’t forget to click on the ‘Save Changes’ button at the bottom of the page to restore your settings.

Now you can switch back to ‘Existing Backups’ tab and click on the ‘Rescan remote location’ link.

Remote backups

UpdraftPlus will now look for backups in the remote storage location and display them below.

You can now click on the restore button next to a backup.

UpdraftPlus will now ask you what you would like to restore. You need to select all options and then click ‘Restore’ button.

Restore options

UpdraftPlus will now fetch your backup files from the remote location and start restoring your site from the backup.

Our UpdraftPlus Review

UpdraftPlus is a powerful WordPress backup plugin, and it’s a great option for DIY users who want the flexibility to choose their backup schedule and remote storage location.

Because UpdraftPlus is free, it’s a popular choice among users. However you can upgrade to UpdraftPlus Premium to access premium addons such as Website Migrator, UpdraftVault, priority support, and molre options. The premium option costs $70 per year.

However like most WordPress backup plugins, UpdraftPlus lacks the ability to do realtime backups of your website.

If you want real-time backups, unlimited storage, and don’t want to pay a third-party storage service like Dropbox, then we recommend using VaultPress instead. This is what we use on WPBeginner.

The downside of VaultPress is cost. The real-time backup plan for one site costs $165 per year which is more than twice UpdraftPlus premium which gets you access for two sites and obviously a non-comparison with the free version.

Final Thoughts

Backups allow you to recover your website in an emergency. However, they cannot protect your website against common security threats like hacking, malware, code injection, etc.

At WPBeginner, we use Sucuri to protect our site (see how Sucuri helped us block 450,000 WordPress attacks).

You need to make sure that your WordPress site is secure. Follow the instructions in our ultimate WordPress security guide to strengthen your WordPress security.

That’s all, we hope this article helped you easily backup and restore WordPress sites with UpdraftPlus.

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 Backup & Restore Your WordPress Site with UpdraftPlus appeared first on WPBeginner.

How to Change Custom Post Type Permalinks in WordPress

Recently, one of our readers asked if it was possible to change the custom post type permalink structure in WordPress. By default, you can change the permalink structure of WordPress posts, but not custom post types. In this article, we will show you how to… Read More »

The post How to Change Custom Post Type Permalinks in WordPress appeared first on WPBeginner.

Recently, one of our readers asked if it was possible to change the custom post type permalink structure in WordPress. By default, you can change the permalink structure of WordPress posts, but not custom post types. In this article, we will show you how to change custom post type permalinks in WordPress.

How to change custom post type permalinks in WordPress

Why Change Custom Post Type Permalinks in WordPress?

WordPress uses SEO friendly URL structure which makes your WordPress URLs readable and search engine friendly. These SEO friendly URLs are called permalinks.

You can customize permalinks by visiting Settings » Permalinks page. However, you will notice that you can only change permalink structure for blog posts.

Permalink settings page in WordPress

If you are using custom post types or custom taxonomies on your website, then WordPress will use default permalink structure for those.

For example, if you have a custom post type called ‘Movies’, then its URL structure will look like this:

http://example.com/movies/the-force-awakens/

If your custom post type has archives enabled, then the archive page URL will look like this:

http://example.com/movies/

This URL scheme is quite SEO friendly and in most cases you don’t need to change it. However, sometimes you may want to customize it to meet your own needs.

Having said that, let’s see how you can easily customize custom post type permalink structure in WordPress.

Changing Custom Post Type Permalinks in WordPress

First thing you need to do is install and activate the Custom Post Type Permalinks plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Permalinks page and scroll down to ‘Permalink Settings for Custom Post Types’ section.

Custom post types permalinks

Here you can change the permalink structure of single items in your custom post type.

You can use all the standard WordPress permalink tags. For a complete list of available tags, see our article on using SEO friendly URL structure in WordPress.

Let’s assume that you want to use post ID instead of post name in the URL. In that case all you need to do is add this tag:

/%post_id%/

Notice the trailing slashes at the beginning and end of the tag. These trailing slashes are the separators, and without them your permalinks will not work.

Adding tags to customize custom post type permalinks

Don’t forget to click on the save changes button to store your settings.

Now the permalinks for a single item in your custom post type will look like this:

http://example.com/movies/133/

The number in the URL will be the numeric ID of the post in your WordPress database.

Let’s take a look at another example.

Let’s say you want to add /year/ before the post name in URL. In that case, you will use these tags:

/%year%/%post_name%/

Click on the save changes button to update your permalinks.

Now the single item permalink for your custom post type will look like this:

http://example.com/movies/2016/the-force-awakens/

So far so good. Now let’s try another example.

Let’s assume that you are using a custom taxonomy called ‘genre’ with your custom post type ‘movies’ and you want to add the custom taxonomy term into the URL. In that case, you will use these tags:

/%genre%/%post_name%/

In this example, genre is the slug of our custom taxonomy.

Click on the save changes button to update your permalinks.

Now the single item permalink for your custom post type will look like this:

http://example.com/movies/sci-fi/the-force-awakens/

That’s all, we hope this article helped you learn how to easily change custom post type permalinks in WordPress. You may also want to see our list of 12 most useful WordPress custom post types tutorials.

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 Change Custom Post Type Permalinks in WordPress appeared first on WPBeginner.

How to Easily Lazy Load Comments in WordPress

Do you want to lazy load WordPress comments to improve page speed? Many popular blogs and news sites are using lazy load to hide comments on their articles. A user needs to click on ‘load comments’ button to view and leave comments. In this article,… Read More »

The post How to Easily Lazy Load Comments in WordPress appeared first on WPBeginner.

Do you want to lazy load WordPress comments to improve page speed? Many popular blogs and news sites are using lazy load to hide comments on their articles. A user needs to click on ‘load comments’ button to view and leave comments. In this article, we will show you how to easily lazy load comments in WordPress.

How to easily lazy load comments in WordPress

Why Add Lazy Load WordPress Comments?

Comments are great for user engagement, and there are many ways to get more comments on your WordPress blog posts.

However, comments can also increase page size which affects page load time and user experience on your site.

Speed is an extremely important performance metric. It affects user experience and your site’s SEO performance as well. See our ultimate guide to boost WordPress speed and performance.

By not loading comments right away, you can significantly improve page load times for your articles. It also improves user experience on slower internet connections and smaller screens.

Having said that, let’s take a look at how to easily add lazy load for WordPress comments.

Adding Lazy Load for WordPress Comments

First you need to do install and activate the Lazy Load for Comments plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Discussion page to configure plugin settings.

Select how you want to lazy load comments in WordPress

Scroll down to ‘Lazy load comments’ section and select your lazy load method. The plugin offers two methods to lazy load comments on your WordPress posts.

You can select on click method, which adds a button at the end of your articles allowing users to click and load comments.

You can also choose on scroll method, which automatically loads comments as a user scrolls down to the end of a post.

Lazy loading comments on scroll

Don’t forget to click on the save changes button to store your settings.

You can now visit any post on your WordPress site.

Depending on your lazy load method, you will either see comments loading as you scroll, or you will see a ‘Load Comments’ button. Clicking on the button will load comments layout and comment form.

Lazy loading WordPress comments on click

That’s all, we hope this article helped you learn how to easily lazy load comments in WordPress. You may also want to see our guide on how to allow users to subscribe to comments 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 Easily Lazy Load Comments in WordPress appeared first on WPBeginner.

16 Tools to Create Better Images for Your Blog Posts

Do you want to create better images for your blog posts? Images create a huge impact on how users engage with your content. However, most users are not designers and are unable to create professional looking images for their blogs. In this article, we will… Read More »

The post 16 Tools to Create Better Images for Your Blog Posts appeared first on WPBeginner.

Do you want to create better images for your blog posts? Images create a huge impact on how users engage with your content. However, most users are not designers and are unable to create professional looking images for their blogs. In this article, we will show you some of the best tools to create better images for your blog posts.

Blog Image Editing Tools

Why Create Better Images for Blog Posts?

Images are highly engaging. They communicate ideas and invoke emotions.

They help you get more likes, shares, and traffic from social media. Users visiting your site spend more time and view more posts. Images can even help you get more comments on your posts.

Now the problem is that most bloggers are not graphic designers. They cannot create professional looking graphics for their websites.

Part of this problem can be solved by using public domain or CC0-Licensed images images. However, you may still need to edit those images.

Luckily, there are several online tools that allow you to edit and create beautiful images for different scenarios including blog posts, infographics, presentations, and even Facebook posts.

Let’s take a look at some of the best tools to create better images for your blog posts.

1. Visage

Visage

Visage is one of the easiest and most powerful tools to manage visuals for your blog. It allows you to create and design professional looking graphics for your blog posts, Facebook pages, Twitter, LinkedIn, etc.

It comes with tons of professionally designed templates to start with.

You can also save your brand’s logo and other assets and use them into your visuals. You can save, export, and share your graphics. Visage is great for individuals and teams.

2. Canva

Canva

Canva is another popular choice among bloggers. It allows you to create all kind of graphics with easy to use drag and drop tools.

It comes with professional looking templates that you can use as a starting point. You can also purchase stock images, icons, and other resources directly from the app.

3. Pablo by Buffer

Pablo by Buffer

Pablo by Buffer is a simple image editor. It comes with a beautiful interface that allows you to search for free stock images, choose a template, and then add your own text and icons to it.

4. Piktochart

Piktochart

Piktochart is an easy to use infographic maker for everyone. It comes with tons of professionally designed templates for infographics, presentations, posters, and reports.

You can add your own charts and graphs, maps, icons, photos, and even videos. There are plenty of free images, icons, illustrations that you can use into your project.

5. infogr.am

infogram

Infogr.am is an infographic and presentation maker for data driven projects. You can connect your Google Sheets, Dropbox files, or a JSON file to the live charts. Add your own site logo and create stunningly gorgeous presentations.

6. Ribbet

Ribbet

Ribbet is a very efficient photo editor for the web. It allows you to retouch your photos, adjust brightness, contrast, exposure, etc. You can also add text, stickers, borders, icons.

Ribbet also makes it easy to create collages from your photographs. You can save your work in Ribbet or download it. You can also export it to Google Drive, Flickr, and Facebook.

7. QuotesCover.com

QuotesCover.com

A nice quote can brighten someone’s day. QuotesCover helps you share beautiful quotes with gorgeous designs, beautiful typography and visual effects.

You can upload your own images, then use the app’s built-in tool to adjust colors, contrast, effects, etc.

Also check out our guide on how to how to show random quotes in WordPress sidebar.

8. Pixlr

Pixlr

Pixlr is a photo editor app. It looks and acts like Photoshop and other image editing tools. However, it is much simpler and easier to use.

9. Pictaculous

Pictaculous

Ever wondered what colors will look best with a particular image? Pictaculous helps you figure this out. Simply upload an image and Pictaculous will show you color suggestions. You can also download the colors as an Adobe swatch file.

Pictaculous can also help you choose a color scheme for your WordPress site.

10. Venngage

Venngage

Venngage is a beautiful infographic maker for non-designers. It comes with templates, fonts, icons, maps, and an intuitive user interface. One downside is that their free plan includes Venngage branding into your infographics.

11. easel.ly

easel.ly

easl.ly is an another infographic maker for the web. It comes with a simple user interface with drag and drop builder to create your infographic. The basic free version is good enough for most common usage scenarios.

12. Fotor

Fotor

Fotor is a powerful visuals and image editor for non-designers. It allows you to create beautiful collages, images for blog posts, Facebook, Instagram, Pinterest, etc. It is extremely easy to use even for non-techy users.

13. PicMonkey

PicMonkey

PicMonkey is a powerful image editing tool. It allows you to design and create graphics, retouch photos, edit images, etc. PicMonkey offers a 7-day free trial after which pricing starts from $3.33 per month billed annually.

14. Placeit

Placeit

Placeit allows you to place screenshots of your website, app, or anything, into mockups of devices. You can place a screenshot in a photo of iPhone, some tablet, or a macbook. They have tonns of photos and mockups to choose from.

15. Snapseed

Snapseed

Google’s Snapseed is a powerful photo editor currently available on mobile devices only. It allows you to edit photos on your mobile devices using an easy to use interface.

16. Awesome Screenshot

Awesome Screenshot

Awesome Screenshot is an app to capture and edit screenshots. You can install it into your browser and take screenshots of any webpage instantly.

The best part is that after capturing the screenshot you can edit it. Annotate your screenshot, add pointers and arrows, and save or share it directly from your browser.

We hope this article helped you find some great tools to create better images for your WordPress blog posts. You may also want to see our guide on how to fix common image issues 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 16 Tools to Create Better Images for Your Blog Posts appeared first on WPBeginner.

16 Tools to Create Better Images for Your Blog Posts

Do you want to create better images for your blog posts? Images create a huge impact on how users engage with your content. However, most users are not designers and are unable to create professional looking images for their blogs. In this article, we will… Read More »

The post 16 Tools to Create Better Images for Your Blog Posts appeared first on WPBeginner.

Do you want to create better images for your blog posts? Images create a huge impact on how users engage with your content. However, most users are not designers and are unable to create professional looking images for their blogs. In this article, we will show you some of the best tools to create better images for your blog posts.

Blog Image Editing Tools

Why Create Better Images for Blog Posts?

Images are highly engaging. They communicate ideas and invoke emotions.

They help you get more likes, shares, and traffic from social media. Users visiting your site spend more time and view more posts. Images can even help you get more comments on your posts.

Now the problem is that most bloggers are not graphic designers. They cannot create professional looking graphics for their websites.

Part of this problem can be solved by using public domain or CC0-Licensed images images. However, you may still need to edit those images.

Luckily, there are several online tools that allow you to edit and create beautiful images for different scenarios including blog posts, infographics, presentations, and even Facebook posts.

Let’s take a look at some of the best tools to create better images for your blog posts.

1. Visage

Visage

Visage is one of the easiest and most powerful tools to manage visuals for your blog. It allows you to create and design professional looking graphics for your blog posts, Facebook pages, Twitter, LinkedIn, etc.

It comes with tons of professionally designed templates to start with.

You can also save your brand’s logo and other assets and use them into your visuals. You can save, export, and share your graphics. Visage is great for individuals and teams.

2. Canva

Canva

Canva is another popular choice among bloggers. It allows you to create all kind of graphics with easy to use drag and drop tools.

It comes with professional looking templates that you can use as a starting point. You can also purchase stock images, icons, and other resources directly from the app.

3. Pablo by Buffer

Pablo by Buffer

Pablo by Buffer is a simple image editor. It comes with a beautiful interface that allows you to search for free stock images, choose a template, and then add your own text and icons to it.

4. Piktochart

Piktochart

Piktochart is an easy to use infographic maker for everyone. It comes with tons of professionally designed templates for infographics, presentations, posters, and reports.

You can add your own charts and graphs, maps, icons, photos, and even videos. There are plenty of free images, icons, illustrations that you can use into your project.

5. infogr.am

infogram

Infogr.am is an infographic and presentation maker for data driven projects. You can connect your Google Sheets, Dropbox files, or a JSON file to the live charts. Add your own site logo and create stunningly gorgeous presentations.

6. Ribbet

Ribbet

Ribbet is a very efficient photo editor for the web. It allows you to retouch your photos, adjust brightness, contrast, exposure, etc. You can also add text, stickers, borders, icons.

Ribbet also makes it easy to create collages from your photographs. You can save your work in Ribbet or download it. You can also export it to Google Drive, Flickr, and Facebook.

7. QuotesCover.com

QuotesCover.com

A nice quote can brighten someone’s day. QuotesCover helps you share beautiful quotes with gorgeous designs, beautiful typography and visual effects.

You can upload your own images, then use the app’s built-in tool to adjust colors, contrast, effects, etc.

Also check out our guide on how to how to show random quotes in WordPress sidebar.

8. Pixlr

Pixlr

Pixlr is a photo editor app. It looks and acts like Photoshop and other image editing tools. However, it is much simpler and easier to use.

9. Pictaculous

Pictaculous

Ever wondered what colors will look best with a particular image? Pictaculous helps you figure this out. Simply upload an image and Pictaculous will show you color suggestions. You can also download the colors as an Adobe swatch file.

Pictaculous can also help you choose a color scheme for your WordPress site.

10. Venngage

Venngage

Venngage is a beautiful infographic maker for non-designers. It comes with templates, fonts, icons, maps, and an intuitive user interface. One downside is that their free plan includes Venngage branding into your infographics.

11. easel.ly

easel.ly

easl.ly is an another infographic maker for the web. It comes with a simple user interface with drag and drop builder to create your infographic. The basic free version is good enough for most common usage scenarios.

12. Fotor

Fotor

Fotor is a powerful visuals and image editor for non-designers. It allows you to create beautiful collages, images for blog posts, Facebook, Instagram, Pinterest, etc. It is extremely easy to use even for non-techy users.

13. PicMonkey

PicMonkey

PicMonkey is a powerful image editing tool. It allows you to design and create graphics, retouch photos, edit images, etc. PicMonkey offers a 7-day free trial after which pricing starts from $3.33 per month billed annually.

14. Placeit

Placeit

Placeit allows you to place screenshots of your website, app, or anything, into mockups of devices. You can place a screenshot in a photo of iPhone, some tablet, or a macbook. They have tonns of photos and mockups to choose from.

15. Snapseed

Snapseed

Google’s Snapseed is a powerful photo editor currently available on mobile devices only. It allows you to edit photos on your mobile devices using an easy to use interface.

16. Awesome Screenshot

Awesome Screenshot

Awesome Screenshot is an app to capture and edit screenshots. You can install it into your browser and take screenshots of any webpage instantly.

The best part is that after capturing the screenshot you can edit it. Annotate your screenshot, add pointers and arrows, and save or share it directly from your browser.

We hope this article helped you find some great tools to create better images for your WordPress blog posts. You may also want to see our guide on how to fix common image issues 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 16 Tools to Create Better Images for Your Blog Posts appeared first on WPBeginner.

How to Allow Attachments in WordPress Comments

Do you want to allow users to add attachments in WordPress comments? By default, WordPress comments are limited to text however you can allow users to upload attachments like images and gifs to make comments more fun. In this article, we will show you how… Read More »

The post How to Allow Attachments in WordPress Comments appeared first on WPBeginner.

Do you want to allow users to add attachments in WordPress comments? By default, WordPress comments are limited to text however you can allow users to upload attachments like images and gifs to make comments more fun. In this article, we will show you how to allow users to add attachments in WordPress comments.

Comment Attachments for WordPress

First you need to install and activate the Comment Attachment plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Discussion page and scroll down to ‘Comment Attachment’ section to configure the plugin settings.

Settings page for comment attachments

Comment Attachment plugin allows you to choose file types, maximum file size, and how to display those attachments on your website.

You can also choose where to show the attachment upload form (before or after default comment form fields).

If attachment is an image, then you can select image size to display, and whether you want it to be linked to the original file.

Allowed File Types:

The plugin allows you to select which file types you want to allow. By default, it allows users to upload images in jpeg, gif, and png formats.

Allowed file types

You can also enable support for PDF, Doc files, spreadsheets, presentations, audio, and video file types.

However we recommend keeping it to images only because audio / video can be very resource intensive for your WordPress hosting.

Don’t forget to click on the save changes button to store your settings.

You can now visit your website and see the ‘upload attachment’ field in WordPress comment form. Try uploading files to see how they appear in the comments.

Comment form with attachment upload field

If you want to change the layout of your comment form, then check out our guide on how to style WordPress comment form.

You can see attachments uploaded by users when moderating comments in WordPress like this:

Review and delete attachments when moderating comments in WordPress

If you don’t like an attachment, then you can simply click on the ‘Delete Attachment’ link below the comment.

We hope this article helped you learn how to allow users to add attachments in WordPress comments. You may also want to see our list of 12 vital tips and tools to combat comment spam 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 Allow Attachments in WordPress Comments appeared first on WPBeginner.

Publishing ASP.NET Core 1.1 applications to Azure using git deploy

I took an ASP.NET Core 1.0 application and updated its package references to ASP.NET 1.1 today. I also updated to my SDK to the Current (not the LTS – Long Term Support version). Everything worked great building and running locally, but then I made a new Web App in Azure and did a quick git deploy.

Deploying ASP.NET Core 1.1 to Azure

Basically:

c:\aspnetcore11app> azure site create "aspnetcore11test" --location "West US" --git
c:\aspnetcore11app> git add .
c:\aspnetcore11app> git commit -m "initial"
c:\aspnetcore11app> git push azure master

Then I watched the logs go by. You can watch them at the command line or from within the Azure Portal under “Log Stream.”

The deployment failed when Azure was building the app and got this error:

Build started 11/25/2016 6:51:54 AM.
2016-11-25T06:51:55         1>Project "D:\home\site\repository\aspnet1.1.xproj" on node 1 (Publish target(s)).
2016-11-25T06:51:55         1>D:\home\site\repository\aspnet1.1.xproj(7,3): error MSB4019: The imported project "D:\Program Files (x86)\dotnet\sdk\1.0.0-preview3-004056\Extensions\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
2016-11-25T06:51:55         1>Done Building Project "D:\home\site\repository\aspnet1.1.xproj" (Publish target(s)) -- FAILED.
2016-11-25T06:51:55    

See where it says “1.0.0-preview3-004056” in there? Looks like Azure Web Apps has some build that isn’t the one that I have. Theirs has the new csproj/msbuild stuff and I’m staying a few steps back waiting for things to bake.

Remember that unless you specify the SDK version, .NET Core will use whatever is the latest one on the box.

Well, what do I have locally?

C:\aspnetcore11app>dotnet --version
1.0.0-preview2-1-003177

OK, then that’s what I need to use so I’ll make a global.json at the root of my project, then move my code into a folder under “src” for example.

{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-preview2-1-003177"
}
}

Here I’m “pinning” the same SDK version. This will tell Azure (or you, if I gave you the code) to use this SDK version when building.

Now I’ll redeploy with a git add, commit, and push. It works.

I think this should be easier, but I’m not sure how it should be easier. Does this mean that everyone should have a global.json with a preferred version? If you have no preferred version should Azure give a smarter error if it has an incompatible newer one?

The learning here for me is that not having a global.json basically says “*.*” to any cloud build servers and you’ll get whatever latest SDK they have. It could stop working any day.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!


© 2016 Scott Hanselman. All rights reserved.
     

I took an ASP.NET Core 1.0 application and updated its package references to ASP.NET 1.1 today. I also updated to my SDK to the Current (not the LTS - Long Term Support version). Everything worked great building and running locally, but then I made a new Web App in Azure and did a quick git deploy.

Deploying ASP.NET Core 1.1 to Azure

Basically:

c:\aspnetcore11app> azure site create "aspnetcore11test" --location "West US" --git

c:\aspnetcore11app> git add .
c:\aspnetcore11app> git commit -m "initial"
c:\aspnetcore11app> git push azure master

Then I watched the logs go by. You can watch them at the command line or from within the Azure Portal under "Log Stream."

The deployment failed when Azure was building the app and got this error:

Build started 11/25/2016 6:51:54 AM.
2016-11-25T06:51:55         1>Project "D:\home\site\repository\aspnet1.1.xproj" on node 1 (Publish target(s)).
2016-11-25T06:51:55         1>D:\home\site\repository\aspnet1.1.xproj(7,3): error MSB4019: The imported project "D:\Program Files (x86)\dotnet\sdk\1.0.0-preview3-004056\Extensions\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Props" was not found. Confirm that the path in the <Import> declaration is correct, and that the file exists on disk.
2016-11-25T06:51:55         1>Done Building Project "D:\home\site\repository\aspnet1.1.xproj" (Publish target(s)) -- FAILED.
2016-11-25T06:51:55    

See where it says "1.0.0-preview3-004056" in there? Looks like Azure Web Apps has some build that isn't the one that I have. Theirs has the new csproj/msbuild stuff and I'm staying a few steps back waiting for things to bake.

Remember that unless you specify the SDK version, .NET Core will use whatever is the latest one on the box.

Well, what do I have locally?

C:\aspnetcore11app>dotnet --version

1.0.0-preview2-1-003177

OK, then that's what I need to use so I'll make a global.json at the root of my project, then move my code into a folder under "src" for example.

{

"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-preview2-1-003177"
}
}

Here I'm "pinning" the same SDK version. This will tell Azure (or you, if I gave you the code) to use this SDK version when building.

Now I'll redeploy with a git add, commit, and push. It works.

I think this should be easier, but I'm not sure how it should be easier. Does this mean that everyone should have a global.json with a preferred version? If you have no preferred version should Azure give a smarter error if it has an incompatible newer one?

The learning here for me is that not having a global.json basically says "*.*" to any cloud build servers and you'll get whatever latest SDK they have. It could stop working any day.


Sponsor: Big thanks to Octopus Deploy! Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release!



© 2016 Scott Hanselman. All rights reserved.