Ruby on Rails on Azure App Service (Web Sites) with Linux (and Ubuntu on Windows 10)

Running Ruby on Rails on Windows has historically sucked. Most of the Ruby/Rails folks are Mac and Linux users and haven’t focused on getting Rails to be usable for daily development on Windows. There have been some heroic efforts by a number of volunteers to get Rails working with projects like RailsInstaller, but native modules and dependencies almost always cause problems. Even more, when you go to deploy your Rails app you’re likely using a Linux host so you may run into differences between operating systems.

Fast forward to today and Windows 10 has the Ubuntu-based “Linux Subsystem for Windows” (WSL) and the native bash shell which means you can run real Linux elf binaries on Windows natively without a Virtual Machine…so you should do your Windows-based Rails development in Bash on Windows.

Ruby on Rails development is great on Windows 10 because you’ve Windows 10 handling the “windows” UI part and bash and Ubuntu handling the shell.

After I set it up I want to git deploy my app to Azure, easily.

Developing on Ruby on Rails on Windows 10 using WSL

Rails and Ruby folks can apt-get update and apt-get install ruby, they can install rbenv or rvm as they like. These days rbenv is preferred.

Once you have Ubuntu on Windows 10 installed you can quickly install “rbenv” like this within Bash. Here I’m getting 2.3.0.

~$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv
~$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
~$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
~$ exec $SHELL
~$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
~$ echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
~$ exec $SHELL
~$ rbenv install 2.3.0
~$ rbenv global 2.3.0
~$ ruby -v
~$ gem install bundler
~$ rbenv reshash

Here’s a screenshot mid-process on my SurfaceBook. This build/install step takes a while and hits the disk a lot, FYI.

Installing rbenv on Windows under Ubuntu

At this point I’ve got Ruby, now I need Rails, as well as NodeJs for the Rails Asset Pipeline. You can change the versions as appropriate.

@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ gem install rails -v 5.0.1

You will likely also want either PostgresSQL or MySQL or Mongo, or you can use a Cloud DB like Azure DocumentDB.

When you’re developing on both Windows and Linux at the same time, you’ll likely want to keep your code in one place or the other, not both. I use the automatic mount point that WSL creates at /mnt/c so for this sample I’m at /mnt/c/Users/scott/Desktop/RailsonAzure which maps to a folder on my Windows desktop. You can be anywhere, just be aware of your CR/LF settings and stay in one world.

I did a “rails new .” and got it running locally. Here you can se Visual Studio Code with Ruby Extensions and my project open next to Bash on Windows.

image

After I’ve got a Rails app running and I’m able to develop cleanly, jumping between Visual Studio Code on Windows and the Bash prompt within Ubuntu, I want to deploy the app to the web.

Since this is a simple “Hello World” default rails app I can’t deploy it somewhere where the Rails Environment is Production. There’s no Route in routes.rb (the Yay! You’re on Rails message is development-time only) and there’s no SECRET_KEY_BASE environment variable set which is used to verify signed cookies. I’ll need to add those two things. I’ll change routes.rb quickly to just use the default Welcome page for this demo, like this:

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    get '/' => "rails/welcome#index"
end

And I’ll add the SECRET_KEY_BASE in as an App Setting/ENV var in the Azure portal when I make my backend, below.

Deploying Ruby on Rails App to Azure App Service on Linux

From the New menu in the Azure portal, choose to Web App on Linux (in preview as of the time I wrote this) from the Web + Mobile option. This will make an App Service Plan that has an App within it. There are a bunch of application stacks you can use here including node.js, PHP, .NE Core, and Ruby.

NOTE: A few glossary and definition points. Azure App Service is the Azure PaaS (Platform as a Service). You run Web Apps on Azure App Service. An Azure App Service Plan is the underlying Virtual Machine (sall, medium, large, etc.) that hosts n number of App Services/Web Sites. I have 20 App Services/Web Sites running under a App Service Plan with a Small VM. By default this is Windows by can run Php, Python, Node, .NET, etc. In this blog post I’m using an App Service Plan that runs Linux and hosts Docker containers. My Rails app will live inside that App Service and you can find the Dockerfiles and other info here https://github.com/Azure-App-Service/ruby or use your own Docker image.

Here you can see my Azure App Service that I’ll now deploy to using Git. I could also FTP.

Ruby on Rails on Azure

I went into Deployment OPtions and setup a local (to Azure) git repro. Now I can see that under Overview.

image

On my local bash I add azure as a remote. This can be set up however your workflow is setup. In this case, Git is FTP for code.

$ git add remote azure https:[email protected]:443/RubyOnAzureAppService.git
$ git add .
$ git commit -m "initial"
$ git push azure master

This starts the deployment as the code is pushed to Azure.

Azure deploying the Rails app

IMPORTANT: I will also add “RAILS_ENV= production” and a SECRET_KEY_BASE=to my Azure Application Settings. You can make a new secret with “rake secret.”

If I’m having trouble I can turn on Application Logging, Web Server Logging, and Detailed Error Messages under Diagnostic Logs then FTP into the App Service and look at the logs.

FTPing into Azure to look at logs

This is all in Preview so you’ll likely run into issues. They are updating the underlying systems very often. Some gotchas I hit:

  • Deploying/redeploying requires an explicit site restart, today. I hear that’ll be fixed soon.
  • I had to dig log files out via FTP. They are going to expose logs in the portal.
  • I used the Kudu “sidecar” site at mysite.scm.azurewebsite.net to get shell access to the Kudu container, but I’d like to be able to ssh into or get to access to the actual running container from the Azure Portal one day.

That said, if you’d like more internal details on how this works, you can watch a session from Connect() last year with developer Nazim Lala. Thanks to James Christianson for his debugging help!


Sponsor: Did you know VSTS can integrate closely with Octopus Deploy? Watch Damian Brady and Brian A. Randell as they show you how to automate deployments from VSTS to Octopus Deploy, and demo the new VSTS Octopus Deploy dashboard widget. Watch now


© 2017 Scott Hanselman. All rights reserved.
     

Running Ruby on Rails on Windows has historically sucked. Most of the Ruby/Rails folks are Mac and Linux users and haven't focused on getting Rails to be usable for daily development on Windows. There have been some heroic efforts by a number of volunteers to get Rails working with projects like RailsInstaller, but native modules and dependencies almost always cause problems. Even more, when you go to deploy your Rails app you're likely using a Linux host so you may run into differences between operating systems.

