Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Build a Performance Optimized WordPress Site using WPMU DEV and Cloudways

July 20, 2016

10 Min Read
Reading Time: 10 minutes

Captain America was created in a laboratory experiment with micro-injections of serum and doused with ‘vita-rays’, turning him into a super soldier considered as one of the greatest comic heroes of our generation. However, you must be thinking, “how is the Avengers’ leader relevant here?”. Well, akin to how he was developed into a superhero, you can turn your website into a powerhouse if you know where to look for the resources.

Get WPMUDEV Yearly Membership in just $392 instead of $588 through this exclusive discount link.

Today, we’ll demonstrate how you can easily create a WordPress website using Optimized and Secure WordPress Cloud Server and WPMU DEV products and  give the website superpowers using all the resources available!

Build a Performance Optimized WordPress Site using WPMU DEV and Cloudways

Login to Hosting and Launching a Server

Sign up by visiting Cloudways Platform and verify your email.

Launching a server and installing WordPress on Cloudways WordPress managed Hosting isn’t a difficult task. You just have to select WordPress and fill in the following fields:  Name your App, Name your Server, Select Project, Server Size,  and Location and then simply click on “LAUNCH SERVER“.

Wait a few minutes for the process to complete then you’re done!

create new server cloudways

Now, go to the “Applications” tab on the top left where you’ll see your recent WordPress installation and launch it.

Cloudways Platform Application panel

We’re done with installing WordPress on Optimized server.

From Admin Panel tab, navigate to WordPress’ admin panel and login with credentials that were listed there.

What is WPMU DEV?

WPMU DEV basically gives your WordPress superpowers with its assortment of plugins and themes in its repository. To download them, you can avail their free trial for 3 days, but you’ve to verify your credit card credentials first.

Accessing WPMU DEV Repository

Once done, there are two ways to access the repository.

  1. WPMU DEV Dashboard

Download WPMU DEV Dashboard – A WordPress Plugin. Unzip and upload “wpmudev-updates” folder to

/applications/[APPLICATION_FOLDER]/public_html/wp-content/plugins

Go back to your “WordPress Admin Panel” and “Activate” it by navigating to “Plugins > Installed Plugins”.

Now you’ll see a new tab on the left pane like in the image below. As illustrated, now you can access WPMU DEV in all its glory by using this simple plugin.

WPMU Dev Dashboard

  1. Downloading files for individual plugins/themes

If you don’t want to access WPMU DEV repository by using their own WPMU DEV Dashboard, you can download individual files for themes/plugins and upload them to your hosting’s respective directory.

Important: In our example. We’ll access WPMU DEV repository by using their Dashboard plugin.

Installing a Theme

For this tutorial, we’ll install SPIRIT – A child theme of upfront.

Theme features:

WPMU Dev Spirit Theme Features - Cloudways

From your WordPress Admin Panel, navigate to “WPMU DEV > Themes“. Here you’ll see the complete list of available themes. Select the “Spirit” theme and click on the “Install” button.

WPMU Dev Spirit Theme Install on Cloudways

Once the theme is installed successfully, simply “Activate” it!

The new theme SPIRIT is now installed and activated successfully. Visit your website and you’ll see  your site adored with the new theme.

Editing The Theme

If you’re not satisfied with the current layout, appearance or elements of the theme, WPMU DEV has a feature that gives users the option to customize their WordPress website by using “Upfront” – a Front-end WordPress website builder.

Here is a short GIF, teaching how Upfront made editing a breeze in WordPress environment.

How Upfront by WPMU Dev Works

Drag & Drop Elements

Drag & Drop elements are used to quicken the process. While in yester years, the process of adding elements to your WordPress used to be a little complex and may even involved knowing about codes a little. But with the Drag & Drop elements, you just have to do exactly what it promises; Drag and Drop stuff on your website and you’re done with adding features. Just customize them in your own way.

Upfron Dragable Elements

Theme Settings:

This gives you the freedom to customize your website and its looks according to how you want it to be. You can select different fonts and colors for your fonts directly from here. One can also edit CSS files directly from Upfront panel.

