HOW TO MOVE YOUR FLYWHEEL WEBSITE TO ANOTHER HOST

HOW TO MOVE YOUR FLYWHEEL WEBSITE TO ANOTHER HOST

After spending a year with Flywheel paying $15/month for hosting I decided it was time for a change.  Just so we are clear I think Flywheel is excellent  and I love their UI as well as the Local By Flywheel tool. However I could not justify the cost of paying for a website that was just sitting there collecting dust.

So in my search to find a new host I decided to hit Twitter and see if anyone had anything noteworthy to say on hosting providers.  Low and behold a few hosting companies I had never heard of before hit me up.  Prior to consulting with  Twitter I had heavily considering SiteGround as my new hosting provider.  The reason I was keen on SiteGround is because that is who we use to host clients for where I work and I wanted to become more comfortable and skilled at working on the hosting side.  However I decided to not go that route.  Instead I  decided to check out the first company that reached out to me on Twitter SetraHost.  I hadn’t heard anything about them so I decided to check out their website and social media pages.  I didn’t find anything incriminating, so I decided to check out their pricing.  It was impressive.

Their premium plan that I ended up pulling the trigger on was $4.16/month for 20 GB SSD storage, unmetered bandwidth, 10 domains hosted, 1 free domain plus the ability to make all the subdomains you want and the traditional cPanel experience.  They would even assist you with a free site migration as well ( not uncommon among hosting providers these days ).   I felt confident in my ability and wanted to do the site migration myself and forgo the free assistance.  I’d never done a site migration before , but I figured I’ve seen it done and what I’m not sure on I can Google.  

 I recommend attempting a site migration yourself when you KNOW you don’t have to worry about email.  If you or a client have been using email within a hosting environment use the free site migration the web host if offers.  They have special tools you don’t have access to.

Migrating your site the old fashioned way from FlyWheel

 

1) Boot up Transmit ( i.e. FTP Client ) and FTP into your FlyWheel directory and start transferring the files to your local environment. 

This involved dragging my site directory into my downloads folder and then going out to dinner and doing various household chores while I waited.

2) Figure out where your database file is then export it to your downloads folder.   

If you have Flywheel go here.

3) Log into your new hosting account and venture into the cPanel to create a database.   

I figured since I was going to be importing a NEW database I should probably click on the MySQL Database Wizard to create one.  For those of you who have major anxiety about making your own database below are some visuals:

4) Heading back to the cPanel with my newly created database I realized that I now have to import the database I downloaded earlier.   So to do that head over to phpMyAdmin.

phpMyAdmin

  1.  Click on the database you just created, because currently all that exists is an empty shell of nothing .
  2.  Look for an import button and click on it.
    phpMyAdmin Menu
  3. Click ‘choose file’, read through the checked options just to make sure you aren’t missing anything and then click ‘GO’.

 The first time I clicked go I had an error but that was only because I had unchecked one of the boxes, so I went through and made sure it was checked and then clicked “GO” again.  Botta bing botta boom my database was imported without a hitch.

Initially I was a little concerned about what I should name my database and whether it needed to match the database file I had downloaded.  In the end it didn’t matter.  Everything went where it needed to go.

5) Now that all the files at this point had finally made it across FTP,  go ahead and compress them and swiftly head back over to the cPanel into the ‘File Manager’.  Once there, upload the files into the root directory or public_html.

6)  Now even though my website files were in the root, the actual WordPress files were not.  They were located in a directory called shansen30 ( your directory will be different ).   So I opened up shansen30, copied all the files and then moved them to public_html.

7)  Now that you have your database imported and site files upload the next step is to connect your database.  To do that you go into the wp-config.php file which will be located in your ‘file manager‘ and look for the following:

define(‘DB_NAME’, ‘what_you_named_your_database‘);

define(‘DB_USER’, ‘your_database_username‘);

define(‘DB_PASSWORD’, ‘your_database_password‘);

Replace ‘what_you_named_your_database’ with your database name;‘your_database_username’ with your database username and finally your ‘your_database_password’ with your database password.  Save the file and exit your file manager.

8)  Now your site should be ready to go.  The very final steps involves heading over to your registrar and changing where the nameservers are pointed.  I use NameCheap.

  1.   Domain List -)  Find the domain name and then click the ‘manage‘ button next to it
  2.   Scroll down to ‘NameServers‘  click the drop down and select ‘Custom DNS
  3.   Add the host provided NameServers and save.

Check out your website,  because you are live baby!

HOW DO I INTEGRATE FONTS INTO WORDPRESS?

HOW DO I INTEGRATE FONTS INTO WORDPRESS?

As WordPress Developers plugins end up spoiling us, even to the point of forgetting how to do the most basic things any Front End Developer needs to know, like setting up fonts.  For the last year or so I’ve been using Easy Google Fonts plugin for all my website font needs.  This worked out great until I started my new job and I was required to import fonts sans Easy Google Fonts.  What is a WordPress developer to do right?  In case you are like me and forgot, here is what you need to know, especially if you are working with Google Fonts and Adobe Photoshop.

Google Fonts

