Easy Ecommerce with Woo Commerce

About this lesson

You will likely notice that this lesson has a slightly different tone and structure than most of the others. The original version of this lesson was created by Andrew Nolan, a student, in Spring 2018. Andrew did a great job, but since then, I have updated the lesson with a few more details and some changes to keep pace with the latest version of Woo Commerce.

Why Woo Commerce?

Have you ever wanted to build an ecommerce site complete with shopping cart? If you google ecommerce builder and overwhelming number of options will appear. Some ask for money, some may seem kind of sketchy, etc. The good news is that the WordPress ecosystem includes an excellent ecommerce platform named Woo Commerce. Even better, the basic installation of Woo Commerce costs $0.00.

Let’s go through the basic installation of WooCommerce, and get ready to start your online store!

Install a new WordPress site

Revisit the WordPress installation lesson and install a brand new site at yourdomain/commerce.  Login and move to the next step.

Install Woo Commerce

To install Woo Commerce from your dashboard navigate to WordPress Admin > Plugins > Add New, search for “woocommerce”, and click on “Install Now.” Make sure the author is Automattic (yes with two t's). Once it is installed, click “Activate”.

Step 2 – Startup Wizard

Once you have activated the plugin you will immediately be taken to a Setup Wizard. This interface will take you through all the necessary setup procedures for your store before you can configure products.

This is the first screen:

And I have filled it out with some example info:

 

Next we move on to payment options:

Both PayPal and Stripe come integrated by default. I would recommend looking at both and seeing their fee structure and what would benefit you the most when deciding what to actually use.

Here’s a link to compare their fees: Stripe vs PayPal. The main difference is Stripe charges you less fees in most cases, and allows you to have an integrated checkout solution on your site by default. PayPal requires you to subscribe to PayPal Payments Pro for the same features.

Either way, they’ll both be installed and usable on your site. They both allow for a solid solution right out of the gate, but plenty of other options are available for more specific use cases. For this lesson, you don't have to set up an ACTUAL payment system.

 

Next we need to determine our shipping methods:

As you can see there are 3 selections: “Live Rates, Flat Rate, Free Shipping”. There’s also a toggle that tells you that WooCommerce services and Jetpack will be installed automatically. I don’t recommend installing this by default unless you know you will be shipping through USPS. You can take a look at what the plugin offers here, but for the sake of this example I am just using Free shipping. If you select flat rate(and also disable those toggles to install the extra plugins), you will be prompted to enter a default shipping rate.

Again, there are hundreds of shipping plugins out there so you will need to figure out your use case if you are going to be running a store. Do you know how much it costs you to ship every time and you are only doing sales locally? Flat rate could be the easiest option. Other than that, if you know what shipping method you use(UPS, FedEx, etc), there are likely plugins that you could download and install to pull those live rates. This is usually information you would already have before creating the store, so you know what you need.

 

Next you are prompted for “Extras”:

These all look promising if you were going to create an actual ecommerce site that sells real stuff, but we are just practicing. The only thing you NEED to keep for the sake of this lesson is the Storefront Theme.

 

Next you are asked to enable jetpack:

This is once again asking you to connect your store with JetPack. This is one of those use case things that was mentioned earlier, and I would recommend skipping it when installing WooCommerce. The “Skip this step” option is hard to see (deliberately perhaps?), but it's there!

 

Ok now we’re on the last screen!

If you want to get information about WooCommerce via email, you can add your email.

Let’s go ahead and create our first product! Click on that “Create a Product” button

But where do you get products from?

First figure out what you want to sell for this exercise. You may already have something in mind and have actual images. If not, I would recommend that you do a google image search for anything, fish bait, coffee mugs, etc. Make SURE that while you are in the image search that you click on Tools, then Usage Rights, and then select Labeled for Reuse. This way you should never hear any complaints from the owners of those images!

Step 3 – Create a Product

As you can see, if you ever need to add a new product, you can access the interface at Products > Add New

After you complete the setup wizard and click on the add product button, there it will give you this short, guided tour through all the fields. I recommend clicking through that whole interface and reading what each field is. This will allow you to understand what information you need when creating products.

Here is an example dummy product:

 

At this point, you have a basic WooCommerce store. All that’s left to turn this faux store into an actual store is to find an actual product that you want to sell, and set up payments and shipping. Plus you may need boxes, tape, and a few more physical items! Once (if) you decide what payment gateway to use, they are pretty easy to enable and manage through WooCommerce’s interface. I would recommend reading Woo’s documentation if you want more information about how to enable that.

 

Here’s my example store: http://ap.mynmi.net/commerce/shop/

At this point, all you have left to do is customize it to how you want it! Creating a cool looking homepage would be a good start. The possibilities are endless!

 

You now know how to create an online store!

Change templates

Some themes come with more than one template which allows you to, for example, choose whether a given page will have a sidebar or be full width. To illustrate how this feature works, search for, install, and activate a theme named Azul Silver.

  1. Create a new page.
  2. On the right side of the editor, click the arrow beside Page Attributes and  choose the Custom Sidebar Template.
  3. Publish the page.
  4. At this point it may not be obvious that you have a sidebar. To make it more apparent, visit your widgets and drag a widget to the custom sidebar. Now you should have a visible sidebar on your new page.
  5. Visit some of your other pages that (by default) are using the default template and notice that they have no sidebar.
  6. Switch the new page to the default template and notice that its sidebar also disappears.
  7. That's it!

Featured Image

I don't usually begin lessons with quotes, but I don't have a great personal definition for the featured image feature of WordPress. Maybe that's because the featured image is sort of a feeling, according to some prominent sources.

WordPress.com says that a featured image represents the contents, mood, or theme of a post or page.  According to wpbeginner.org, the Featured Image (also known as post thumbnail) is a WordPress theme feature which allows theme developers to add support for using a representative image for posts, pages, or custom post types.

However you define it, it's safe to say that the featured image is a prominent part of many if not most WordPress sites and that themes vary in how they display the featured image. But enough philosophizing. Here's how to set a featured image.

  1. Open a page or post with the editor
  2. Click the Set Featured Image button on the right side of the editor.
  3. Add the image that you want to feature.
  4. Add Alt Text, a Title, Caption and Description to the image (if you want to).
  5. Click the Select button, and you have a featured image. What, you thought there was more to do?

Customizing a Theme with Additional CSS

For this exercise, please select and activate the Twenty Nineteen theme, which should have been installed by default along with WordPress. Once you have activated Twenty Nineteen, click the Customize tab underneath the Appearance tab. You should see the same set of options shown at right. The first four options are not theme-specific and apply to your site regardless of the theme that you choose.

Site Identity allows you to change your site's title, tagline, and icon. We will explore menus and widgets in subsequent lessons. You already changed your Homepage Settings as you will see once you click on this option.

Additional CSS is where you can unleash your inner creative and easily change many aspects of a given theme. Custom CSS is VERY much theme-specific and any CSS that you add or modify for a given theme will not affect any other theme.. If you change to a different theme and later return to the customized theme, all of you custom CSS will still be there.  BTW, if you are curious, as I was, it appears that custom CSS is actually stored in your site's database.

Let's Customize

  1. Click the Additional CSS tab. A window will appear. This is where you add the CSS. You should be looking at the page that you chose for your site's homepage. We will start by changing the CSS for your page's header, whatever you named the page.
  2. My home page is simply named 'Another Page', and I happen to know that Another Page is displayed inside of <h1> tags. Changing the CSS for h1 will NOT actually change anything though, because a class is also applied to the header.
  3. We need to figure out what that class is and, to do so, are going to inspect the heading. To follow these instructions you need to be using a Chrome browser. You can inspect with other browsers but the process is different.
    1. Highlight the heading with your mouse and right-click it. Select inspect from the drop-down menu and code should suddenly appear in another window.

      If things are working properly, you should be able to see that your header is inside of an h1 tag with the class of entry-title.

    2. Return to the Additional CSS window and enter .entry-title{font-size: 300px;}. Your font should explode! Change the font-size to something more reasonable and add background-color: black, as in
      Your text, which was also black, should disappear. Your next job is to add a font color to .entry-title as in:
      color: something;
      Given that we are at UGA, I expect red to be a popular choice.  At this point you own the header and can make it look however you want it to by picking a different font, changing the line height, the text spacing, etc. You could even add a Google, or other, web font, but that would require installing the web font via a plugin before-hand.
    3. If your page does not have a paragraph block, return to the page editor, add a paragraph block now with a bit of text, update the page, and return to the Additional CSS editor.
    4. Now inspect the text and you should discover that it is encased in a div tag with the class shown here
      Add that class to your Additional CSS and modify it as well. Have fun!Keep in mind that all themes are different. With certain themes, simply changing h1, h2 or p tags may have the same impact. It all depends on whether or not the them applies classes or ids to those elements. The main takeaway is that with a little perseverance, you can gain a lot of control over a given theme.

Make an element disappear with display: none

It is quite common for a WordPress theme to come with an element such as weird background image that you simply want to get rid off. The CSS rule display: none; provides a simple solution to this particular problem. The twenty nineteen theme doesn't have anything especially annoying but, for purposes of illustration, let's pretend that we do NOT want our page to display a header with the name of the page.

There are two ways to make our header disappear. Simply add
h1{display: none;}  or  .entry-title{display: none;} . h1{display: none;}  targets ANY h1 tag, while .entry-title only affects tags with this particular class.

Modify elements on a specific page

John Weatherford drew my attention to this page-specific option and it is pretty cool. Imagine that you want to change an element in just ONE page but do not want the changes to be in effect anywhere else?  There is a nice hack for that problem. Whenever you create a new post or page, or for that matter bring in a new image, WordPress automatically creates a specific ID and a specific class for those elements. Let's see how this works.

  1. Create a new page. Add a paragraph block with a sentence of some sort.
  2. Take a look at the URL of your page and you should see the number that WordPress has assigned to your post.
  3. Now publish the page, visit it and view its source. The post number should appear in the code as shown below.
    The unique class or id of a given post or page gives you just the handle you need to change the CSS of that post or page, with no effect on the rest of your WordPress site.
  4. Take note of your post id and return to the Customize, Additional CSS editor. BTW, while you are logged in and on a specific page, one of your options should be to go directly to Customize, which will also allow you to see the effect of changes on that specific page.
  5. Add #post-105{background-color: orange;}
    (but change 105 to the number of YOUR post!)  
  6. Publish your changes and check out your page. The background color of the article that contains your header and paragraph block should be orange. Visit another page. No orange there, right? It worked!
  7. Time to get more specific. Return to the Customize, Additional CSS editor.
    Change #post-105{background-color: orange;} to
    #post-105 .entry-title {background-color: orange;}

    At this point, the header should change to orange, but only on this specific page. Visit another page just to be sure. BTW, you just used what is known as a descendant combinator to add more specificity and target .entry-title on a specific page. I added the link just in case you want to learn more about descendant combinators.

Adding pages and using the block editor

At this point you have two pages that you created earlier named home and blog.  We will leave those pages alone for now and create a brand new one about you.

  1. Click on the "Add New" button that pops up when you mouse over Pages.  As you can see, the page editor looks pretty much identical to the post editor. We are going to explore that editor in this lesson and everything you learn will also apply for editing posts.   Go ahead and title this page "About Me".
  2. Now it is time to add content. By default, WordPress uses a system called 'Block Editing' which you can think of as adding 'chunks' of content. As the screen capture below indicates, there are two options for adding a block, and, on the right side, three for instantly adding a header, image, or cover (we will talk about covers later).

  3. Click the + sign to add a block. As you can see, the WordPress developers take blocks very seriously and have created so many options that they have to categorize them, and even felt obliged to offer the option to search for a particular type of block.

  4. Click on Common Blocks, select image, and upload an image. Preferably one of you. As you can see, WordPress prompts you for a caption. Several options also appear on the right side.
    1. The first is alternative text to describe the image.
    2. The next is Image Size. When WordPress receives a new image, it automatically creates multiple sizes of the same image. You can pick a size, thumbnail, medium, or full, with the Image Size option.
    3. With Image Dimensions you can control how the image is displayed.
    4. The image link Settings allow you to link to
      1. nothing
      2. the image itself
      3. the attachment page. Click here if you are curious about attachment pages.
      4. a custom url of your choice
  5. Now add a paragraph block and enter some text. Once again, several options appear on the right side of your page.
    1. You can resize the text with the presets of normal, medium, large, and huge, or simply enter a number to fine tune the pixel size of your text.
    2. Add a drop cap. Fun, right? Leave drop cap there for now.
    3. Also note the color settings for both background and text color.
  6. Click inside of your text box and note the editing features that appear. Those are obvious but click on the downward pointing arrow and you will notice the option to add an inline image. The previous image was in its own block, but an inline image belongs to the paragraph block. If you select the image, you will notice resizing options and alignment options. Explore those options until you have a clear idea of what they offer. You will notice that left and right alignment allow you to enter text to either side of the image.
  7. Now click on the three vertical dots and click on edit as HTML You should see the actual code of the block. You may even see a class named has-drop-cap, if drop cap is still applied to your text block.
  8. Click the three vertical dots again and return to visual mode. Now click on the paragraph symbol and notice that you also have the option to switch the type of block.

  9. Just for fun add, another block and this time select RSS from the widgets category. You will be prompted for a URL. There are zillions of rss feeds out there. To make it easy, here is one from Grady News Source
    ( http://gradynewsource.uga.edu/feed/ )  and yet another from the New York Times home page feed:  https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml.
  10. Explore those block options. Add them, delete them, do your bet to gain an understanding of how they work and what they offer to you as a developer. There are lots of block types! In fact, certain plugins and themes come with their own sets of customized blocks, such as Woo Commerce, which you will meet in a future lesson.

Changing Themes

At this point your blog is using the default theme that WordPress chose for it and it may not be exactly what you want. Don't worry, there are thousands and thousands of themes to choose from and there are also ways to tweak the appearance and function of themes once you find one that you like.

On the left navigation click "Appearance" (it's near the bottom). You should see a theme or two, including the one that you are using. Just for fun, let's install a new random theme from the Internet. Click the Install Themes button and then clicked "Featured". 

Screenshot

You should see snapshots of a few themes. Click "Newest" to see several more. Pick one and install and activate it.  [footnote] note, you may have to enter your FTP credentials; ie. username and password.[/footnote]

Once the theme is successfully installed,  right-click on the name of your site [footnote] in the upper left corner right next to the big W, and Open Link in new tab.[/footnote]

Screenshot

This will open the published version of your site. Any time you use the Dashboard to change your site, you may can return to this tab and click to refresh button to see how it affects your site.

As you can see, it is ridiculously easy to radically change the look of your site with a new theme. The biggest problem with pre-made themes, however, is that they may have features that you want to change or lack features that you want. You may find a theme that you really like but you also may want a different font, or you may want some pages to have a side-bar but prefer that other pages don't. 

In subsequent lessons we will learn to alter the CSS of a theme and also will learn how to create a child theme that offers even more options for altering a theme. Even so, I always encourage my students to think of theme exploration, especially free themes, as something akin to 'speed dating.' Don't get too attached to one theme until you have tried out others. Your goal should be to find a theme that is the best possible match to what you are looking for and that requires the LEAST amount of tinkering,

It is also worth noting that I know at least one professional WordPress developer who is very faithful to just one, especially flexible, commercial, non-free theme named Divi. According to him, Divi can be made to look and function however he wants it.

Passing Images with Segues

In the previous exercise you used segues to pass string values (text).  In this lesson we will demonstrate how data passed by segues can be used so that one only view controller will be able to show a series of different pictures based on whichever button was clicked.

  1. To begin create a new single view application project named PictureSegue and save it into your 4310 folder.
  2. assetsDownload segue.zip from free.mynmi.net, unzip the folder and drag all 8 of the images into Assets.xcassets.
  3. Open Main.storyboard and drag four buttons onto the view controller.
  4. Add the thumb images (as in beachThumb) to each of the four buttons. If the frame of a button is larger than the actual image, resize it to fit the image. When you are done, arrange the buttons similarly to the outline below.align
  5. Before we go any further those buttons will need constraints because they will NEVER look right on a smaller, phone-sized, screen until we do. To see a fuzzy youtube recording of how to use the pin menu  pinmenu  to set the proper constraints for the button on the upper left, click here.  We will spend a lot of time on constraints because they are a critical part of IOS development. For now, the main point is to
    1. set the width and height of each button/image
    2. constrain it to either the left or right side and
    3. constrain it to the object above or to the bottom margin
  6. Set constraints for all 4 buttons. Each one should be tied to the side that it is nearest and to the object just above, or to the bottom margin. Once you have set constraints you can click on a given object to see a visual representation of the constraints. You can also see, and delete or edit, the constraints for a given object by clicking on the size inspector (see the HUGE screen capture below where the butterfly button is highlighted). constraints
  7. Test it out on both and iphone 6s and a 6s plus. Chances are it looks better on the 6s plus while the buttons may overlap on the 6s. Try deleting the constraints, resizing the buttons to make them a bit smaller, and then reset the constraints. You may also want to experiment a bit to see what changes when you set a constraint on one of the buttons near the bottom to the bottom margin, versus constraining it to the button above it. The nature of the game with constraints seems to be compromise. It is possible to get exactly the look that you want for any given platform, but it can be challenging to make even a simple set of buttons behave well on multiple screens.
  8. Once you have the buttons adequately constrained, drag a new view controller onto the stage.
  9. newFileJust as in the previous exercise, you will need to create a new swift file based on the UIViewController class, and associate it with the view controller object that you just added to the stage. Luckily this task is easier to accomplish than it is to describe 🙂 .
    Right-click in the project navigator sidebar, as shown at right, and click New File. Select Cocoa Touch Class and click next. cocoatouchChange the name to displayPix, making sure that the language is Swift (as shown below) and click Next yet again. displayPix
    folderSave the file which will appear in the project navigator sidebar as displayPix.swift. Place it inside of the segueDemo folder, as shown at right, if it's not already there. The project will work either way, but it's nice to stay organized.
  10. Next, click on the view controller icon of the new View Controller that you added to the stage a couple of steps back. Click the identity inspector and select the displayPix class that you just created. (shown below)identity
    Congratulations. You  have just associated the view controller object with its new class and are ready to do some light coding!
  11. Click on the first view controller, the one with the four buttons. If you are lucky you will already see the assistant editor on the right side and it will display the Viewcontroller.swift file as shown below. assteditorvc
    if not, click on the menu shown below and select Assistant Editors on Rassteditorsight. Once ViewController.swift is open, your first task is to create two new variables named clickedPic and whichImg, inside of the viewcontroller class, as shown here.
    2var
    Before we go any further it's worth mentioning that you will see several comments that are indicated by // or by

    /* followed by text. You can ignore those comments or delete them. Your call, but you do not need them at this point and some people find them to be distracting. 

  12. Our next job (whew) is to add an action from one of the buttons to viewcontroller.swift. This action will associate one of pictures that you dragged in a while back to the clickedPic variable that you just created.  Click here for a video demonstration of that process. When you finish, your code should match the screen capture below.
    utube
  13. Repeat this process with each of the 3 remaining buttons. Your final code should match the screen capture at right. By the way, if at some point you forget the names of the pictures, you can click Assets.xcassets to refresh your memory. The only caveat is that you will not be able to see the .jpg file suffix. Even so, the full name with suffix must be added to the variable.

  14. image_view_searchNow let's switch to the displayPix view controller, drag an Image View object onto the stage and resize it to fit the whole space as shown below.
    imgbiew
    Next, we need to associate the image view to displayPix.swift via something known as an 'outlet.' The purpose of an outlet is to allow you to perform actions on an object that has been placed on the view controller. Click here for a video of this process. When you finish, the code should display as follows:

    @IBOutlet weak var showImage: UIImageView!

    You have now created an outlet with a variable named showImage that is associated with the imageView on the stage. Soon we will use this relationship between the imageview and its variable to dynamically display images. 

  15. Add one additional variable named picChosen as follows:picChosen
    We will use the picChosen variable to receive information from the view controller with the four buttons. Almost there! Return to the original view controller with the four buttons.
  16. You are about to create something called a segue which you will use to pass information from this view controller to the displayPix view controller. This is kind of hard to explain but easier than it looks.
    Just below the didReceiveMemoryWarning function (as shown a few lines below), start typing prepareForSegue. As you do so, lots of intimidating code should magically appear along with two brackets that indicate where you should enter code.  Next, enter the code shown below as in

    let passedPic = segue.destinationViewController as! displayPix and  passedPic.picChosen = clickedPic
    

    Once again, some of this code will magically write itself! When you are finished your code should match the code shown in the screen capture below.

     

  17. Two things left to do. One is to add navigation and you already know how. Control drag from each of the four buttons to the displayPix view controller to create the links. Next, drag a button onto the displayPix view controller and use it to link back to the navigation View Controller. You can put the button wherever you want to but it needs to be visible. It would also be possible to cover the entire view controller with an invisible button. You're the designer, so your call.
  18. Thing two. Return to the displayPix view controller and add the two lines of code shown below to the viewDidLoad function. viewdidload
    As you might surmise, the ViewDidLoad function has the job of making things happen after the view controller loads. In this case, you are setting a constant named chosenImage to become a UIImage object that gets image names from the picChosen variable that you created earlier. Next, you are telling the showImage outlet tied to the imageView on stage to display chosenImage. Test it.
  19. Once everything is working, spend some time trying to make the images display properly on multiple devices by experimenting with constraints.

 

 

 

 

 

 

 

 

 

Child Themes

In the previous exercise you learned how to alter and apply custom CSS to a given theme. In many cases, custom CSS is all that you need but child themes are another powerful tool that you should know about. With a child theme, not only can you change the CSS of a theme but you can also alter the HTML that forms the structure of your site. This lesson is a short and simple introduction to child themes. Should you want to learn more, the folks at wordpress.org have a lot more to say about child themes.

How Child Themes Work

The way child themes work is that, once you select them, the contents of a file inside of your child folder, such as style.css, overwrites the same content in the parent theme. For example, if the parent theme's style.css file defines the body tag's default font size as 12px ( body {font-size:12px;} )and you add a body tag to to a style.css file inside of the child theme folder that defines the font as 84px
( body {font-size:84px;} ), you should suddenly notice some really big text on your wordpress site.

  1. Pick a theme to modify and activate it (Twenty Fifteen). For this lesson we will work with a theme named called Twenty Fifteen, which is also the year that I first wrote this lesson. WordPress.org designates sort of a 'theme of the year' every year, and that theme, along with themes from a few previous years, is typically included with the default WordPress installation. Twenty Fifteen is getting old so you may have to search for it.
  2. Create the  twentyfifteen-child folder. Your child theme needs a home. To create the home, login to your web account with your ftp client (Cyberduck most likely). Inside of your wordpress folder you should find another folder named wp-content. Open wp-content and next open the themes folder. The themes folder should contain folders named after every one of your currently installed themes, including one named twentyfifteen.  Right-click and create a new folder named twentyfifteen-childchild
    [footnote] You can name the child theme folder anything that you want to, but it's a good idea to name it after the parent theme and append child to the name so that you won't confuse it with something else. [/footnote]
  3. Open Brackets and create two new files: style.css and functions.php. Add the following text to style.css
    /*
     Theme Name: twenty fifteen child theme
     Theme URI: https://wordpress.org/themes/twentyfifteen
     Description: twenty fifteen child theme
     Author: whatever you want here
     Author URI: http://example.com
     Template: twentyfifteen
     Version: 1.0.0
     License: GNU General Public License v2 or later
     License URI: http://www.gnu.org/licenses/gpl-2.0.html
     Tags: blue
     Text Domain: twentyfifteen
    */

    Next, add all of the following hocus pocus to functions.php

    <?php
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
     wp_enqueue_style( 'child-style',
     get_stylesheet_directory_uri() . '/style.css',
     array( $parent_style )
     );}
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    ?>
  4. themsSave and upload both files into the twentyfifteen-child folder.
  5. Login to your WordPress site. From the dashboard, click Appearance and then Themes.  Activate twentyfifteen-child.
  6. Screen Shot 2015-09-18 at 1.45.13 PMSelect Appearance, and then Editor, as shown at right. This step should automatically open the styles.css file that you just uploaded to the twentyfifteen-child folder.
  7. Add the following style to style.css (after the */ tag)
    body {font-size: 34px; }. 
  8. Preview your site. See that bigger font size?  If so, make a few more changes to style.css and see if they show up on your site. Change the color of h1 for example.

Keep in mind that this lesson is a very limited introduction to child themes. Mainly, I wanted you to know about their existence but didn't want to go too far down this particular rabbit hole for an introductory course.  If you have a theme that you can't part with for some reason and need to make radical changes, child themes can be a powerful and useful tool that is worth of further exploration.

Ordering Pages

Once you have created lots of pages, there are two ways to control the order in which they appear in your menu. The first, OLD, method is worth knowing about even though you probably will prefer the newer method.

attributesOld Method. Whenever you create or edit a page, one of the tools at your disposal is Page Attributes, shown at right. One of the options is to change the numeric order of a page. Pages with a low number appear in the menu ahead of pages with a higher number.

If your theme supports drop down menus, you can set a "Parent" page as well, which will hide the page until someone mouses over or clicks on the parent page.

menu2New Method. The second method is to select Appearance - Menus, as shown at right. This selection will take you to a page where you can create a new menu. Here you name your menu and add pages to it as shown below. In this case the way to create 'parent and child' pages is simply to drag the pages over that you want to appear in the submenu when someone mouses over a link, as demonstrated below by Module 1 and the two pages below Module 1. menu

It's also worth noting that the Appearance - Menus method may offer more than one option of where to place your menus. These options are very much theme-specific, but don't be surprised if you see two or more options for menu 'Display Location' similar to the screen capture below. Primary menu is usually a safe bet, but you do have to check one of those boxes in order for your menu to display.

 

Assignment Three: Build two original WordPress sites

There is still a lot to learn about WordPress but you know enough by now to build a fully functional WordPress site. In fact, you are about to build two!

Each site is worth 4 points and will be evaluated on the following criteria

  • Appropriateness of theme to site purpose
  • Intelligent use of WordPress features (plugins, widgets, etc.)
  • Overall quality of execution

Site 1: A site about you! Or whatever.

For your first site, you are welcome to re-use the same site that you used for the previous lessons. This site can function as a portfolio site that shows off your work, it can be about your family, a personal interest, your favorite sport, or whatever. 

The site should have the following characteristics:

1. Eight pages with original content and photos. If you like, use the same content as the Module 1 website.

2. One of the pages should feature a brand new plugin of your choice. Find a new plugin that you like. Install, activate the plugin and put it to work. Write a brief description of the plugin on one of your pages.

3. Make the site look as cool as you possibly can by choosing and installing an awesome template.

4. Create and embed a Google Form. See below for instructions.

To create a Google Form you will need a free Google account. Afterward you will create the from from the Google Documents menu. You probably already know how, but if not, I expect you to figure this one out on your own. 

1. Make sure that your form has at least three questions that ask for name and other contact information such as email address and at least one multiple choice question. After you create the form you will need to get the embed code that will allow you to place your form inside of a webpage of your choosing via an iframe. The embed code is generated automatically for you from the More Actions menu of the Google Forms Editor. You can also get the same embed code from the spreadsheet view of your form.

2. However you get to the embed code, copy it, return to your dashboard, and create a new page. Click on the Text button and paste in the embed code. After you paste it in and while you are still in the Source Code view, take a look at the width and height settings. Those settings control the width and height of the iframe that makes it possible to embed your form. You can change them if you want the form to display differently.

3. Return to the WYSIWYG (non-source) view, center your form and publish it. Afterward check it out in the preview tab. If you don’t like the way that it displays you can always modify it.

4. Name your page something obvious like 'google form' so as not to tax your instructor's brain when he or she is looking for it.

Site 2: Ecommerce Site

I strongly recommend that you start by following the instructions in the very next lesson: Easy Ecommerce with Woo Commerce. It is up to you to figure out what to 'sell' but make sure you have at least 5 products.

Make it look as cool as you can!