Ex05: Installing WordPress, Choosing and Customizing a Theme

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.

WordPress Setup — Choose a language.

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.)

WordPress Setup — Site Info

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. Visit your site to see your new content. Select different themes (Appearance>Themes) and notice the changes to the design.

Part 2: Choosing and Customizing a Theme

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.

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.)