Fast forward to today and Windows 10 has the Ubuntu-based "Linux Subsystem for Windows" (WSL) and the native bash shell which means you can run real Linux elf binaries on Windows natively without a Virtual Machine...so you should do your Windows-based Rails development in Bash on Windows.

Ruby on Rails development is great on Windows 10 because you've Windows 10 handling the "windows" UI part and bash and Ubuntu handling the shell.

After I set it up I want to git deploy my app to Azure, easily.

Developing on Ruby on Rails on Windows 10 using WSL

Rails and Ruby folks can apt-get update and apt-get install ruby, they can install rbenv or rvm as they like. These days rbenv is preferred.

Once you have Ubuntu on Windows 10 installed you can quickly install "rbenv" like this within Bash. Here I'm getting 2.3.0.

~$ git clone https://github.com/rbenv/rbenv.git ~/.rbenv

~$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
~$ echo 'eval "$(rbenv init -)"' >> ~/.bashrc
~$ exec $SHELL
~$ git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
~$ echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
~$ exec $SHELL
~$ rbenv install 2.3.0
~$ rbenv global 2.3.0
~$ ruby -v
~$ gem install bundler
~$ rbenv reshash

Here's a screenshot mid-process on my SurfaceBook. This build/install step takes a while and hits the disk a lot, FYI.

Installing rbenv on Windows under Ubuntu

At this point I've got Ruby, now I need Rails, as well as NodeJs for the Rails Asset Pipeline. You can change the versions as appropriate.

@ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -

$ sudo apt-get install -y nodejs
$ gem install rails -v 5.0.1

You will likely also want either PostgresSQL or MySQL or Mongo, or you can use a Cloud DB like Azure DocumentDB.

When you're developing on both Windows and Linux at the same time, you'll likely want to keep your code in one place or the other, not both. I use the automatic mount point that WSL creates at /mnt/c so for this sample I'm at /mnt/c/Users/scott/Desktop/RailsonAzure which maps to a folder on my Windows desktop. You can be anywhere, just be aware of your CR/LF settings and stay in one world.

I did a "rails new ." and got it running locally. Here you can se Visual Studio Code with Ruby Extensions and my project open next to Bash on Windows.

image

After I've got a Rails app running and I'm able to develop cleanly, jumping between Visual Studio Code on Windows and the Bash prompt within Ubuntu, I want to deploy the app to the web.

Since this is a simple "Hello World" default rails app I can't deploy it somewhere where the Rails Environment is Production. There's no Route in routes.rb (the Yay! You're on Rails message is development-time only) and there's no SECRET_KEY_BASE environment variable set which is used to verify signed cookies. I'll need to add those two things. I'll change routes.rb quickly to just use the default Welcome page for this demo, like this:

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    get '/' => "rails/welcome#index"
end

And I'll add the SECRET_KEY_BASE in as an App Setting/ENV var in the Azure portal when I make my backend, below.

Deploying Ruby on Rails App to Azure App Service on Linux

From the New menu in the Azure portal, choose to Web App on Linux (in preview as of the time I wrote this) from the Web + Mobile option. This will make an App Service Plan that has an App within it. There are a bunch of application stacks you can use here including node.js, PHP, .NE Core, and Ruby.

NOTE: A few glossary and definition points. Azure App Service is the Azure PaaS (Platform as a Service). You run Web Apps on Azure App Service. An Azure App Service Plan is the underlying Virtual Machine (sall, medium, large, etc.) that hosts n number of App Services/Web Sites. I have 20 App Services/Web Sites running under a App Service Plan with a Small VM. By default this is Windows by can run Php, Python, Node, .NET, etc. In this blog post I'm using an App Service Plan that runs Linux and hosts Docker containers. My Rails app will live inside that App Service and you can find the Dockerfiles and other info here https://github.com/Azure-App-Service/ruby or use your own Docker image.

Here you can see my Azure App Service that I'll now deploy to using Git. I could also FTP.

Ruby on Rails on Azure

I went into Deployment OPtions and setup a local (to Azure) git repro. Now I can see that under Overview.

image

On my local bash I add azure as a remote. This can be set up however your workflow is setup. In this case, Git is FTP for code.

$ git add remote azure https:[email protected]:443/RubyOnAzureAppService.git

$ git add .
$ git commit -m "initial"
$ git push azure master

This starts the deployment as the code is pushed to Azure.

Azure deploying the Rails app

IMPORTANT: I will also add "RAILS_ENV= production" and a SECRET_KEY_BASE=to my Azure Application Settings. You can make a new secret with "rake secret."

If I'm having trouble I can turn on Application Logging, Web Server Logging, and Detailed Error Messages under Diagnostic Logs then FTP into the App Service and look at the logs.

FTPing into Azure to look at logs

This is all in Preview so you'll likely run into issues. They are updating the underlying systems very often. Some gotchas I hit:

  • Deploying/redeploying requires an explicit site restart, today. I hear that'll be fixed soon.
  • I had to dig log files out via FTP. They are going to expose logs in the portal.
  • I used the Kudu "sidecar" site at mysite.scm.azurewebsite.net to get shell access to the Kudu container, but I'd like to be able to ssh into or get to access to the actual running container from the Azure Portal one day.

That said, if you'd like more internal details on how this works, you can watch a session from Connect() last year with developer Nazim Lala. Thanks to James Christianson for his debugging help!


Sponsor: Did you know VSTS can integrate closely with Octopus Deploy? Watch Damian Brady and Brian A. Randell as they show you how to automate deployments from VSTS to Octopus Deploy, and demo the new VSTS Octopus Deploy dashboard widget. Watch now



© 2017 Scott Hanselman. All rights reserved.
     

How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:


add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

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 WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

How WordPress Plugins Affect Your Site’s Load Time

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time,… Read More »

The post How WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

Have you ever wondered how WordPress plugins affect your site’s load time? WordPress plugins allow you to add features to your site, but they can also affect your website speed. In this article, we will show you how WordPress plugins affect your site’s load time, and how you can control them more efficiently.

How WordPress plugins affect your site's load time

How WordPress Plugins Work?

WordPress plugins are like apps for your WordPress site. You can install them to add more features to your website like contact forms, photo galleries, or an ecommerce store.

When someone visits your website, WordPress first loads its core files and then loads all your active plugins.

For more details, take a look at our article about what are WordPress plugins? And how do they work?.

How Can Plugins Affect Site Load Time?

Each WordPress plugin offers different functionality and features. To do that, some plugins make database calls on the backend while others load assets on the front-end such as CSS stylesheets, JavaScript files, images, etc.

Making database queries and loading assets adds up to your site’s load time. Most plugins make an HTTP request to load assets like scripts, CSS, and images. Each request increases your site’s page load time.

When done properly, the performance impact is often not too noticeable.

However, if you are using multiple plugins that are making too many http requests to load files and assets, then it will affect your site’s performance and user experience.

How to Check Files Loaded by WordPress Plugins?

To see how plugins are affecting your page load time, you need to check the files loaded by WordPress plugins.

There are plenty of tools that you can use to figure this out.

You can use your browser’s developer tools (Inspect in Google Chrome and Inspect Element in Firefox).

Simply visit your website and right click to select Inspect. This will open the developer tools panel.

You need to click on the ‘Network’ tab and then reload your website. As the page reloads, you will be able to see how your browser loads each file.

See page load time and files loaded with inspect tool

You can also use third-party tools like Pingdom and GTmetrix to see this. Among other useful information, these tools will also show you all files that are loaded and how much time they took to load.

Testing page load time using Pingdom

How Many Plugins are Too Many?

As you see these files being loaded, you may start wondering how many plugins you should I use on my site? How many plugins are too many?

The answer really depends on the set of plugins you are using on your website.

A single bad plugin can load 12 files while multiple good plugins will add just a couple of extra files.

All well-coded plugins try to keep the files they load to a minimum. However, not all plugin developers are that careful. Some plugins will load files on every single page load, even when they don’t need those files.

If you are using too many of such plugins, then this will start affecting your site’s performance.

How to Keep Plugins in Control?

The most important thing you can do on your WordPress site is to only use plugins that are well coded, have good reviews, and are recommended by trusted sources.

See our guide on how to find which WordPress plugins.

If you find that a WordPress plugin is affecting your site’s load, then look for a better plugin that does the same job but better.

Next, you need to start using caching and CDN to further improve your site’s performance and speed.

Another factor you should consider is your website hosting. If your hosting servers are not properly optimized, then it will increase your site’s response time.

This means that not just plugins, but your site’s overall performance will be slower. Make sure you are using one of the best WordPress hosting companies.

As a last resort, you can uninstall plugins that you can live without. Carefully review the installed plugins on your website,and see if you can uninstall some of them. This is not an ideal solution as you will have to compromise on features for speed.

Optimize WordPress Plugin Assets Manually

Advanced WordPress users can try to manage how WordPress plugins load files on their site. Doing so requires some knowledge of coding and some debugging skills.

The proper way to load scripts and stylesheets in WordPress is by using the wp_enqueue_style and wp_enqueue_script functions.

Most WordPress plugin developers use them to load plugin files. WordPress also comes with easy functions to deregister those scripts and stylesheets.

However, if you just disable loading those scripts and stylesheets, then this will break your plugins, and they will not work correctly. To fix that, you will need to copy and paste those styles and scripts into your theme’s stylesheet and JavaScript files.

This way you will be able to load all of them at once, minimizing the http requests and effectively decreasing your page load time.

Let’s see how to easily deregister stylesheets and JavaScript files in WordPress.

Disable Plugin Stylesheets in WordPress

First, you will need to find the name or handle of the stylesheet that you want to deregister. You can locate it using your browser’s inspect tool.

Finding a style name

After finding the stylesheet handle, you can deregister it by adding this code to your theme’s functions.php file or a site-specific plugin.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
}

