How to Create a WordPress Website with the Sydney Theme

Step 1: Get Domain and Hosting

Guidelines for choosing a great domain name for your website and brand

  1. Make it easy to remember for your customers (oxfordseedcompany.com is best than oxseedco.com)
  2. Shorter is better
  3. Always use dot com

How to register and domain and set up your web hosting

  1. Click on this link to get the best deal on Hostgator hosting. (It’s an affiliate link. It costs you nothing extra but I get a small commission which helps me bring you these free tutorials. Thanks in advance!)
  2. Click on the Get Started Now button
  3. Click on the Sign Up Now button under plan you want (recommended: Baby Plan)
  4. Under Choose a Domain, enter the domain name you wish to register
  5. Under Choose a Hosting Plan, select your package type (recommended: Baby)
  6. Select your Billing Cycle. Month to month is the lowest commitment, but if you want to save more, chose to pay for a longer period of time.
  7. Enter a username of your choosing
  8. Enter in a security PIN
  9. Under Enter Your Billing Info, enter your billing information
  10. Under Add Additional Services, uncheck all the additional services. You don’t need them and it will save you a bundle.
  11. Under Enter a Coupon Code, enter the coupon code ezwebsitesetup. This will give you your first month of web hosting with Hostgator for ONE PENNY!
  12. Check the box at the bottom of the page next to “I have read and agree to the Terms of Service, Cancellation Policy, and Privacy Policy.”
  13. Click on Checkout Now! at the bottom of the page.

Step 2: Log Into Cpanel

  1. Check your email inbox for an email like this from hostgator.com
  2. hosgator-registration-email
  3. Click on the link next to Your Control Panel and use the username and password below that link to sign into your Hostgator cPanel.

Step 3: Install WordPress

  1. Under the Software and Services section of cPanel (toward the bottom), click on the QuickInstall icon
  2. Under Popular Installs on the left hand side, click WordPress.
  3. Under Install WordPress, select the domain you want to install from the dropdown (for most cases you will leave the install/path/here box blank)
  4. Under Admin Email, enter your email address
  5. Under Blog Title, enter the name of your website
  6. Under Admin User, enter a username for your website
  7. Under First Name, enter your first name
  8. Under Last Name, enter your last name
  9. Click on Install WordPress
  10. Record your username and password from the View Credentials drop down at the top of the QuickInstall page.