1. Header over to Google Fonts  ( https://fonts.google.com ) and search for your favorite font.  In my case that would be Roboto. Go ahead and click the plus sign.

2.   You will notice a little black tab at the bottom of your browser screen that will probably say,  ‘1 Family Selected‘ .  Go ahead and click the minus sign and a popup will extend.  You should notice two tabs one that says embed the other that says customize.  Go ahead and click the customize tab.  This is where you will select all the different variations of the font you want.

EMBEDDING THE FONT

3. Now that you have selected all your font variations you are going to want to embed them.  You do this by clicking the embed tab and copying the @import as well as the css rules.  These are what you will be applying to your theme template/or stylesheet.  So once copied make sure they are saved to your clip board or text document.

4. Next we will be installing the font.  Head over to your downloads folder and double click the font zip file.   Once you do that it will open up a folder with all the font variation you have chosen.  Double click the font variation you want to install.  ( Make sure you do this for all font variations just so you have them for the future )

INSTALL TO PHOTOSHOP

5.  Then click the ‘‘Install Font” button.  What this does is install’s the font to your computer so Photoshop has access to it.  Now when you pull up your PSD you will be able to pick out the fonts from it because they will have been loaded to Photoshop via your computer.

Enqueue into WordPress or Import into Stylesheet

6.  Where I work we develop a lot of landing pages that include their own individual styles so we add the Google Fonts by importing them directly into the stylesheet itself.

So head over to your stylesheet and paste  the @import you copied earlier to the top of your stylesheet. (  Its also a good idea to paste the css rules commented out.  This way when you use the font in your stylesheet you know the format you should be using. ) 

If you plan on using only one set of fonts throughout your entire theme it’s a far better idea to register them as a style in your functions.php file.

For more information on incorporating fonts checkout the WordPress Codex and the Elegant Themes article I listed below.

 

 

 

 

Multisite: Setting Up A Local Environment

Multisite: Setting Up A Local Environment

When considering a multisite network for your clients you need to ask yourself two questions:

 

1) Who are my clients?  

2) How do they currently use WordPress?  

 

Asking these two questions will help you the developer, designer or agency to

determine whether or not multisite is going to be the ideal solution for your clients.

A major advantage of a multisite network is that you are working with only one

instance of WordPress which means that updates to the WordPress core, themes and

plugins will be managed more easily.  So today I would like to discuss how to set up

multisite locally so you can explore all that multisite has to offer. In this tutorial I will

review the process for creating a local site through MAMP and then jump into setting

up your very own local multisite network.

 

So let’s get started!  

 

SETTING UP MAMP

 

1) Setup MAMP

– Create a directory ( < your-directory > ) for your WordPress installation.
– Make sure MAMP is pointed to the directory you just created
– Created your database in phpMyAdmin
– Make sure the Apache port is switched to 80 and MySQL 3306.

2) Configure the hosts file

 -  Terminal sudo nano /etc/hosts -  Add ‘127.0.0.1  -  Save and exit

3) Edit ‘httpd.conf’

  - Terminal  sudo nano  /Applications/MAMP/conf/apache/httpd.conf

– Look for:

          # Virtual hosts          # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

– Remove the ‘#’ in front of the “Include” and save the file.

4) Adding Virtual Hosts to the VHOSTS file

  - Terminal sudo nano /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
  - Copy and paste into the file:
             <VirtualHost *:80>                              ServerAdmin webmaster@your-directory.dev                    DocumentRoot “/Applications/MAMP/htdocs/"                    ServerName your-directory.dev                    ServerAlias your-directory *.your-directory.dev             </VirtualHost *:80>

At this point you should be seeing the famous five minute install screen which means you are ready 

 for WordPress installation.  You are probably having issues with MAMP and the

port settings.  Follow these steps:

1) Launch MAMP

2) Open MAMP and click on ‘Reset MAMP Ports’ and change them back to the defaults, then click ok.

3) Switch to terminal and type sudo apachectl stop

4) Restart MAMP

5) Open MAMP and set APACHE and MySQL ports to 80 and 3306

6) Switch to terminal and type sudo apachectl restart

7) Switch back to MAMP and you should be good to go.

Not seeing the famous five minute install?

 

If you are still having issues with the MySQL ports, make sure to open your ‘Activity Monitor’

and quit any instances of MySQL. If you are still having issues restart your

computer and follow steps 1 through 7 again.

 

Setting up Multisite…finally

 

I’m assuming you went through the five minute install and are now running a

WordPress installation. If not please do so before continuing.

1) In your text editor open up to the ‘wp-config.php’ file and look for:

 /* That’s all, stop editing! Happy blogging. */

Above that comment you type define(‘WP_ALLOW_MULTISITE’, true);

Save the wp-config.php file and head back to your WordPress admin.

2) Once logged in scroll down to Tools > Network Setup.

After clicking ‘Network Setup‘ you will see the following screen:

 

 

This is where you will create your network. Since we are setting up the multisite network locally

make sure to select ‘Sub-directories’ as the Sub-domains option requires you to have a wildcard DNS

record.  Go ahead and click install

3) You should now see the following image:

Copy and past the first block of code into your wp-config.php.

Next head over to your .htaccess file and replace the rewrite mod rules with the new ones provided

in the ‘Enabling the Network’ screen.  Initially when I did this I ran into an issue with the copy and

paste method so  I deleted the .htaccess
file, created a new one and pasted in the fresh code.

When I attempted the process a second time I
was able to straight copy and paste from the original

file with no issue.  Next, log back into  the WordPress admin.

If you did everything correctly you should see the “My
Sites” with a drop-down and to the right of it

you should see the name of the first network you created.

 

The first time I set up the multisite network it took me quite a bit of time.

The second time I set up
the multisite network it took me about five minutes ( thankfully 🙂 ),

which included creating a virtual
host and installing WordPress. The setup is relatively straight-

forward  after the initial hiccups are 
resolved.

 

Thank you for reading.

mojomarketplace banner lightning talk

bluehost banner lightning talk