You can deregister as many style handles as you want within this function. For example, if you have more than one plugin to deregister the stylesheet for, then you would do it like this:


add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'gdwpm_styles-css' );
wp_deregister_style( 'bfa-font-awesome-css' );
wp_deregister_style( 'some-other-stylesheet-handle' );
}

Remember, that deregistering these stylesheets will affect plugin features on your website. You need to copy the contents of each stylesheet you deregister and paste them in your WordPress theme’s stylesheet or add them as custom CSS.

Disable Plugin JavaScripts in WordPress

Just like stylesheets, you will need to find out the handle used by the JavaScript file to deregister them. However, you will not find the handle using the inspect tool.

For that you will need to dig deeper into plugin files to find out the handle used by the plugin to load a script.

Another way to find out all the handles used by plugins is to add this code into your theme’s functions.php file.

function wpb_display_pluginhandles() { 
$wp_scripts = wp_scripts(); 
$handlename .= "<ul>"; 
    foreach( $wp_scripts->queue as $handle ) :
      $handlename .=  '<li>' . $handle .'</li>';
    endforeach;
$handlename .= "</ul>";
return $handlename; 
}
add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles'); 

After adding this code, you can use [pluginhandles] shortcode to display a list of plugin script handles.

Display a list of plugin script handles in WordPress

Now that you have script handles, you can easily deregister them using the code below:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
}

You can also use this code to disable multiple scripts, like this:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
wp_deregister_script( 'contact-form-7' );
wp_deregister_script( 'gdwpm_lightbox-script' );
wp_deregister_script( 'another-plugin-script' );
}

Now, as we mentioned earlier that disabling these scripts will stop your plugins to work properly.

To avoid this, you will need to combine JavaScripts together, but sometimes it does not work smoothly, so you must know what you are doing. You can learn from trial and error (like a lot of us do), but we recommend you do not do that on a live site.

The best place to test is on a local WordPress install or on a staging site with managed WordPress hosting providers.

Load Scripts Only on Specific Pages

If you know that you will be needing a plugin script to load on a specific page on your website, then you can allow a plugin on that particular page.

This way the script remains disabled on all other pages of your site and is loaded only when needed.

Here is how you can load scripts on specific pages.

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );

function my_deregister_javascript() {
if ( !is_page('Contact') ) {
wp_deregister_script( 'contact-form-7' );
}
}

This code simply disables contact-form-7 script on all pages except the contact page.

That’s all for now.

We hope this article helped you learn how WordPress plugins affect your site’s load time. You may also want to see our ultimate guide to improve WordPress speed and site performance.

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 WordPress Plugins Affect Your Site’s Load Time appeared first on WPBeginner.

How to control PowerPoint on Windows with a Bluetooth Nintendo Switch JoyCon controller! (or a Surface Pen)

I usually use a Logitech Presentation Clicker to control PowerPoint presentations, but I’m always looking for new ways. Michael Samarin has a great app called KeyPenX that lets you use a Surface pen to control PowerPoint!

However, I’ve also got this wonderful Nintendo Switch and two JoyCon controllers. Rachel White reminded me that they are BlueTooth! So why not pair them to your machine and map some of their buttons to keystrokes?