WPMU Dev Upfront Theme Settings

Let’s start customizing few things in order to learn how to make use of this feature.

To do that, go to your website and click on “Upfront” on the header bar.

WPMU Dev Upfront Theme Spirit

It will take just a few moments to open the panel for you.

WPMU Dev Spirit Theme Editing using Upfront

On the left will appear all the necessary elements that can be used to customize your website, while on the right side, you’ll be able to see all the changes you made to your website.

Just drag and drop any element from the left pane to the website and make the necessary changes.

In the picture above, the background image is blurred.  I’ll teach you how to replace it with your own image.

Hover on top right corner and click on “Change Background”.

Change background in Spirit using Upfront

After that, click on the “Settings” icon and you’ll see a popup window like in the image below. From here, you can customize the background to your liking.

Add Image on spirit theme using upfront

There are a lot of features on the left pane which you can just drag and drop to your main screen, make the changes according to your needs and you’re done!

For this demo, we’re going to add some text on the top right corner. From the left pane, select “Text” and drop it on the corner of the screen as shown in the the image below:

Adding text to Spirit theme using Upfront

You’ll see a text field where you can now write whatever you want. Now select the text and you’ll see several customization options. Furthermore, you can click on “Settings” icon and go to advanced options from the left pane for more options.

Edit text on spirit theme using Upfront

Adding Posts

Upfront is far better than other WordPress builders because it provides the facility to “Add New Post” directly from their panel. To do that, click on “Add Post”. It will show you a template as shown below which will allow you to add your posts. Double click on any part of the page to add data, and from the left pane, you’ll have the ability to customize the posts according to your requirement.

Add post using Upfront

If you want to customize an existing post, just click on “Posts”.

Access posts on Upfront

And you’ll see all your posts like in the image below. Select any of them to “Edit”.

Edit posts using Upfront

Adding Pages:

Just like adding posts, Upfront allows you to add pages too. Just click on “New Page” and a new popup will be shown like in the image. Name your page, create a permalink and select a page template and click on “Create Page”. Your new page will be created instantly.

Add page using Upfront

If you want to edit an existing page, just click on “Pages” in the left pane.

Access page using Upfront

All pages will be listed, select any of them to “Edit”.

Edit page using Upfront

Responsive Live Preview:

Recently, WordPress 4.5 launched a “Responsive Live Preview” feature which you can try in the customizer pane. “Upfront” from WPMU DEV also contains this feature. Just customize the theme/post/page and see live previews on different platforms.

From the left pane, select “Responsive”.

Responsive live preview in Upfront

Now you’ll see a screen similar to the one shown below:

Access responsive preview in Upfront

It doesn’t end here. WPMU DEV has a complete tutorial on “Introducing Upfront” and recently they’ve added more features in their newest version “Upfront 1.3”. But remember, Upfront can only be used with WPMU DEV themes.

Plugins

Along with themes, WPMU DEV  has expanded its offerings in response to the needs of its customers. No matter what feature you want to add to your WordPress website, their repository has a solution for you. They have all the necessary plugins from Online Business to SEO, Marketing to publishing, and a high level of engagement in the community. You can find a list of their plugins here.

We’ll discuss their 3 most popular and most commonly used plugins.

  1. Defender
  2. Humming Bird
  3. WP Smush Pro

Security: Defender

It’s not easy to hack a website, until you provide a gateway”.

WordPress websites are always vulnerable to attacks. Being one of the most famous CMS providers has its disadvantages, and thus your WordPress needs the best security solution possible. Keeping this in mind, WPMU DEV has an outstanding plugin called the “Defender”.

From your WordPress Admin Panel, navigate to “WPMU Dev > Plugins”. Search for “Defender”, install and then “Activate” it.

WPMU Dev Defender Plugin

After successful installation, you’ll see a new tab on left pane under the name, “Defender”.

WPMU Dev Defender Dashboard

Here are some of the most common tasks that defender performs:

WPMU Dev Defender Features

  1. Hardener

Hardener searches for vulnerabilities, optimization, security bugs and provides solutions to fix them.

WPMU Dev Defender Hardener

  1. Scan

