Wordpress

After spending two weeks working out how to get a basic wordpress website set up for local development and deployment, I’m going to share the few simple steps which are actually needed to get going. Once you can get one wordpress working how you want, you can certainly get any number of them to run. First up, ensure you have the following services installed:

1. Apache2
2. php5.6
3. MySQL2

Now, you can download wordpress and get it set up in the correct location.

Download latest .gzip WP release from github.com

https://github.com/WordPress/WordPress/releases

In the commnad line, move that file from downloads to working dir

$ mv ~/Downloads/WordPress-3.7.11.tar.gz ./

Extract the zip file

$ tar -xzf WordPress-3.7.11.tar.gz

Remove the original zipped file that is no longer required

$ rm WordPress-3.7.11.tar.gz

Rename the folder to your site/ projects name

$ mv WordPress-3.7.11 testsite.com

Change dir into your directory and check that all the correct files are in the correct place

$ cd testsite.com/

$ ls

You can see that you now have a wordpress on your local machine. Time to create a database, configure the wordpress and host files before committing the first instance to git.

You’ll need to create a MySQL db for this project.

Log into MySQL from the command line, you’ll have to enter your password

$ mysql -u selenasmall -p

Have a look to see what databases are available in your MySQL

$ show databases;

Create a new database for your new wp site

$ create database testsitecom;

Next, you can configure your WordPress

Open your project in sublime text2, or your preferred text editor and edit the wp-config-sample.php file

Change the file name to wp-config.php

Update the file contents to have the same credentials you just configured in your new mySQL database.

And finally, configure your host file

From the command line, navigate to your user’s Sites dir

$ cd ~/Sites/

Using nano as the text editor, the following command will allow changes to the virtual host config file

$ sudo nano ./httpd-vhosts.conf

Once inside the file, you can update the configuration, add new ports and configure each site to listen on different ports so they can all run at the same time. Here is an example of how the httpd-vhosts.conf file should look in the text editor. This example, has only 1 port configured - localhost:8080

To add extra ports for other developments, simply repeat line 5 with another port options ie:

And configure a second virtual host using that new port ie:

Now that all necessary services are present and configured, it’s time to restart the server and check out the new development wordpress site.

Restart the Apache2 server from command line

$ httpd -k restart

In your web browser, navigate to the port you have specified above (8080) and you will see your new site

Before you go ahead and make any changes or try to develop a new theme, this is probably a good time to commit your working project to git. There are a few different git hosts you can use, which have different benefits. Github is a great tool, in particular for open source projects but unfortunately, doesn’t offer free private repositories. If you’re developing something private, I would recommend trying out bitbucket which works in a very similar way to github but allows for unlimited free private repos for small teams or individuals.

You can sign up for your free account at https://bitbucket.org/

Simply follow the instructions to commit your new project. Remember, if you planning to actually deploy this site, you don’t want to commit the config file because it is probably going to be different on your live sites server. You might also want to omit the log files which can be costly on space.

*Refs

https://echo.co/blog/os-x-1010-yosemite-local-development-environment-apache-php-and-mysql-homebrew

*Useful Error Reference

http://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/

After setting up your local development environment for wordpress, get started building your own custom theme. Then you can choose exactly what is actually needed for your site and make your own theme a lot easier to read and customise in the future than many of the themes already existing.

• Create a new folder under themes in your local development

• After planning out how the site is going to look, keeping in mind that I want this to be fully responsive and correlate well both on desktop and mobile. It’s time to get building

• In the new theme directory, the following files will be required to get going:

1. header.php
2. index.php
3. footer.php
4. style.css

• These files will make up the basis of your site. In the header file, you will specify some simple html code that will allow you to style the text in your header and include a line to call the style.css file which will take care of the sties styling

• In the index file, you will get the header file and use an internal wordpress function to allow us to code it in the main page

• In the footer file, you will code the footer for your theme, including the closing tags for the initial div, body and html that were specified in the header file

• Lastly, the style.css file. Like the css file for any app or website, this specifies styling for all elements to be displayed in the site. Here is some very basic css styling

• If you take a look under appearance/themes in your local development, you can see your new theme

• You can select a live preview to see the bones of the theme you have just created

Now you’re good to go ahead and start modifying and building your theme

*Refs

https://www.siteground.com/tutorials/wordpress/wordpress_create_theme.htm

https://codex.wordpress.org/Theme_Development

After 4 hours of pissing into the wind sifting through crap online, turns out common sense prevailed and most of those resources weren’t actually of any help.

Follow the really easy step by step instruction set to install MAMP and get a new wordpress up and running locally on your mac os

https://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP

This will require you to download the latest version of WordPress as well

https://wordpress.org/download/

Already have a WordPress blog or site running live on line?

I’m sure you could export the whole site locally but in my case, I wasted enough time trying to find out how to do that and could have just spent that time redesigning the layout which is what I wanted to do anyway.

First, find the export module on your live site to copy all the data

Live Site:

1. my sites
2. tools
3. export
4. check box “all content”
5. download export file

This will download an xml file to your computer containing all information related to posts, pages, comments etc

Go to the site you have set up on your local machine (localhost:8888/mysite)

1. my sites
2. tools
3. Import and upload the file you have just exported

Once the import is complete, you will receive a message telling you to have fun.

You now have all of the content but none of the design, running locally. Do what you like! You could just import the theme you have running on the live version.

Note: If any wants to tell me in plain English how to copy an entire wp site to my local, feel free!! 😀