Let’s do it!

First, hold the round button on the black side of the controller between the SL and SR buttons, then go into Windows Settings and Add Bluetooth Device.

Add a Bluetooth Device

You can add them both if you like! They show up like Game Controllers to Windows:

Hey a JoyCon is a JoyStick to Windows!

Ah, but these are Joysticks. We need to map JoyStick Actions to Key Presses. Enter JoyToKey. If you keep using it (even though you can use it free) it’s Shareware, you can buy JoyToKey for just $7.

Hold down a button on your Joystick/Joycon to see what it maps to. For example, here I’m clicking in on the stick and I can see that’s Button 12.

Using JoyToKey to map JoyCons to PowerPoint

Map them anyway you like. I mapped left and right to PageUp and PageDown so now I can control PowerPoint!

Using JoyToKey to map JoyCons to PowerPoint

And here it is in action:

ZOMG YOU CAN CONTROL POWERPOINT WITH THE #NintendoSwitch JoyCon! /ht @ohhoe

A post shared by Scott Hanselman (@shanselman) on Apr 10, 2017 at 12:38pm PDT

So fun! Enjoy!


Sponsor: Did you know VSTS can integrate closely with Octopus Deploy? Watch Damian Brady and Brian A. Randell as they show you how to automate deployments from VSTS to Octopus Deploy, and demo the new VSTS Octopus Deploy dashboard widget. Watch now


© 2017 Scott Hanselman. All rights reserved.
     

I usually use a Logitech Presentation Clicker to control PowerPoint presentations, but I'm always looking for new ways. Michael Samarin has a great app called KeyPenX that lets you use a Surface pen to control PowerPoint!

However, I've also got this wonderful Nintendo Switch and two JoyCon controllers. Rachel White reminded me that they are BlueTooth! So why not pair them to your machine and map some of their buttons to keystrokes?

Let's do it!

First, hold the round button on the black side of the controller between the SL and SR buttons, then go into Windows Settings and Add Bluetooth Device.

Add a Bluetooth Device

You can add them both if you like! They show up like Game Controllers to Windows:

Hey a JoyCon is a JoyStick to Windows!

Ah, but these are Joysticks. We need to map JoyStick Actions to Key Presses. Enter JoyToKey. If you keep using it (even though you can use it free) it's Shareware, you can buy JoyToKey for just $7.

Hold down a button on your Joystick/Joycon to see what it maps to. For example, here I'm clicking in on the stick and I can see that's Button 12.

Using JoyToKey to map JoyCons to PowerPoint

Map them anyway you like. I mapped left and right to PageUp and PageDown so now I can control PowerPoint!

Using JoyToKey to map JoyCons to PowerPoint

And here it is in action:

ZOMG YOU CAN CONTROL POWERPOINT WITH THE #NintendoSwitch JoyCon! /ht @ohhoe

A post shared by Scott Hanselman (@shanselman) on


So fun! Enjoy!


Sponsor: Did you know VSTS can integrate closely with Octopus Deploy? Watch Damian Brady and Brian A. Randell as they show you how to automate deployments from VSTS to Octopus Deploy, and demo the new VSTS Octopus Deploy dashboard widget. Watch now



© 2017 Scott Hanselman. All rights reserved.
     

How to Fix “Missing a Temporary Folder” Error in WordPress

Are you seeing ‘Missing a temporary folder’ error on your WordPress site? This error makes it impossible to upload images, update themes and plugins, or update WordPress core. In this article, we will show you how to easily fix “Missing a temporary folder” error in… Read More »

The post How to Fix “Missing a Temporary Folder” Error in WordPress appeared first on WPBeginner.

Are you seeing ‘Missing a temporary folder’ error on your WordPress site? This error makes it impossible to upload images, update themes and plugins, or update WordPress core. In this article, we will show you how to easily fix “Missing a temporary folder” error in WordPress.

How to fix 'Missing temporary folder' error in WordPress

What Causes The ‘Missing a Temporary Folder’ Error in WordPress?

This error is caused by incorrect PHP settings on your WordPress hosting environment. There is a specific PHP setting that defines a temporary folder to be used by apps like WordPress to temporarily store data before saving it to the desired location.

WordPress needs access to this temporary folder when you upload an image, install or update a theme or plugin, or update WordPress core.

If the location of this folder is not defined in your server’s PHP configuration, then WordPress will be unable to do any of these things and will show you ‘Missing a temporary folder’ error.

Missing temporary folder error

Having said that, let’s see how to easily fix the ‘Missing a temporary folder’ error in WordPress.

Fix Missing Temporary Folder Error in WordPress

For this tutorial, you will need to edit wp-config.php file in WordPress. If you haven’t done this before, then please see our guide on how to edit wp-config.php file in WordPress.

First, you will need to connect to your website using an FTP client or File Manager in cPanel dashboard of your hosting account.

Next, you will need to locate the wp-config.php file and edit it.

Editing wp-config.php file using an FTP client

You need to paste this code to the file just before the line that says ‘That’s all, stop editing! Happy blogging’.

define('WP_TEMP_DIR', dirname(__FILE__) . '/wp-content/temp/');

Save your changes and upload the wp-config.php file back to your website.

Next, you need to go to /wp-content/ folder and create a new folder inside it. You need to name this new folder temp.

Creating temp folder

That’s all, you can now visit your WordPress admin area and try uploading an image.

Troubleshooting

If this method doesn’t work, then check the directory permissions for your wp-content folder.

Note: This error is caused by poorly configured hosting environment. The solution described above is just a workaround. You should still ask your hosting provider to fix this. If they don’t, then you should switch to one of these top WordPress hosting companies.

We hope this article helped you fix the ‘Missing a temporary folder’ error in WordPress. You may also want to bookmark our ultimate list of the most common WordPress errors and how to fix them.

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 Fix “Missing a Temporary Folder” Error in WordPress appeared first on WPBeginner.

30+ Best WordPress Business Themes (2017)

Are you looking for the best WordPress theme for your business? While there are many WordPress themes available, not all of them are suitable for business websites. In this article, we will share the best WordPress business themes of 2017. Building a Business Website with… Read More »

The post 30+ Best WordPress Business Themes (2017) appeared first on WPBeginner.

Are you looking for the best WordPress theme for your business? While there are many WordPress themes available, not all of them are suitable for business websites. In this article, we will share the best WordPress business themes of 2017.

Best WordPress Themes for Businesses