Step 4: Log Into Your WordPress Website

  1. Type your website name followed by forward slash wp-admin (e.g., http://sandboxwp.com/wp-login)
  2. Enter your username and password and click Log In

Step 5: Download and Install Theme

  1. From the WordPress Dashboard, hover over Appearance and click on Themes
  2. Click on Add New at the top of the page
  3. Type Sydney in the Search themes box on the right hand side and press Enter
  4. Click on Install in the Sydney theme
  5. Click Activate

Step 6: Deactivate and delete unwanted plugins

Step 7: Install Necessary Plugins

Install suggested plugins

  1. Click on the link Begin installing plugins at the top of the page
  2. Check the box next to Plugin under Install Required Plugins
  3. Select Install from the Bulk Actions drop down directly above
  4. Click Apply
  5. Click on Return to Required Plugins Installer link
  6. Check the box next to Plugin under Install Required Plugins
  7. Select Activate from the Bulk Actions drop down directly above
  8. Click Apply

Install other plugins

  1. Hover over Plugins on left side and click on Add New
  2. Type name of plugin into the Search Plugins box on the right
  3. Click on Install Now in the plugin you want to install
  4. Click on Activate to activate the plugin
  5. Repeat steps 1-4 for the plugins below:
    1. Black Studio TinyMCE Widget
    2. Child Theme Configurator
    3. Contact Form 7
    4. Recent Posts Widget Extended
    5. SiteOrigin Widgets Bundle

Step 8: Create Child Theme

Step 9: Upload demo content

  1. Download the demo images
  2. Extract the files from the ZIP file
  3. Hover over Media and click Add New
  4. Select all images in the folder

Step 10: Create Homepage and Blog Page

Homepage

  1. From the WordPress Dashboard, hover over Pages in the menu and select Add New
  2. Enter Homepage as the title
  3. Under Page Attributes on the left side select Front Page as the template
  4. Click Publish

Blog

  1. From the WordPress Dashboard, hover over Pages in the menu and select Add New
  2. Enter Blog as the title
  3. Click Publish

Step 11: Set Home and Blog Pages

  1. From the WordPress Dashboard, hover over Appearance in the menu and select Customize
  2. Click on Static Front Page
  3. Under Front Page select Home from the drop down
  4. Under Posts Page select Blog from the drop down
  5. Click Save & Publish at the top

Step 12: Change Slider Settings & Images

Change Slider Settings

  1. Under the Customize menu click on Header area
  2. Click Header type
  3. Under Front page header type select Full screen slider
  4. Under Site header type select No header (only menu)
  5. Return to the Customize menu and click on Header Slider

Change Slider Images

  1. Under the Customize menu click on Header area
  2. Click Header slider
  3. Under the slide you want to change click Change image
  4. Modify the Title and Subtitle under the slide as desired

Step 13: Change Theme Option Settings

    1. Change the fonts
      1. Under the Customize menu click on Fonts
      2. Change the Body font size to 16
    2. Change the color
      1. Under the Customize menu click on Colors
      2. Change the Primary color to #ef0303
      3. Change the Menu background color to #ef0303 as well
    3. Blog options
      1. change to masonry grid
      2. Change the excerpt length to 20

Step 14: Create Logo and Favicon

    1. Create your logo
      1. Go to http://logomakr.com
      2. Click on the x in the upper right corner to close the tutorial
      3. Click Next, Next and Done
      4. Type for your search term in the Search Graphics box (e.g., camera)
      5. Change the logo to white
      6. Click on the disk icon in the upper right to save logo (name logo.png)
    2. Create your favicon
      1. Change the color of your image to black (#000000)
      2. Click on disk icon to save image (name favicon.png)
    3. Upload the logo to your website
      1. Under the Customize menu click on Site title/tagline/logo
      2. Under Upload your logo click on Select Image
      3. Select the image from the Media Library or upload another image by clicking on the Upload Files tab
      4. Click Save & Publish
    4. Upload the favicon (site icon)
      1. Under Site Icon click on Select Image
      2. Select the image from the Media Library or upload another image by clicking on the Upload Files tab
      3. Click Save & Publish

Step 15: Create Services Section

    1. Create Services
      1. Click Add New Service under Services
      2. Enter title of service (e.g., Photography)
      3. Enter text description for service
      4. Scroll down to the Service info section. Click “here” in “Example: fa-android. Full list of icons is here. (New page (“Cheatsheet”) will open in separate browser tab.)
      5. Copy shortcode for service icon from list on the Cheatsheet. (Example: fa-camera-retro, fa-codepen, fa-desktop)
      6. Paste shortcode into Service info box in website tab.
      7. Create a new category under the Categories section on the right side of the page by clicking on the Add New Category link and adding the name of the new category into the box. Example: “Group A” (This step is only required for the first service in this group.)
      8. Select the new category you just created. Uncheck “Uncategorized” if necessary.
      9. Click Publish on the right side of the screen.
      10. Repeat steps A-J for additional services. You can skip step G for the additional services in this group. Make sure you select the same category for the additional services. All services in this group should have the same category.
    2. Add widget for services on the Home page
      1. From the WordPress Dashboard, click on Pages
      2. Click on the title of your Home Page
      3. From the Page Builder tab on the right click on Add Row
      4. Change the Set row layout setting to 1
      5. Click Insert
    3. Customize row
      1. Hover over the wrench and click Edit Row
      2. Under Row Styles click Theme
      3. Under Bottom Border Color change the setting to #e0e0e0
      4. Click Done
      5. Under Row Layout select Full Width from the drop down
      6. Click Update
    4. Add Sydney FP: Services Type A Widget
      1. Click on Add Widget
      2. Select the Sydney FP: Services Type A widget
      3. Click on Edit within the widget
      4. Enter the title for the services (e.g., Our Services)
      5. Under “Enter the slug….” enter the category for the services (e.g.,“type-a”)
      6. Click Done
      7. Click Update

Step 16: Create Info Call to Action Section

      1. Click Add Row
      2. Change number of rows to 1
      3. Click Insert
    1. Customize row
      1. Hover over the wrench and click Edit Row
      2. Under Row Styles click Theme
      3. Under Background Color change the setting to #252525
      4. In the Top/bottom padding box enter 50
      5. Under Background Image click Select Image (or upload new by clicking on Upload Files tab at top
      6. Click Done
      7. Under Row Layout select Full Width from the drop down
      8. Click Save
    2. Add a Row for CTA
      1. Click Add Widget
      2. Select the Layout Bilder widget
      3. Click on Edit within the Layout Bilder
      4. Click Add Row within the Layout Bilder
      5. Set row layout to 1
      6. Click Insert
      7. Click Add Widget from within the Layout Builder
      8. Select the Text Widget
      9. Click Edit within the Text Widget
      10. Enter the title within the Title box (e.g., Discover Who We Are)
      11. Click Done
    3. Configure Title Row within Layout Builder
      1. Hover over the wrench of the Text widget
      2. Click on Theme on the right side
      3. Under Top/bottom padding enter 0
      4. Click Select Color and change it to #ef0303
      5. Click Done
    4. Create second row of CTA
      1. Click Add Row
      2. Change number of rows to 2
      3. Click Insert
      4. Click Add Widget
      5. Select Sydney FP: Call to action widget
      6. Click Done
      7. On the Sydney FP: Call to action widget click Duplicate
      8. Drag one of the widgets to the other side
    5. Configure left side CTA widget
      1. Click Edit within the widget
      2. Leave title blank
      3. Add text to Enter your call to action box
      4. Add link URL in the Link for the button box  (e.g., http://ezwebsitesetup.com/meet-the-team)
      5. Enter the title for the button in the Title for the button box
      6. Enter the URL (Web address) of where you want to link to
    6. Add CSS for left CTA button
      1. Click on the Attributes tab under Widget Styles on the left
      2. In the CSS Styles box, enter the text background-color: rgba(0,0,0,0.3);
      3. Click Done
    7. Configure right side CTA widget
      1. Click Edit within the widget
      2. Leave title blank
      3. Add text to Enter your call to action box
      4. Add link URL in the Link for the button box
      5. Enter the title for the button in the Title for the button box
    8. Add CSS for right CTA button
      1. Click on the Attributes tab under Widget Styles on the left
      2. In the CSS Styles box, enter the text background-color: rgba(0,0,0,0.3);
    9. Modify padding for CTA row
      1. Hover over the wrench above the CTA row
      2. Click Edit Row
      3. Enter 0 for the Top/bottom padding
      4. Click Done, Done and Update

Step 17: Create Employees Section

    1. Create the employees
      1. Hover over Employees in the Dashboard and click Add New Employee
      2. Enter the name of the employee in the box Enter title here
      3. Click  Set featured image at the bottom right
      4. Select an image of the employee from the Media Library or upload an image from the Upload Files tab
      5. Click Set featured image
      6. Under Categories click Add New Category
      7. Enter a unique category name (e.g., emp1). Each employee should have a unique category.
      8. Click Enter and assure that the category that you just created is selected.
      9. Click Publish
      10. Repeat steps 1-8 for two additional employees
    2. Add Row in Page Builder
      1. From the Home page (Dashboard->Pages) click Add Row
      2. Change number of rows to 1
      3. Click Insert
      4. Drag the newly created row to the bottom on the page
    3. Configure Row
      1. Hover over the wrench and select Edit Row
      2. Click on Theme on the right side
      3. Under Top/bottom padding enter 40
      4. Click Done
    4. Add Visual Editor Widget
      1. Click Add Widget
      2. Select the Visual Editor widget
      3. Click Edit from within the Visual Editor widget
      4. Enter a title (e.g., Meet Our Team)
      5. Click Done
    5. Add Sydney FP: Employees Widget
      1. Click Add Widget
      2. Select the Sydney FP: Employees widget
      3. Click Edit from within the widget
      4. Change the Number of employees to show to 3
      5. In the box Enter the slug for your category or leave empty to show all employees enter the categories of your employees separated by a comma (e.g., emp1, emp2, emp3)
      6. Click Done
      7. On the Home page click Update

Step 18: Create Facts Section

      1. Click Add Row
      2. Change number of rows to 1
      3. Change Background color (under Design) to #ef0303
      4. Change Color to #fff
      5. Change Top/Bottom Padding (under Layout) to 50
      6. Change Row Layout to Full Width
      7. Click Insert
      8. Click Add Widget
      9. Select the Sydney FP: Facts widget
      10. Click Edit from within the widget
      11. Fill in the fact name and value for each of the facts
      12. Enter an icon code for each of the facts. (The icon shortcodes may be found by clicking the link at the top of the page.)
      13. When finished, click Done
      14. Click Update on the Home page

Step 19: Create Testimomials Section

    1. Create Testimonials
      1. Hover over Testimonials in the Dashboard and click Add New Testimonial
      2. Enter the name of the person giving the testimonial in the box Enter title here
      3. Enter the text of the testimonial
      4. Enter the client function or company name
      5. Click on Add New Category
      6. Enter the name of a unique category for the testimonial (e.g., t-one)
      7. Press Enter
      8. Click Publish
      9. Repeat steps 1-8 as needed for additional testimonials

 

    1. Create Testimonial Section
      1. Click Add Row
      2. Change number of rows to 1
      3. Click Insert
      4. Change Row Layout (under Layout) to Full Width
      5. Change the Color (under Background Image) to #fff
      6. Click Select Image
      7. Select an image from your Media Library or import an image from the  Upload Files tab
      8. Click Add Widget
      9. Select the Sydney FP: Testimonials widget
      10. Click Edit from within the widget
      11. Enter the categories of the testimonials you created in the box starting with Enter the slug…
      12. Click Done
      13. Click Update on the Home page

Step 20: Change the Permalinks

Step 21: Create Latest News (Blog) Section

    1. Create Blog Posts
      1. Hover over Posts in the Dashboard and click Add New
      2. Enter the title of your post
      3. Enter the text of your post
      4. Click on Set featured image
      5. Choose the post category or create a new category as desired
      6. Click Publish
      7. Repeat steps 1-6 as needed for addition bl;og posts
    2. Create Blog Post Section on Home Page
      1. From the Home page, click Add Row
      2. Change number of rows to 1
      3. Click Insert
      4. Click Add Widget
      5. Select the Sydney FP: Latest News widget
      6. Click Edit from within the widget
      7. Enter text for title (“Latest News”)
      8. Click Done
      9. Click Update

Step 22: Create Contact Call to Action

      1. From the Home page, click Add Row
      2. Change number of rows to 1
      3. Click Insert
      4. Drag new row to bottom if necessary
      5. Click Add Widget
      6. Select the Sydney FP: Call to action widget
      7. Add text to Enter your call to action box
      8. Add link URL in the Link for the button box
      9. Enter the title for the button in the Title for the button box (“Contact Us”)
      10. Check the box next to Display the button inline with the text?
      11. Under Design click Select Color for Headings color
      12. Click Clear
      13. Click Done
      14. Hover over the wrench and click Edit Row
      15. Under Row Styles click Theme
      16. In the Top/bottom padding box enter 30
      17. Under Background Color enter the color (#252525)
      18. Click Save
      19. Click Update

Step 23: Create Social Media Widget Section

    1. Enable SiteOrigin Widgets
      1. Hover over Plugins
      2. Click on SiteOrigin Widgets
      3. Turn on the SiteOrigins Social Media Buttons widget
    2. Create row for social media widgets section
      1. From the Home page, click Add Row
      2. Change number of rows to 1
      3. Click Insert
      4. Drag new row to bottom if necessary
      5. Hover over the wrench for the row and click Edit Row
      6. Under Layout change Top/bottom padding to 10
      7. Change Row Layout to Full Width
      8. Under Design change the Backgroud color to #1c1c1c
      9. Click Done
      10. Click Add Widget
      11. Select the SiteOrigins Social Media Buttons widget
      12. From within the widget click the Edit link
      13. Click on Add under the Networks section
      14. Click on Select network
      15. Select network
      16. Enter URL text for the URL
      17. Change the Background color to #252525
      18. Repeat steps 8-12 for additional networks as desired
      19. Under Design and Layout change the Button theme to Flat
      20. Change Padding to Low
      21. Change Align to Center
      22. Click Done
      23. Click Update on the Home page

Step 24: Create About Page

      1. Hover over Pages in the Dashboard and click Add New
      2. Change the page Template to Front Page
      3. Click on Add Row in Page Builder
      4. Hover over the wrench and select Edit Row
      5. Click on Theme on the right side
      6. Under Top/bottom padding enter 40
      7. Under Row Layout select Full Width
      8. Click Done
      9. Click Add Widget
      10. Select the Visual Editor widget
      11. Click Edit from within the Visual Editor widget
      12. Enter About Us as the title
      13. Add some text
      14. Click Add Media
      15. Select an existing image or import a new image from the Upload Files tab
      16. Click Insert into page
      17. From Youtube.com select a video
      18. Click on the Share link under the video
      19. Copy the Embed URL underneath the video (e.g, https://youtu.be/9xJla_WJ4s4)
      20. Click on the Text tab in visual editor
      21. Paste the URL at the bottom for the box
      22. Click Done
      23. Click Update

Step 25: Create Employees Page

      1. Hover over Pages in the Dashboard and click Add New
      2. Enter in the title of the page (e.g., Employees)
      3. Change Template to Front Page
      4. Click on Add Row in Page Builder
      5. Hover over the wrench and select Edit Row
      6. Click on Theme on the right side
      7. Under Top/bottom padding enter 40
      8. Under Row Layout select Full Width
      9. Click Done
      10. Click Add Widget
      11. Select the Sydney FP: Employees widget
      12. Click on Edit from within the widget
      13. Enter Employees as the title
      14. Click Done
      15. Click Update from within the Employees page

Step 26: Create Projects (Portfolio) Page

    1. Create Projects
      1. Hover over Projects in the Dashboard and click Add New
      2. Enter in the title of the project
      3. Click on Set featured image
      4. Create or select a Category
      5. Click Publish
      6. Repeat steps 1-6 for additional projects
    2. Create Projects (Portfolio) Page
      1. Hover over Pages in the Dashboard and click Add New
      2. Enter in the title of the page (e.g., Portfolio)
      3. Change Template to Front Page
      4. Click on Add Row in Page Builder
      5. Hover over the wrench and select Edit Row
      6. Click on Theme on the right side
      7. Under Row Layout select Full Width
      8. Click Done
      9. Click Add Widget
      10. Select the Sydney FP: Portfolio widget
      11. Click on Edit from within the widget
      12. Enter “Our Work” as the title
      13. Enter the category slugs separated by a comma
      14. Click Done
      15. Click Update from within the Portfolio page
    3. Create Contact Call to Action (See Step 22, above)

Step 27: Create Contact Us Page

    1. Create Contact Form
      1. Hover over Contact in the Dashboard and click Contact Forms
      2. Click on Contact form 1
      3. Click on the Mail tab
      4. Enter your email address next to To
      5. Click Save
    2. Create the Contact Us page
      1. Hover over Pages in the Dashboard and click Add New
      2. Enter in the title of the page (e.g., Contact Us)
      3. Change Template to Front Page
    3. Add Page Title Row
      1. Click on Add Row in Page Builder
      2. Hover over the wrench and select Edit Row
      3. Click on Theme on the right side
      4. Under Top/bottom padding enter 40
      5. Under Row Layout select Full Width
      6. Click Done
    4. Add Contact Information and Contact Form Section Row
      1. Click Add Widget
      2. Select the Visual Editor widget
      3. Click Edit from within the Visual Editor widget
      4. Enter “Contact Us” as the title
      5. Click Done
      6. Click on Add Row in Page Builder
      7. Hover over the wrench and select Edit Row
      8. Set the row layout to 2
      9. Change the 50% to 70% on the left
      10. Change the 50% to 30% on the right
      11. Click on Theme on the right side
      12. Under Top/bottom padding enter 20
      13. Under Row Layout select Full Width
      14. Click Done
      15. Click Add Widget
      16. Select the Visual Editor widget
      17. Click Duplicate from within the Visual Editor widget
      18. Drag the second Visual Editor widget to the other side
      19. Click Edit from within the Visual Editor widget on the left
      20. Enter or paste contact information into the Visual Editor
      21. From the toolbar click on the line button to add a solid line below your information
      22. Click Done
      23. Click Update from within the Contact Us page
    5. Add Contact Form
      1. Hover over Contact in the Dashboard and click Contact Forms
      2. Click on Contact form 1
      3. Right click and copy the shortcode from within the contact form
      4. Hover over Pages in the Dashboard and click All Pages
      5. Click on  the Contact Us page
      6. From within the Visual Editor on the right, click Edit
      7. Paste the contact form shortcode into the text area
      8. Click Done
      9. Click Update from within the Contact Us page
    6. Add Google Map
      1. Click Add Widget
      2. Select the SiteOrigin Google Maps widget
      3. Click Edit from within the widget
      4. Enter a street address in the Map center box
      5. Enter 250 for the Height
      6. Click on the API key link under the API key box
      7. Click on GET A KEY in the upper right
      8. Create a new project or select from list
      9. Click ENABLE API
      10. Right click and copy the API code
      11. Paste the API code in the API key box of the Site Origin Google Maps widget
      12. Click Done
      13. Click Update from within the Contact Us page
    7. Create Social Media Icons
      1. Click on Add Row in Page Builder
      2. Hover over the wrench and select Edit Row
      3. Click on Theme on the right side
      4. Under Top/bottom padding enter 10
      5. Change Background color to #1c1c1c
      6. Under Row Layout select Full Width
      7. Click Done
      8. Click Add Widget
      9. Select the SiteOrigin Social Media Buttons widget
      10. From within the widget click the Edit link
      11. Click on Add under the Networks section
      12. Click on Select network
      13. Select network
      14. Enter URL text for the URL
      15. Change the Background color to #252525
      16. Repeat steps 8-12 for additional networks as desired
      17. Under Design and Layout change the Button theme to Flat
      18. Change Padding to Low
      19. Click Done
      20. Click Update on the Contact Us page

Step 28: Customize Blog Widgets

Step 29: Make Header Menu

Step 30: Modify Footer

Paste the following into the Theme Footer file:

<div class=”site-info container”>
Copyright &copy; 2016 <a href=”http://www.ezWebsiteSetup.com” target=”_blank”>ezWebsiteSetup.com</a>. Image credits <a href=”https://si.smugmug.com/” target=”_blank”>Simon Tong Photography</a> and <a href=”http://athemes.com/” target=”_blank”>aThemes</a>.
</div>

Paste the following into the Stylesheet file

.site-footer {
text-align: center;
}