WordPress Navigation in Full Site Editing

This is the first look at the new WordPress menu navigation that will be used with full site editing enabled. This feature is in the beta stage and currently only works in conjunction with the Gutenberg plugin. For those who are new to the block editor game, users will have the ability to modify and update the header and footer of a site within the admin on the same page. Currently, unless it is setup as a sidebar in the widgets screen, a footer will likely need to be updated in a footer template file. The menu is also on a separate page and needs modification to be done in a template to work as needed. The goal is to give the end user access to everything and also allow for revisions in case a mistake is made.

The navigation area automatically populates a menu based on the pages you have published. It also allows you to create a new menu and copy an existing one to save you time. Another neat thing you can do is make the menu items bold or italic and even add a strikethrough. Of course this could be done with some css, but its a nice option to have it updated on the spot.

Screen Shot

Once you are happy with your menu items, you can easily add it where you would like in the full-site editing mode. You have the option to add a vertical menu or horizontal if its needed in a sidebar area. This gives the user more power and accessibility in the placing of the menu with the obvious ability to just drag and move the menu block wherever you want. This is something that most page-builders provide so WordPress is trying to get with the program, sort to speak.

Screen Shot

The shortcomings we have noticed so far is that when updating the menu in the navigation panel, we expect it to also update in the editor panel and the front-end; that currently aint happening. A submenu option is available but after adding one submenu item and saving; it isn’t showing up either. We currently do not see these things happening but we expect it all to be fixed when the final product is ready to be shipped; we hope.

While it’s a painful fact that the gutenberg plugin has the lowest rating of any plugin with over 3,000 reviews in WordPress. There is hope that this page-builder addition is starting to come around and actually be something that users might want to actually use. Stay tuned for future updates in our WordPress full site editing journey.

How We Can Duplicate Any Website

Yes, you can have the look of just about any website on the internet. Let us show you how it is done. All websites consist of html and css with many having additional javascript to add functionality such as animations. If you click Ctrl Option J (on Mac) or Ctrl Shift J (on Windows) when you’re on a site, it will open up a window with your sites guts. If you click on the Elements tab, you’ll see your content sandwiched between html tags. The css which modifies the look and style of the text is located on one or more stylesheets. If we have access to these two – and we should 99% of the time – we can recreate the look of most websites.

Lets look at the site https://www.apple.com. We will focus on the header area which is right below the navigation on top. It should look like the image below:

apple

Now lets say we are selling watches and want that same dark look and feel of their site. How would we go about changing this. Well, if we look at the html of the site we see that they have the text inside a div with class unit-copy-wrapper and another div below with the class unit-image-wrapper. The css – which is over 17,000 lines of code can be looked at here: https://www.apple.com/v/home/o/built/styles/main.built.css

There are a myriad of ways we can go with our look, but lets say we want a similar dark background. Lets also assume we are selling watches and will use a watch as the background image. And with a few more changes to some css properties, it could look something like below:

watch

We would also add the ability for you to update the content and links in the admin so making changes would be really easy. This is one example of many ways we can help to make your site look just like one already online. If you are ready, we can help make this a reality for you and copy the front page of a site by clicking the button below. We will pick a theme from the WordPress repo and completely remodel the homepage for you.

If you would like to clone a whole site including the interior pages, then you will need a custom site order. Either way, it would be an investment and you would need to trust us with your business or product. If feel like you want clarification on something, free to contact us with any questions.

blank

Moving From cPanel/WHM to Webmin/Virtualmin

This post will discuss what we learned moving from cPanel/WHM to Webmin/Virtualmin. We had some small hiccups doing the transfer but it was smooth overall and want others to also be able to make the transition.

For those who don’t know, cPanel is a Web Hosting Control Panel that has been around since 1996. They recently rolled out a new account-based pricing structure that no other company in the industry has. Critical Web Solutions was using cPanel for over 3 years and once we got news of the price increase in 2019, we’ve been looking for alternatives since. We only manage a few sites and our rise in cost was not that heavy. Although we’ve heard that some companies were hit with a 200-300% increase in pricing which is insane.

cpanel pablo

We considered a few different web hosting control panels such as Froxlor or Ajenti, but none suited us better than Webmin. Additionally, Virtualmin is an extra module or extension that makes it easy to automate tasks/processes such as cron jobs or email filtering. It provides you additional access the same way that WHM does with cPanel. There is a pro version of Virtualmin that is a paid service with support, but we opened only a few tickets in the years we used cPanel and don’t expect needing any help.

THE STEPS TAKEN

Let’s go over the steps we took in moving our sites from one server to another.

1 – Create full backups of all sites hosted on cPanel.

When you login to cPanel, go to Backup –> Download a Full Account Backup. Do this for all your sites and the simplest way is to download it to your computer.

2 – Launch an AWS Ec2 instance with Webmin installed.

We use AWS for hosting our files, although we totally recommend WP Engine for your hosting needs. In the end, we will need to update our records with the new Elastic IP address and replace the one used on our old instance.

3 – Login to the new server and install Virtualmin.

As we said before, Virtualmin is a plugin for Webmin that simplifies the management of your virtual hosts; aka your websites. We are assuming you know how to use the terminal for downloading and installing the files needed to get this baby working.

This command is needed to download virtualmin
wget https://software.virtualmin.com/gpl/scripts/install.sh
Note: if you get wget is not a command…try yum install wget

This command is needed to install virtualmin
chmod +x install.sh
Then
./install.sh
Note: if you are not the root user…you may need to use sudo before the commands