Building a Business Website with WordPress

WordPress is the most powerful platform to build your business website. This is why so many big name brands use WordPress.

To build your business website with WordPress, you will need to sign up for a WordPress hosting account because all websites on the internet needs hosting. This is where all of your website files are stored.

You will also need a domain name. This will be your website’s address on the internet, and this is what users will type in their browser to reach your website (example: wpbeginner.com).

If you are just starting out, then we recommend using either Bluehost or SiteGround. They are one of the largest hosting companies in the world and official WordPress hosting partners.

Once you have signed up for hosting, you can go on and install WordPress. We have a step by step guide on how to start a WordPress blog that help you setup and running in no time.

After installing WordPress, you can select a theme from our expert pick of the best WordPress business themes.

Need help installing the theme? Follow the instructions in our step by step guide on how to install a WordPress theme.

Having said that, let’s take a look at the best WordPress business themes of 2017. This list contains both free and paid WordPress themes and all of them are fully mobile responsive.

1. Highend

Highend

Highend is a premium WordPress theme for business websites. It comes packed with features like multiple ready to use demo templates, drag and drop page builder, sliders, icon fonts, etc.

It comes with several page templates, custom widgets, multiple sidebars and navigation menus. It has sections to add your portfolio items, team members, photo galleries. It is WooCommerce ready so you can even add an online store to your website.

2. Koehn

Koehn

Koehn is a beautiful WordPress theme for business organizations. It comes with a beautiful drag and drop homepage with built-in content widgets. The homepage also comes with a powerful fullscreen slider.

Koehn comes with sections to add your projects and team members. It also comes with custom widgets for content discovery and social media like Instagram, Flickr, Twitter, etc.

3. Atmosphere Pro

Atmosphere Pro

Atmosphere is a WordPress business theme built on top of Genesis theme framework. It comes with beautiful full screen header image with a call to action.

Theme’s design utilizes lots of open space to create a spacious layout that looks refreshing. It uses large featured images and crisp typography. It is WooCommerce ready and optimized for speed and performance.

4. Nectar

Nectar

Nectar is a stylish WordPress business theme with beautiful colors and spacious layout. It features a beautiful parallax slider on the homepage which is immediately followed by a call to action.

It comes with sections to add portfolio items and testimonials. It is easy to setup and comes with a custom theme options panel which allows you to just check boxes and add text to setup theme.

5. Narcos

Narcos

Narcos is a gorgeous WordPress business theme with tons of options. It features a beautiful large header image, parallax scrolling, and drag and drop home page.

It comes with built-in sections to create portfolio, display testimonials, and add staff profiles. It has 6 homepage layouts, each with flexible customization options.

6. Digital Pro

Digital Pro

Digital Pro is a modern WordPress theme for digital media companies and businesses. Theme’s home page features multiple widgetized areas, a large header image with call to action, and custom widgets to build your website in minutes.

It comes with a themes option panel and live customizer support. It has multiple layout choices, color schemes, and fully customizable header area with custom logo support.

7. Struct

Struct

Struct is a WordPress business theme for digital agencies, start ups, and technology businesses. It comes with a fully-widgetized homepage that allows you to easily drag and drop content to build your homepage.

It comes with sections to add services, projects, team, faq, guides, clients, and testimonials. It also offers unlimited color choices, multiple page templates, and easy social media integration.

8. Birch

Birch

Birch is a stylish WordPress theme suitable for all kind of businesses. It comes with a beautiful parallax slider on the homepage, followed by a call to action and welcome message.

It comes with portfolio and testimonials sections, custom widgets, multiple sidebars and page templates. Theme setup is easy with the help of a simple theme options panel.

9. Ultra

Ultra

Ultra is a powerful and extremely flexible WordPress theme for businesses. It comes with dozens of ready to use templates that you can apply with a click and a drag and drop page builder to easily edit those templates.

Apart from that it comes with several custom widgets, multiple content types, sidebars, page templates, navigation menus, etc. It is highly customizable without writing any kind of code.

10. Montblanc

Montblanc

Montblanc is a beautiful multi-purpose theme suitable for business websites. It can also be used as a one page WordPress theme. It features a large full screen slider on the homepage with transparent navigation menu and logo at the top.

It comes with 5 homepage layouts, 4 creative header styles, multiple portfolio layouts, and full WooCommerce support. It ships with a drag and drop page builder and a slider module. Theme setup is easy with simple demo content import.

11. Executive Pro

Executive Pro

Executive Pro is a WordPress business theme with a corporate look. It is built on top of Genesis theme framework and comes with a fully widgetized homepage. It has a large slider on the homepage where you can showcase the most important pages.

It comes with multiple page layouts and color schemes, prominent call to action banner, and a custom email newsletter widget.

12. Architekt

Architekt

Architekt is a powerful and highly customizable WordPress business theme. It comes with multiple homepage layout, with unlimited color schemes, and an easy to use page builder. There are several built-in page layouts and a one-click demo data importer.

It is easy to customize and setup and is fully compatible with WPML to create multilingual websites.

13. Moesia Pro

Moesia Pro

Moesia is a modern WordPress business theme. It features a large fullscreen image on the homepage with a call to action button.

It comes with a drag and drop page builder with different content blocks. You can add and arrange the blocks to easily build your own homepage layout. It also has slider, page templates, Google fonts, and all the features you would expect from a premium theme.

14. The Advisors

The Advisors

The Advisors is a modern WordPress business theme suitable for consultants and financial websites. It features a beautiful home page slider with tons of customizable options.

The homepage features beautiful animations, slide-in elements, and can be built using drag and drop. It comes with testimonials, services, about section, mission and vision, and contact form.

15. Elbrus

Elbrus

Elbrus is a multi-purpose WordPress theme for businesses. The homepage features a gorgeous slider and beautiful animations as user scrolls down. It comes with portfolio and services content types.

The theme ships with page builder and slider plugins. It has multiple layout choices, different page templates, sidebars, custom widgets, and sticky navigation menu at the top.

16. Plum

Plum

Plum is a free multi-purpose WordPress theme for business websites. It comes with a beautiful slider, CSS animations, featured content area, and custom widgets.

It also supports WooCommerce and is quite easy to set up with the help of live theme customizer.

17. Venture

Venture

Venture is a premium WordPress business theme. It comes with a widgetized dynamic page builder which allows you to drag and drop items to create your homepage. It is also comes with full WooCommerce support so you can add an store or built an eCommerce website.