The scan feature lets you test your website’s core integrity and searches for vulnerabilities in the theme, plugins and the content area etc. Once it is done scanning, it will provide you with the best solutions to fix any issues that were found on your website.

WPMU Dev Defender Hardner

Cloudways and WPMU Dev (40)

As shown below, it also gives you the options to “Resolve”, “Ignore” and “Delete” the issue.

WPMU Dev Defender Resolving Issues

  1. Automated Scans

Automating your WP Defender is highly recommended so that the plugin regularly scans your website and keeps emailing you the reports. You can select at what frequency you want the automated scans to scan your website and send you reports.

WPMU Dev Defender Automatic Scans

  1. Audit log

WPMU Dev Defender Audit Log

COMING SOON

If you have always wanted to know who performed what activity on your website, know that WPMU DEV is creating an audit log feature that will track every interaction that takes place on your website and store the log in the cloud. Thankfully, hackers and malware won’t be able to cover their tracks, and since users are really excited about this one, we’ll keep everyone posted!

  1. Backups

WPMU Dev Defender Backup

Cloudways and WPMU Dev (34)

SECURE CLOUD BACKUPS

WPMU DEV will be offering automated cloud hosted backups very soon. This feature will be available for all active members, so if you are a victim of a hacking attempt or any serious issue, you can easily revert to a previous version, thanks to the backups you have created on the cloud. For now, you must create regular backups every now and then just to be on the safe side.

Performance: Humming Bird

A performance and a speed focused plugin, Hummingbird allows you to control concatenation and minification of the files, gzip compression and browser caching. WPMU DEV members also get custom performance reports and uptime monitoring.

To install, navigate to “WPMU DEV > Plugins” and search for “Humming Bird”. Click on “Install” and “activate” it.

WPMU Dev Humming Bird Installation

Humming Bird has following awesome features.

WPMU Dev Humming Bird Features

  1. Performance Report

Performance is another essential part of a website. With Humming Bird, you can get performance reports for the entire website.

WPMU Dev Humming Bird Performance

  1. Minification

Combining, minifying, and positioning files can have a positive impact on how long it takes your website to load for your visitors. When you use minify, it will provide you a 1-click solution!

WPMU Dev Humming Bird Minify

  1. Browser Caching

Caching stores temporary data on your visitors’ devices so that they don’t have to download assets twice. This results in a much faster turnaround page load speed. Enabling caching will set the recommended expiry times for your content.

WPMU Dev Humming Bird Browser Cache

  1. GZIP Compression

Gzip compresses your Javascript Style sheets and HTML before sending them to the browser. It reduces the time it takes for the files to transfer since they are much smaller in size in comparison.

WPMU Dev Humming Bird Gzip Compression

  1. Uptime

This shows the stats of your website and for how long your website was down. As you can see on Cloudways server, our WordPress site has 100% uptime.

WPMU Dev Humming Bird Uptime Monitoring

Image Compression: WP Smush Pro

Get the best in image optimization; compress your images while maintaining their quality to dramatically improve your website’s page speed.

To install, navigate to “WPMU DEV > Plugins” and search for “WP Smush Pro”. Click on “Install” and “activate” it.

WPMU Dev WP Smush Pro Installation

Here are some features of WP Smush Pro:

WPMU Dev WP Smush Pro Features

  1. Bulk and individual image smushing

By using WP Smush Pro, one can optimize images individually or collectively.

WPMU Dev WP Smush Pro Optimizing Images

Everyone can set his own settings based on his requirement. WP Smush Pro allows you to set settings that matches your requirements.

WPMU Dev WP Smush Pro Optimizing Images Setting

Conclusion

Just building a WordPress website isn’t enough. First of all, you have to choose the Best WordPress Hosting so that you don’t face any inconvenience. After installing WordPress, you just need to secure and optimize your WordPress website. For that purpose, WPMU Dev’s repository of plugins is always there to help you throughout!

 

Share your opinion in the comment section. COMMENT NOW

Share This Article

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Mustaasam Saleem

Mustaasam is the WordPress Community Manager at Cloudways - A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!