After the install is done, login to your Virtualmin area dashboard via https://youripaddress:10000 with the root password you created on your AWS instance. You should see 2 tabs with Webmin and Virtualmin

4 – Upload cPanel backups

After logging in to your Webmin server we can upload the backups we downloaded via ftp or wget option(from you computer) Go to the Virtualmin tab and click on the option to “Add servers” shown on the left side panel. Then click on “Migrate Virtual Server” option. Simply select the backup and click migrate and watch the magic happen. You dont need to worry about all the other options available; Webmin and Virtualmin know whats best for you.

migrate-server

5 – Update domain registrar nameservers.

Our last step is to update our domain registrar nameservers and have them point to the new Ip Address. We use a couple of registrars including Namecheap, whom we highly recommend for your domains.
Here is a link to save on domains with Namecheap in case you’re interested Once this is done, it will take some time before the change happens, but you can check if your records have been updated using this tool: https://www.ultratools.com/whois

THE ISSUES WE FACED

We had a few things come up that made us a little nervous, but we at CWS never panic cause we are pros! Let us go over the main ones.

Issue 1 – Https not working

We first had an issue with accessing the https version of the site. It was simply a matter of enabling it in the dashboard. You would need to go to Edit Virtual Server –> Enabled Features page and select Apache SSL website enabled. After making that change, request a free Let’s Encrypt certificate from theServer Configuration –> SSL Certificate  page. Here is documentation from the Virtualmin site for more on getting this done: https://www.virtualmin.com/documentation/id%2Cssl_and_virtualmin

Issue 2 – Email sending

Usermin is a plugin used for emails and is accessed on https://youripaddress:2000 by default. What we need to do is ensure that in System Settings -> DNS Records, the MX record points to the IP address of your server. We should note that there are two areas involved with email routing:
Postfix is for sending out and receiving mail (SMTP)
Dovecot is for fetching and reading it (POP3, IMAP)

Issue 3 – Backend goes to the wp-install page

What this meant is that there was no connection to our database so WordPress thought this was a new site that needed a database. This happened because there was an issue is with the versions of MySQL being different. The database version that was exported came from a higher MySQL version so collation was different. This was fixed by changing the collation from utf8mb4 to utf8 on the database and re-uploading the file.

If you would like us to assist in moving your servers from cPanel, feel free to ping us with a message and let us know what you need done.

GET HELP

blank

FROM FIREFOX TO BRAVE

Something we should quickly point out is that we preferred Firefox to the Chrome Browser. We have nothing against Chrome and even prefer its extensions to the add-ons in Firefox, but we enjoyed the modern sleek look that Firefox interface provided over Chrome.

With the release of version 76, Firefox wanted to strengthen protection for your online account logins. That’s nice, but we were surprised that after updating the browser, all our bookmarks were gone. In order to gain them back, we had to be synced to multiple devices requiring a password login.

We followed the instructions to login to another device and still no bookmarks were there. It is quite possible that we needed one more step to gain the bookmarks back, but we decided to look for other options out there and boy did we find a good one.

The Brave Browser

We came across the brave after googling best browsers and of course Firefox was number one and the Brave came in at 8 (Internet Friggin Explorer came in at 6?) So what are the main things that make this browser stand out from the other ones out there?

SPEED

When testing browsers via sunpider, According to venturebeat.com, Brave and Chrome were about the same in terms of speed while Firefox was the slowest(The edge browser was also included). This is not a huge deal as we are still loading sites pretty fast, but It is worth mentioning.

BUILT-IN PRIVACY

If you think you were safe browsing incognito mode, think again. Your history isn’t saved because no cookies are stored, but (and this is a big but) your operating system, router, or the websites themselves are still logging your IP address. So basically, there is still a record of where you visited that can be traced.

TOR

New Tab with Brave

Tor, which stands for The Onion Router, is a networking protocol built to fight traffic analysis by advertisers and even law enforcement.
Tor hides your IP address from the sites you visit by routing your browsing through several Tor servers before it reaches the destination. These connections are encrypted, so your ISP or employer can’t see which sites you’re visiting either.

AD BLOCKING BEAST

We at Critical Web Solutions have never used ads in our site, but felt the need to demonstrate the Brave browser power by adding one to this post. If you have the Brave browser installed, you won’t see the ad we have for WP Engine on the right. Side Note: We really do recommend WP Engine, click here to go straight to their discount page. If you dont have the Brave browser installed, click below to install it right now!

GET BRAVE

blank

Introducing WebFlow

Building a website is easy using a site builder. Anyone can throw something together using Wix, Squarespace, or any site-building software. Building a good site that is mobile responsive, allows updating data and accepting emails is another thing. There is a good amount of work that goes on to have sites working properly & we are experts at this. The design of a site is work that we often pass to a designer to assist with. We would like to show you how you can design your own site yourself, for free!

Webflow is the site builder that allows you to start from scratch when building a website. They also provide nice looking templates that you can start with. They even have a university (<- link here) that helps you learn a bunch of things about websites. You have the option to sign up for free or with one of their paid account plans.

Webflow Example

With a paid account plan, you’re able to export your project’s HTML and assets from inside the Webflow Designer. But with our help, you won’t need to export code because we will do that coding work for you! Our client sites all run on the WordPress CMS, which we think is the best. Whether you want to create a new WordPress website or remodel a new one, there is no job that is too big for us. While this tool does not replace the expertise of a designer, it will work for a lot of people.

Go ahead and create an account for free and mess around with some designs!