It features a featured content slider on the homepage, a portfolio section, testimonials, sub-pages widget, and much more. It is fully customizable with the live preview and allows you to use your own color schemes.

18. FinVertex

FinVertex

FinVertext is a very professional looking WordPress theme for financial and consultancy businesses. It features a large fullscreen slider on the homepage and comes with tons of awesome features.

It has out of box support for WPML multilingual WordPress plugin. It also comes with Google Maps and Google Fonts support, contact form, newsletter signup form, beautiful sliders and photo gallery.

19. Screenr

Screenr

Screenr is a free WordPress theme for business websites. It comes with a beautiful fullscreen header image on the homepage followed by a widgetized homepage area. It comes with custom widgets, custom page templates, parallax background effects, and can also be used as a one-page WordPress theme.

20. Taylor

Taylor

Taylor is a super-flexible WordPress theme for businesses. It comes with drag and drop page builder, content modules, and multiple layout choices.

It also includes Google fonts support, custom widgets, multiple page templates, and live theme customizer support. It comes with a contact form, and a newsletter subscription form aswell.

21. Presence

Presence

Presence is an excellent option WordPress theme for businesses. It can be used to a build real estate, business, portfolio, music, or a hotel website. This highly customizable theme comes with ready to use demos for all kind of business websites.

It has built-in sections for portfolio, about, team members, and client testimonials. It also includes multiple custom widgets, unlimited page layouts, and 6 color schemes.

22. Amaryllis

Amaryllis

If you are looking for a stylish WordPress business theme for WooCommerce support, then checkout Amaryllis. This beautiful WooCommerce ready themes comes with beautiful typography, elegant large header image, and gorgeous display of your products.

It has widgetized homepage layout where you just need to drag and drop content widgets to get ready in minutes. Theme setup is quite easy and it also allows you to choose how you want to display items in your online store.

23. Corporate Plus

Corporate Plus

Corporate Plus is a free WordPress theme for business websites. It can be also be used as a single page theme. It comes with powerful features like slider, about section, services, parallax background support, blog section, and contact page. It is fully widgetized which makes it quite easy to setup.

24. Roxima

Roxima

Roxima is a beautiful WordPress business theme with a professional corporate look. It comes with multiple layout choices, templates, and custom widgets.

It has built-in about, services, portfolio, client, and team sections which can be easily added to homepage using drag and drop. It is highly optimized for speed and performance and is quite easy to setup with live theme customizer.

25. HotelEngine Classy

Hotelengine Classy

HotelEngine Classy is a powerful and highly customizable WordPress theme for hotels, resorts, and hospitality businesses. The front page features a beautiful fullscreen slider with a booking form at the bottom of the screen.

It comes with room templates, services, location, and gallery templates. It also has testimonials, custom logo, multiple color schemes, and easy to use theme options panel.

26. Vantage

Vantage

Vantage is a flexible free WordPress business theme that can be easily used to build almost any kind of website. It is easy to setup and can be used with Site Origin’s free page builder plugin, which allows you to create your own page layouts using drag and drop.

27. Angle

Angle

Angle is a WordPress business theme with a clean professional look. It comes with a drag and drop builder, portfolio section, sliders, visual theme customizer, and multiple layout choices.

Angle is optimized for speed and performance and ease of use. Its layout makes it a perfect choice for any kind of business website.

28. Prestige

Prestige

Prestige is an elegantly designed WordPress theme for hotels, motels, hospitality and travel related businesses. It allows you to easily build your homepage layout using custom widgets in live customizer.

Prestige comes with social media integration, custom widgets, sliders, and custom backgrounds. It also has multiple page templates for different sections of your website.

29. Advent

Advent

Advent is a modern WordPress business theme designed to be used as a landing page theme for apps. It comes with a widgetized homepage builder where you can add features, overview, about and reviews section.

It features beautiful homepage header image, on-scroll animations, parallax backgrounds, and tons of awesome features that would make your landing page stand out.

30. Infinity Pro

Infinity Pro

Infinity Pro is a beautifully designed WordPress theme for business websites. It is built on Genesis theme framework. It comes with full WooCommerce support and is quite easy to setup.

Other features include 13 widget ready areas, widgetized homepage, custom headers, custom logo, and multiple page templates.

31. Creativo

Creativo

If you are looking for a creative WordPress theme for your business, then check out Creativo. It comes with 3 design layouts, 7 skins, and multiple header layouts with unlimited color choices.

It comes with built-in portfolio content type and full WooCommerce support. It ships with page builder, slider, and a live chat plugin as well.

That’s all for now.

We hope this article helped you find a beautiful WordPress theme for your business. You may also want to see our list of 24 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 30+ Best WordPress Business Themes (2017) appeared first on WPBeginner.

30+ Best WordPress Business Themes (2017)

Are you looking for the best WordPress theme for your business? While there are many WordPress themes available, not all of them are suitable for business websites. In this article, we will share the best WordPress business themes of 2017. Building a Business Website with… Read More »

The post 30+ Best WordPress Business Themes (2017) appeared first on WPBeginner.

Are you looking for the best WordPress theme for your business? While there are many WordPress themes available, not all of them are suitable for business websites. In this article, we will share the best WordPress business themes of 2017.

Best WordPress Themes for Businesses

Building a Business Website with WordPress

WordPress is the most powerful platform to build your business website. This is why so many big name brands use WordPress.

To build your business website with WordPress, you will need to sign up for a WordPress hosting account because all websites on the internet needs hosting. This is where all of your website files are stored.

You will also need a domain name. This will be your website’s address on the internet, and this is what users will type in their browser to reach your website (example: wpbeginner.com).

If you are just starting out, then we recommend using either Bluehost or SiteGround. They are one of the largest hosting companies in the world and official WordPress hosting partners.

Once you have signed up for hosting, you can go on and install WordPress. We have a step by step guide on how to start a WordPress blog that help you setup and running in no time.

After installing WordPress, you can select a theme from our expert pick of the best WordPress business themes.

Need help installing the theme? Follow the instructions in our step by step guide on how to install a WordPress theme.

Having said that, let’s take a look at the best WordPress business themes of 2017. This list contains both free and paid WordPress themes and all of them are fully mobile responsive.

1. Highend

Highend

Highend is a premium WordPress theme for business websites. It comes packed with features like multiple ready to use demo templates, drag and drop page builder, sliders, icon fonts, etc.

It comes with several page templates, custom widgets, multiple sidebars and navigation menus. It has sections to add your portfolio items, team members, photo galleries. It is WooCommerce ready so you can even add an online store to your website.

