Part 1: Configure Your WordPress Site

1. Login to your Pantheon Account dashboard. Click on Sites to see your admin panel.

Click on the sandbox, and then in the upper left click on Site Admin to be brought to the WordPress setup screen.

2. Choose a language, then enter a Site Title, Username and Password for your WordPress site. Please remember your password. (It can be the same as your Pantheon password entered earlier, or a different one.)

3. Complete site installation and visit the site to see the “Sample Page” and a “Hello World” post. Make note of your site URL as it appears in your browser address bar.

4. In Settings>General, review your Site Title , Tagline and your email address (for admin purposes.)

• Note the box for Membership: Anyone can register. DO NOT check this box.
• Set the Time Zone for New York
• Save Changes

5. In Settings>Reading, you can choose to have the landing page show your latest posts or a static page. For now, choose Static Page: Sample Page.

• Save Changes

6. In Settings:Discussion, you can choose to allow visitors to leave comments on posts and pages.

• Check: “Comment must be manually approved.”

7. In Settings:Permalinks, you can choose how the URL for each page will appear. Choose “Post Name”.

8. Create a New Page. Type “Home” in the Title block. Add some additional block types for content, including subheads, paragraphs and lists. Note the URL (permalink) assigned to the page contains the Title you entered. Publish the page.

9. Create a New Page. Title it “Contact”

10. Create a New Page. Title it “Work”

11. Create a New Page. Title it “Design”.

• Under page attributes, make Design a child of Parent: Work.

12. Create a new page, Blog, and in Settings>Reading set it as your Posts Page. 

• Change the landing page to Static Page: Home.

13. Create a New Post. Title it “Welcome to My Blog” or something equally exciting.

• Embed a YouTube video by pasting the URL of the video of your choice into a WordPress block.
• Add links to your blog post.
• Add a list.
• Assign relevant Categories and Tags to help visitors find your content.
• Publish the Post.

14. Appearance>Themes>Edit. Click on “Navigation” and rearrange the order of the pages in the nav menu. Make sure Design is indented under Work. Optionally, adjust other styles within the Theme editor.

15. Some themes allow for adding your own CSS rules from within the dashboard. Look for Appearance>Customize and “Additional CSS”.

• Many modern themes support the ability to add customizations. They may also support adding “Additional CSS” which allows you to override an existing CSS rule or create new rules with can be assigned to content blocks.
• If you use “Additional CSS” be sure to copy and back-up your new rules, in case you have to reinstall the theme.

16. Visit your site to see your new content. Select different themes (Appearance>Themes) and notice the changes to the design.

Part 2: Install a Theme and Create a Child Theme

If you have chosen an older theme that does not support extensive customizations from within the dashboard, you can create a Child Theme from it. Child Themes allow you to make small visual changes to an existing (parent) theme while maintaining the original theme’s functionality. As explained at codex.wordpress.org, a Child Theme “inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme.” You can alter the visual appearance using modified CSS rules and even create alternative template pages, without modifying the parent theme files. Any new style or page in the Child overrides that functionality in the Parent.

Reasons for using a child theme:

• If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
• It can speed up development time.

Instructions

1.  In Appearance>Themes, choose Add Theme and search for Philips
2. Activate the new Philips theme. View the site and observe the theme’s features.
3. Create a folder in wp-content/themes to hold your child theme. It should be named with the parent name and the -child suffix. In our case, name your child theme folder philips-child.
4. In the child theme folder, create a file called style.css.( This is the only file required to make a child theme.) Edit the file in Atom. The style sheet must begin with this code. (The only required lines are the Theme Name, and the Template.)
   

   /*
    Theme Name: Philips Child
    Description: Philips Child Theme
    Template: philips
    */
    @import url("../philips/style.css");
    /* Theme customization starts here --------------------------- */

5. Activate the Template-Child theme.
6. Add styles to the child theme which will override the parent styles:
   

   body { 
      background-color: #d5d7ff;
      text-align: left;
      font-size: 12px;   /* Sets base value at 1em = 12px */
      font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
    }

7. Modify template files. Any file in the parent can be overridden by a file in the child with the same name. For example, to modify the header, drag and drop a copy of header.php from the parent to the child folder. Open the child folder copy in Atom. Add the following code to line 35 before the closing div tag:
   

   <img src="https://pbs.twimg.com/profile_images/504388449252933632/B1H2eo72_400x400.jpeg" height="100px" width="100px" alt="ubART 320 Logo">

   Copy the modified header.php file to the philips-child folder. Observe that the header has changed on each page of your site.

Part 3: Add and Activate Plugins

Plugins

Plug-ins add a wide-variety of functionality to your WordPress site.

Ensure that the plugins you choose to install are used by a great number of users and have been updated recently.

1. From your WordPress dashboard, go to Plugins and click “Add New“.
2. Search for “NextGEN Gallery“. Ensure that your found result in by developer “Imagery”. Click “Install Now“, then Activate.
3. Search for “Contact Form 7” by Takayuki Miyoshi. Install and Activate.
4. Optionally, view the NextGEN Gallery intro video.
5. Download these four sample images (or quickly find your own.)
6. To create a gallery with the four images, and place it on your Work page:
   • From your dashboard, go to Media>Library and drag-and-drop your image files into the library. Review how to add metate date to each image.
   • From your dashboard, go to NextGEN Gallery>Add Gallery/Images.
   • Click to “Import From Media Library”. Type in a Gallery Title, then click Select Images. Command-click (Mac) to select multiple images from your Media Library. Hit the Select Button and the bottom-right.
   • Click the button to “Import Images”.
   • Edit your Work page. Click to add a new block and search for NextGEN. Add the block, and choose your new gallery from the list. Save and view your page.
7. In the Dashboard, click Contact, and click to Edit the supplied “Contact form 1”. Review Form, Mail and Messages settings. (Note that the form appears not to work under Pantheon in Sandbox mode.)
8. Edit your Contact page. Click to add a new block and search for “Contact Form”. Add the block, and choose Contact Form 1 from the list. Save and view your page.

Alternative Image Gallery Plugins:

• Modula: Nice mosaic-grid layout function
• Simple Lightbox (for the image enlargement effect without having to create galleries.)