2. Koehn

Koehn

Koehn is a beautiful WordPress theme for business organizations. It comes with a beautiful drag and drop homepage with built-in content widgets. The homepage also comes with a powerful fullscreen slider.

Koehn comes with sections to add your projects and team members. It also comes with custom widgets for content discovery and social media like Instagram, Flickr, Twitter, etc.

3. Atmosphere Pro

Atmosphere Pro

Atmosphere is a WordPress business theme built on top of Genesis theme framework. It comes with beautiful full screen header image with a call to action.

Theme’s design utilizes lots of open space to create a spacious layout that looks refreshing. It uses large featured images and crisp typography. It is WooCommerce ready and optimized for speed and performance.

4. Nectar

Nectar

Nectar is a stylish WordPress business theme with beautiful colors and spacious layout. It features a beautiful parallax slider on the homepage which is immediately followed by a call to action.

It comes with sections to add portfolio items and testimonials. It is easy to setup and comes with a custom theme options panel which allows you to just check boxes and add text to setup theme.

5. Narcos

Narcos

Narcos is a gorgeous WordPress business theme with tons of options. It features a beautiful large header image, parallax scrolling, and drag and drop home page.

It comes with built-in sections to create portfolio, display testimonials, and add staff profiles. It has 6 homepage layouts, each with flexible customization options.

6. Digital Pro

Digital Pro

Digital Pro is a modern WordPress theme for digital media companies and businesses. Theme’s home page features multiple widgetized areas, a large header image with call to action, and custom widgets to build your website in minutes.

It comes with a themes option panel and live customizer support. It has multiple layout choices, color schemes, and fully customizable header area with custom logo support.

7. Struct

Struct

Struct is a WordPress business theme for digital agencies, start ups, and technology businesses. It comes with a fully-widgetized homepage that allows you to easily drag and drop content to build your homepage.

It comes with sections to add services, projects, team, faq, guides, clients, and testimonials. It also offers unlimited color choices, multiple page templates, and easy social media integration.

8. Birch

Birch

Birch is a stylish WordPress theme suitable for all kind of businesses. It comes with a beautiful parallax slider on the homepage, followed by a call to action and welcome message.

It comes with portfolio and testimonials sections, custom widgets, multiple sidebars and page templates. Theme setup is easy with the help of a simple theme options panel.

9. Ultra

Ultra

Ultra is a powerful and extremely flexible WordPress theme for businesses. It comes with dozens of ready to use templates that you can apply with a click and a drag and drop page builder to easily edit those templates.

Apart from that it comes with several custom widgets, multiple content types, sidebars, page templates, navigation menus, etc. It is highly customizable without writing any kind of code.

10. Montblanc

Montblanc

Montblanc is a beautiful multi-purpose theme suitable for business websites. It can also be used as a one page WordPress theme. It features a large full screen slider on the homepage with transparent navigation menu and logo at the top.

It comes with 5 homepage layouts, 4 creative header styles, multiple portfolio layouts, and full WooCommerce support. It ships with a drag and drop page builder and a slider module. Theme setup is easy with simple demo content import.

11. Executive Pro

Executive Pro

Executive Pro is a WordPress business theme with a corporate look. It is built on top of Genesis theme framework and comes with a fully widgetized homepage. It has a large slider on the homepage where you can showcase the most important pages.

It comes with multiple page layouts and color schemes, prominent call to action banner, and a custom email newsletter widget.

12. Architekt

Architekt

Architekt is a powerful and highly customizable WordPress business theme. It comes with multiple homepage layout, with unlimited color schemes, and an easy to use page builder. There are several built-in page layouts and a one-click demo data importer.

It is easy to customize and setup and is fully compatible with WPML to create multilingual websites.

13. Moesia Pro

Moesia Pro

Moesia is a modern WordPress business theme. It features a large fullscreen image on the homepage with a call to action button.

It comes with a drag and drop page builder with different content blocks. You can add and arrange the blocks to easily build your own homepage layout. It also has slider, page templates, Google fonts, and all the features you would expect from a premium theme.

14. The Advisors

The Advisors

The Advisors is a modern WordPress business theme suitable for consultants and financial websites. It features a beautiful home page slider with tons of customizable options.

The homepage features beautiful animations, slide-in elements, and can be built using drag and drop. It comes with testimonials, services, about section, mission and vision, and contact form.

15. Elbrus

Elbrus

Elbrus is a multi-purpose WordPress theme for businesses. The homepage features a gorgeous slider and beautiful animations as user scrolls down. It comes with portfolio and services content types.

The theme ships with page builder and slider plugins. It has multiple layout choices, different page templates, sidebars, custom widgets, and sticky navigation menu at the top.

16. Plum

Plum

Plum is a free multi-purpose WordPress theme for business websites. It comes with a beautiful slider, CSS animations, featured content area, and custom widgets.

It also supports WooCommerce and is quite easy to set up with the help of live theme customizer.

17. Venture

Venture

Venture is a premium WordPress business theme. It comes with a widgetized dynamic page builder which allows you to drag and drop items to create your homepage. It is also comes with full WooCommerce support so you can add an store or built an eCommerce website.

It features a featured content slider on the homepage, a portfolio section, testimonials, sub-pages widget, and much more. It is fully customizable with the live preview and allows you to use your own color schemes.

18. FinVertex

FinVertex

FinVertext is a very professional looking WordPress theme for financial and consultancy businesses. It features a large fullscreen slider on the homepage and comes with tons of awesome features.

It has out of box support for WPML multilingual WordPress plugin. It also comes with Google Maps and Google Fonts support, contact form, newsletter signup form, beautiful sliders and photo gallery.

19. Screenr

Screenr

Screenr is a free WordPress theme for business websites. It comes with a beautiful fullscreen header image on the homepage followed by a widgetized homepage area. It comes with custom widgets, custom page templates, parallax background effects, and can also be used as a one-page WordPress theme.

20. Taylor

Taylor

Taylor is a super-flexible WordPress theme for businesses. It comes with drag and drop page builder, content modules, and multiple layout choices.

It also includes Google fonts support, custom widgets, multiple page templates, and live theme customizer support. It comes with a contact form, and a newsletter subscription form aswell.

21. Presence

Presence

Presence is an excellent option WordPress theme for businesses. It can be used to a build real estate, business, portfolio, music, or a hotel website. This highly customizable theme comes with ready to use demos for all kind of business websites.

It has built-in sections for portfolio, about, team members, and client testimonials. It also includes multiple custom widgets, unlimited page layouts, and 6 color schemes.

22. Amaryllis

Amaryllis

If you are looking for a stylish WordPress business theme for WooCommerce support, then checkout Amaryllis. This beautiful WooCommerce ready themes comes with beautiful typography, elegant large header image, and gorgeous display of your products.

It has widgetized homepage layout where you just need to drag and drop content widgets to get ready in minutes. Theme setup is quite easy and it also allows you to choose how you want to display items in your online store.

23. Corporate Plus

Corporate Plus

Corporate Plus is a free WordPress theme for business websites. It can be also be used as a single page theme. It comes with powerful features like slider, about section, services, parallax background support, blog section, and contact page. It is fully widgetized which makes it quite easy to setup.

24. Roxima

Roxima

Roxima is a beautiful WordPress business theme with a professional corporate look. It comes with multiple layout choices, templates, and custom widgets.

It has built-in about, services, portfolio, client, and team sections which can be easily added to homepage using drag and drop. It is highly optimized for speed and performance and is quite easy to setup with live theme customizer.

25. HotelEngine Classy

Hotelengine Classy

HotelEngine Classy is a powerful and highly customizable WordPress theme for hotels, resorts, and hospitality businesses. The front page features a beautiful fullscreen slider with a booking form at the bottom of the screen.

It comes with room templates, services, location, and gallery templates. It also has testimonials, custom logo, multiple color schemes, and easy to use theme options panel.

26. Vantage

Vantage

Vantage is a flexible free WordPress business theme that can be easily used to build almost any kind of website. It is easy to setup and can be used with Site Origin’s free page builder plugin, which allows you to create your own page layouts using drag and drop.

27. Angle

Angle

Angle is a WordPress business theme with a clean professional look. It comes with a drag and drop builder, portfolio section, sliders, visual theme customizer, and multiple layout choices.

Angle is optimized for speed and performance and ease of use. Its layout makes it a perfect choice for any kind of business website.

28. Prestige

Prestige

Prestige is an elegantly designed WordPress theme for hotels, motels, hospitality and travel related businesses. It allows you to easily build your homepage layout using custom widgets in live customizer.

Prestige comes with social media integration, custom widgets, sliders, and custom backgrounds. It also has multiple page templates for different sections of your website.

29. Advent

Advent

Advent is a modern WordPress business theme designed to be used as a landing page theme for apps. It comes with a widgetized homepage builder where you can add features, overview, about and reviews section.

It features beautiful homepage header image, on-scroll animations, parallax backgrounds, and tons of awesome features that would make your landing page stand out.

30. Infinity Pro

Infinity Pro

Infinity Pro is a beautifully designed WordPress theme for business websites. It is built on Genesis theme framework. It comes with full WooCommerce support and is quite easy to setup.

Other features include 13 widget ready areas, widgetized homepage, custom headers, custom logo, and multiple page templates.

31. Creativo

Creativo

If you are looking for a creative WordPress theme for your business, then check out Creativo. It comes with 3 design layouts, 7 skins, and multiple header layouts with unlimited color choices.

It comes with built-in portfolio content type and full WooCommerce support. It ships with page builder, slider, and a live chat plugin as well.

That’s all for now.

We hope this article helped you find a beautiful WordPress theme for your business. You may also want to see our list of 24 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 30+ Best WordPress Business Themes (2017) appeared first on WPBeginner.

How to Create a Sticky Floating Navigation Menu in WordPress

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will… Read More »

The post How to Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.

Have you noticed that many popular websites are now using sticky navigation menu. Normally, navigation menus are displayed on top and disappear as users scroll down. Sticky navigation menus float as users scroll down and are always visible on screen. In this article, we will show you how to easily create a sticky floating navigation menu in WordPress.

How to Create Sticky Floating Navigation Menu in WordPress

Method 1: Add Sticky Floating Navigation Menu Using Plugin

This method is easier and is recommended for all users. If you haven’t setup the navigation menus yet, then please see our guide on how to add a navigation menu in WordPress.

First thing you need to do is install and activate the Sticky Menu (or Anything!) on Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Sticky Menu (or Anything!) page to configure plugin settings.

Sticky Menu plugin setting

First you need to enter the CSS ID of the navigation menu that you want to make sticky.

You will need to use your browser’s inspect tool to find the CSS ID used by your navigation menu.

Simply visit your website and take your mouse to the navigation menu. After that, you need to right click and select Inspect from your browser’s menu.

Inspect tool

This will split your browser screen, and you will be able to see the source code for your navigation menu. You need to find a line of code like this:

<nav id="site-navigation" class="main-navigation" role="navigation">

In this example, our navigation menu’s CSS ID is site-navigation.

Go ahead and enter the navigation CSS ID in the plugin settings like this #site-navigation.

The next option on the plugin’s settings page is to define the space between the top of your screen and the sticky navigation menu. You can use this setting if your menu is overlapping an element that you do not want to be hidden. If not, then ignore this setting.

After that you need to click the checkbox next to the option: ‘Check for Admin Bar’. This allows the plugin to add some space for the WordPress admin bar which is only added for logged in users.

The next option in the settings page allows you unstick the navigation menu if a user is visiting your website using a smaller screen such as a mobile device.

You can test how it looks on mobile devices or tablets. If you don’t like it, then you can add 780px for this option.

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

You can now visit your website to see your sticky floating navigation menu in action.

Sticky menu

Method 2: Manually Add Sticky Floating Navigation Menu

This method requires you to add custom CSS code to your theme. If you haven’t done this before, then please see our guide on how to easily add custom css to your WordPress site.

First you need to visit Appearance » Customize to launch theme customizer.

Adding custom CSS in WordPress theme

Click on ‘Additional CSS’ in the left pane and then add this CSS code.

#site-navigation {
    background:#fff;
    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: center;
}

Replace #site-navigation with the CSS ID of your navigation menu and click on the Save & Publish button.

You can now visit your website to see your sticky floating navigation menu in action.

If your navigation menu normally appears after the site header, then this CSS code could overlap the site title and header.

This can be easily adjusted by adding a margin to your header area using some CSS like this:

.site-branding {
margin-top:60px;
}

Replace site-branding with the CSS class of your header area.

We hope this article helped you add sticky floating navigation menu to your WordPress site. You may also want to see our list of 15 best tutorials to master WordPress navigation menus.

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 Create a Sticky Floating Navigation Menu in WordPress appeared first on WPBeginner.