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

Why Use a Child Theme?

In the previous exercise you hacked a theme and hopefully during the process learned a lot about how WordPress is structured. Hacking a theme can be  an effective and, in some cases, may be the only way to achieve your formatting goals, but there is one big problem. Themes can update automatically and all of your hacks can disappear when they do. There are ways to prevent themes from updating, such as changing the name of the theme folder to something other than the default name, but preventing updates can be a bad idea because updates usually bring improvements.  The best way to avoid losing everything by a surprise update is to use a child theme.

Before I explain how to use a child theme, be aware that I am currently exploring the parameters of child themes and this lesson will evolve along with my understanding. The one thing that I can say for certain at this point is that  if your goals for theme modification are relatively modest, changing fonts and background colors for example, child themes are a great option.  It would be possible, for example, to create an alternative template with a child theme (as we did in the previous lesson without a child theme), but perhaps a bit more complicated.

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.

If none of this makes sense yet, hopefully it will once you experience how a child theme functions. Let's get started on that experience.

  1. Pick a theme to modify and activate it (Twenty Fifteen). For this lesson we will play with a very common theme called Twenty Fifteen. 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. Which means that you should find Twenty Fifteen among your already installed themes. Once you find Twenty Fifteen
  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
    1
  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: http://whatever.com
     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.

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

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

 

Next: Assignment Three: Build an original WordPress site

Assignment Three: Build an original WordPress site

There is still a lot to learn about WordPress but you know enough by now to build a fully functional WordPress site. Your new 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 be 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. Many tutorials are available on the web if you search for them. One nice tutorial is available at: http://www.mattsilverman.com/2008/10/introduction-to-google-forms.html.

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.

Next: Module 3: Introductory Coding

Hacking a Theme

As we mentioned earlier, being able to switch themes is a powerful and easy way to provide a completely new look to your WordPress website. But what if you like the overall look and feel of a particular theme but want some subtle changes, such as more width on specific pages or maybe you want to get rid of the right sidebar? In that case it may be time to tinker with your CSS settings and the special templates that make up a given theme. Let’s explore this idea.

1. To begin, visit free.mynmi.net and dowload azul.zip, if possible without unzipping it. 1

2. Click appearance, then "install themes, and afterward click upload.  Upload and activate azul.zip.

If, at any point you are prompted to update the azul theme, do not do so. You need this particular version and none other.

Screenshot

3. Click on Appearance and then Editor. This step should automatically open a file called style.css that contains all of the styles for this particular theme. In addition to style.css, on the right side you will see a long list of template files that can also be edited. 2.

Screenshot

The CSS file and the template files work together to form much of the structure, functionality, and look of your site. For now, we are going to concentrate on two of those files: page.php and styles.css.

FTP to your theme's folder

4. FTP into your site and find your way to the wordpress folder that contains your WordPress installation. From there, locate the wp-content folder and click your way through to the themes folder and, finally, into the azul folder. The azul folder contains everything for this particular theme. 

Screenshot

Create copies of templates and files

5. Duplicate files. Right-click on page.php and choose duplicate file. Name the new file new-page.php. Duplicate style.css as well and name it new-style.css.

Screenshot

6. Download the folder called images onto your computer; it doesn’t mater where, as long as you know where to find it. You will be working with the images in this folder later on.

Why are we doing this?

The reason that we are duplicating files and downloading a folder of images is because we are going to modify the files and use the images that we downloaded to create a brand new page template that is slightly different from the page template that came with this theme.

Because the original page template is made up of a collection of php files, CSS styles, and images, we can’t modify the original files and styles without changing the original template. Therefore we have to create new, duplicate, versions of all files and styles that make up the template that we can hack without affecting the original page template.

7. Return to your browser. Return to WordPress’s editor if you are not still there and hit your browser’s refresh button. Look again at the list of files on the right side. You should see the two new files that you  just created: new-style.css and new-page.php.

Screenshot

Switch CSS files/ Create an alternative template

8. Open new-page.php with the editor. You should be looking at a bunch of code.  Find your way down to the (seventh) line of code that reads:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> 
 

FYI, this line of code instructs the php file to load style.css. Delete this line of code and replace it with this one:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/new-style.css" type="text/css" media="screen" /> 

You can copy that code from: free.mynmi.net/copycode.html

Click the Update File Button

You have just instructed new-page.php to use new-style.css instead of style.css. The reason you switched to a different stylesheet is because you want to edit the styles for new-page.php without affecting the appearance of the other templates. To accomplish this goal you are switching to a different stylesheet.

9. While new-page.php is still open you need to implement one more step so that WordPress will know that it is a template file. At the very top of the page, enter in the lines of code shown below (just above the line that begins with <!DOCTYPE html).  This code can also be copied at free.mynmi.net/copycode.html

<?php/*
 Template Name: new-page-template
 */
 ?>

Hack the New Template

10. Delete the Sidebar. Scroll to the bottom of new-page.php and find the code shown below. Those three php commands are standard in many WordPress themes. What they do is instruct the template to load three additional documents. The sidebar, the standard footer, and a WordPress footer. 3

Screenshot

a) If you look at the preview version of your document you can see the Header that includes the title and the footer that says “Powered by WordPress | Designed by Switchroyale 2009.”

b) For now, lets lose the sidebar by deleting the line that says

<?php get_sidebar(); ?>. 

Click the Update File button.

11. Just for fun, open the footer.php file, delete everything between the <p> and </p> tags and replace it with your own words. Add a url and/or a thumbnail-sized picture if you feel ambitious 4

Apply the new Template

12. Return to the Pages menu and edit the about page. On the right side you should now see the Template selector. Choose new-page-template.

Screenshot

13. Add (paste in anything) 4 or 5 lines of text to your about page.

14. Go to your preview tab and check out the new about page. It should no longer have a sidebar and whatever you put into the footer should appear at the bottom.

Expanding the width of the new template

15. Changing Page Width:  Next let’s expand the width of this template.

(a) Return to the edit menu and open new-page.php again. Scroll down to the <body> and notice the line of code just below that says <div id="container">.  As you may know, what this code is telling us is that this particular div tag is defined by a CSS id tag called container. As the id title suggests, this div tag “contains” the entire document. To modify the width of this div tag we need to open the CSS file that contains the container id tag that defines it.

#container {
    width: 960px;
background: url(images/containerbg.jpg);
background-repeat: repeat-y;

(b) Open new-style.css (should be located at bottom right). You should be able to see the code shown at right that sets the div tag’s width to 960. Change it’s width to 1160. Click Update and go to your preview bar to see if anything looks different. Chances are, not much has changed except that the Search field is way over to the right. 5 The Search field is actually aligned against the right margin of the container div tag; you just can’t see the div tag.

(c) Open new-style.css again and look, once again at the #container style. Container, as you can see, uses a background image called containerbg.jpg 6 that repeats  the Y value; in other words it repeats itself (tiles) vertically. Just below #container is the #header style that has a background image called headerbg.jpg. If you scroll through the document and look carefully you should eventually be able to find that the #navbar and the #footer styles (surprise) use navbarbg.jpg and footerbg.jpg for their respective backgrounds. Time to modify all of those images.

(d) Find the images folder that you downloaded to your computer a while back. Using Fireworks, Photoshop or some other image editor, open containerbg.jpg, headerbg.jpg,  navbarbg.jpg, and footerbg.jpg.

(e) These 4 images all have the same width of 960 pixels. If you are using Fireworks, Modify- Canvas- Image Size  deselect "Constrain proportions"  7  and change the width of each image to 1160 pixels.

Screenshot

Be sure that the height does not change from 50, 150, or whatever it was to begin with. 

(f) For each image, “save as” and add new- to their original names as in: "new-navbar.jpg". Be sure they end up in the images folder so that you can find them!

(g) Upload the new images into the Azul theme’s images folder.

(h) Return to the WordPress editor. Find the #container, #header, #navbar, and #footer styles and target the new background images that you just uploaded as in:

background: url(images/new-containerbg.jpg), background: url(images/new-navbarbg.jpg); etc.

(i) After you have modified all four styles click the Update File button.

(j) Go to your preview tab and check it out. If everything is working as it should, the page should be significantly wider but there are still a couple of issues:

1) for some reason the "home" button is sticking out a bit too far to the left.

2) the text breaks way too early so that the right side of the page is blank.

(k) Let’s fix the Home button first. Return to the WordPress editor and open new-style.css. Scroll down till you find the #navbar ul tag shown below and change 30px to 50 px. This will push the Home button far enough to the right to resolve the sticking out issue. 8

#navbar ul {
        margin: 0 0 0 30px;
        padding: 0;
}

(i) Now the Text issue. Scroll down a few lines and you will find the #posts style shown below, that controls the location and size of any text entries that you make on a page. Currently the width of our container is set to 1160 but the width of the post style is only 600. After we take into account that the left side padding of the post style is 50 pixels and the right margin is 20 pixels,  that leaves us with a potential text space of 1090. So let’s use it. Change the width of #post to 1060 which will also give us some additional space on the right side.

#posts {
       width: 600px;
       padding: 0 0 0 50px;
       margin: 0 0 20px 0;
       float: left;
}

(m) Click the Update File button, go to your preview tab and check it out. If everything looks right, you are done! Any pages that you make in the future can use either the default pages template or the new one that you just created.

16. Let’s make one last change to totally divorce ourselves from the idea that WordPress has to be a blogging platform. By default the home page displays a list of posts; ie. a blog. De-blogging is actually quite easy.

(a) Click on Settings and then on Reading.

Screenshot

(b) Change your Front Page to Static Page as shown below and select the static page that you want to replace the posts page.

Screenshot

(c) Do not select a posts page.

Next: Ordering Pages


  1. Downloading without unzipping is easy. Right-click on the file that you want to download, choose "Download Linked File As", and save the zip file somewhere on your computer.

  2. A partial list is shown below

  3.  Oddly enough, this particular theme does not actually include a WordPress footer even though it has documents that ask for one.

  4. and know how

  5.  The reason that everything else looks the same is because background images are actually defining the look of your page.

  6. from the images folder

  7. Screenshot

  8. If you figure out what caused the sticking out problem please tell me because I want to know.

Plugging in a Plugin

As we mentioned earlier there are thousands of plugins- some free and some that aren't- that can add features to, and sometimes make big changes to, your site. Some plugins work really well on all browsers; some don't seem to work at all and others 1can actually mess up your site by slowing things down. There are plugins for turning your WordPress site into a social network with many features that you will recognize from Facebook, plugins for backing up your site, plugins for changing the way that your site displays posts, plugins for photo slideshows; the list seems to be endless.

To get started we are going to download and install a plugin called Google Doc Embedder. This plugin, when it works properly, allows you to display MS Word Docs, Powerpoint and PDF files, directly into a WordPress page. Can you think of any way this may be useful? Your resume perhaps?

1. Go to http://wordpress.org/extend/plugins and search for the Google Doc Embedder. 2.

2. Click the big red Download button to save the embedder on your computer.

3. Return to the WordPress Dashboard and click on Appearance and then on Plugins. Next click on "add new plugin".3Afterward,  the "upload plugins" button will appear. Click upload and browse until you find a file called "google-document-embedder.zip."

4. Click "Open" and then "Install Now." Because the installer uses ftp 4 to upload things you will need to enter the same information as when you use Cyberduck to upload files. Ie, mynmi.net, your user name, and the same password that you use with Cyberduck.

Screenshot

5. Once the file is uploaded click Activate Plugin. The plugin is activated and ready to go. It's time to put it to work.

6. Click the Pages button and then Add New to create a new page. Name the page something like Google Viewer Demo.

7. Into the body of the page paste

[gview file="http://emuel.mynmi.net/press2/demo.doc" width="600"]

This code can be copied at free.mynmi.net/copycode.html. You might need to paste it in the Text view (vs. the Visual view):

Image showing Visual and Text editors

8. Publish the page and check it out. You should see a Word document that I put online. All you have to do to load in a different Word doc is to upload it to your site and substitute it's URL in place of http://emuel.mynmi.net/press2/demo.doc. Note as well that you can also change the width at which the document displays. 

9. It is also worth noting that my experience with this particular plugin has been mixed. At one point, for example, it never seemed to work properly with the Chrome browser. At the moment (as of 2016) it seems to be well behaved so keep your fingers crossed.

When Plugins Don't Plug In

Sometimes the process of uploading a new plugin goes smoothly but not always. If your plugin stalls out before it is properly installed (ie. fails) here is what to do.

1. Try again. If after 2 or 3 tries you are still unsuccessful there is one failsafe method that always seems to work.

2. Download the plugin from wordpress.org/extend/plugins 5

3. Use cyberduck to navigate to the plugins folder. FYI, the plugins folder is inside of the wp-content folder.

4. If you see any vestige of the plugin that you tried to install, delete it.

5. Drag the new plugin into the plugin folder. You can upload the zipped version of the plugin and unzip it with terminal right on the server, or unzip the plugin on your computer and slowly upload that folder.

6. If you upload the zipped version of the plugin and, as you may have done in the wordpress installation, use terminal to find your way to the plugins folder

7. After activating terminal and logging into your account, type cd public_html/press/wp-content/plugins and then press enter

8. Type ls and then enter to double check the name of the zipped plugin.

9. Type unzip whatever_the_name_is.zip

10. Return to the WordPress plugin panel and make sure that it finds the plugin.

11. Activate the new plugin and pat yourself on the back.

Plugging in a Plugin Part 2:  Fast and Secure Contact Form

If you decide to use WordPress as a blog, you can always include the option for users to comment on your blog posts and be notified by email whenever someone actually does comment. Another, more conventional way, to get information from people is via a contact form and there are some pretty fancy ones out there that are available as plugins. For this lesson we will install a contact form called Fast and Secure Contact Form. I chose this particular form because it was highly rated and had some interesting features.

1. Once again, return to the WordPress Dashboard and click on Appearance-Plugins and then on "add new" plugins. This time use the search window to find the Fast and Secure Contact Form. If more than one option appears, make sure to select the one that has over 5 million downloads.

2. Once you find it click "Install Now." Afterward, "Activate Plugin"

3. After the plugin activates you should be looking at a list of all of your plugins. If not, click on "Plugins" again. Find the new plugin and click settings.

4. A lot of options should appear including the ones shown below.

Screenshot

Feel free to change the Introduction which is what your users will see when they visit the form. Change E-mail too by deleting Webmaster (including the comma) and leaving just your email address.

5. Scroll down a bit further and look at the Redirect and Form Fields options.  Redirect lets you decide where a user will be taken to after he or she submits a message. The Fields section allows you to whether not fields are required (ie. users have to fill them out), and also allows you to add additional form fields. If you see any advanced options that you want to try out feel free to do so. Once you are done, click Update Options.

6. Scroll up to the top of the Basic Settings page and find the heading titled  Basic Settings and, just below, Usage, where you will find instructions for installing the form into a page. Copy the Shortcode-  

  [si-contact-form form='1']     

so that you can paste it into a page later.

7. Now, click on the Pages button and add a new page. Name the page "Email Me" or something of the sort. Paste the Shortcode  into the body of the page and publish it.

8. Go to your preview tab and check it out by sending yourself an email. Hopefully it works!

A Useful Trick

Have you noticed how some web pages hide part of their content until you click a link? To try this trick out, create a new post with several paragraphs of nonsensical text. Click the text view 6 and insert the following codeImage showing Visual and Text editors

<!--nextpage-->

somewhere in the middle of all that text. Update the page and check it out.


  1. based on what I have heard

  2. The actual url is  http://wordpress.org/extend/plugins/google-document-embedder/ 

  3. Screenshot

  4. the same protocol as  cyberduck

  5. You will have to search to find it

  6. next to visual

Let's Play

Now that WordPress is installed on your site you have the power to modify literally anything you want to in your WordPress site. Of course power without knowledge is a dangerous thing so let's work on plugging that gap.

Basic Blogging

As you can see, the Dashboard offers lots of options. We will start our exploration of those options with "Posts," "Pages," and "Appearance."

sidemenu

Let's start with a simple blog post. Click on "Posts" on the left navigation bar.  The page that comes up is the list of all your posts, and there should be a default, "Hello World", post already active. Hover over the Hello World post and notice that a couple of options show up.  Push "Trash." Now click the "Add New" button to the right of the "Edit Posts" header.

Once the page loads, nice that there are two main sections: Title and Content (shown below).

topmenu

Take note as well, of the icons that can be used for uploading media and formatting content.

Go ahead and fill out the Title and Blog sections with some sort of information. The Excerpt section is optional. Once done, on the top-right side of the screen, you will notice a blue publish button. Click it to make your post available to the world.

Congratulations!  You have published your first blog post on WordPress. Once the publishing process is finished, a yellow bar will appear above the Title section that lets you view your post.  Click "View Post" to see it.

Categories

Now that we have been able to make a blog post, we need to add some categories to it. These help with allowing your reader to understand the main topics of your post. Later on, when you have a lot of blog posts, visitors to your site will be able to view all of the entries that are associated with a given category. For instance, say your blog is about college sports and the new post for the day talks about the new quarterback. A couple of categories that you may add to this post could include: "The name of your college," "Football," and "Varsity Sports." By just looking at those category tags, one could easily infer the main topic of the post.

Time to add categories of your own. Click the "Posts" button to see the drop down menu and then click Categories. Here is where you can manage all of your category tags.  Type in the Category Name and Description in their appropriately labeled boxes and click "Add Category" at the bottom of the page.  Add as many categories as you would like.

Screenshot

As you add more categories, notice how the list updates itself on the right side to show all of the categories that you have created thus-far. It also shows how many posts you have under each category for you to take inventory later.

Once you have a couple of categories, make your way back to your first blog post by clicking Posts again on the left navigation. Hover over your first post and notice the four links that pop up: Edit, Quick Edit, Trash, and View.  Click "Edit" so we can add our categories to the post.

On the right hand side, you'll see the "Categories" panel with an updated list of all the new categories you created. You can check/uncheck as many as you would like to categorize your post with. Once you are done, click "Update," and wait till the yellow box appears and click "View Post." You'll see that at the bottom of your post, all of your categories will appear.

Changing Appearance Or Theme

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

Once the theme is successfully installed,  right-click on the name of your site 2

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. 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. Etc. In that case, if you are brave and stalwart, one option is to HACK THAT THEME. In a later section we will learn how to do just that.

Adding Widgets to Your Template

Most templates offer the option of adding pre-made widgets to your site.  These may be things like: Flickr, so you can show off your pictures, Search, so people can search through your posts to find exactly what they want, or Twitter, which puts your most recent tweets on your blog. Where these widgets are located are template-dependent; some templates may have them on the Sidebar (left or right), some may have them in the footer area.

On the left navigation hover over and click the arrow on "Appearance," then click "Widgets." A disturbing number of pre-programmed widgets pop up for you to add. As you will notice, there are two columns on this page: on the left, it shows the "Available Widgets" and the right are the different areas 3 that you can add widgets. Drag the rss feed widget to the sidebar, find an rss feed such as teh one referenced below, and provide whatever additional information that you think that appropriate such as title, date, etc. You have added your first Widget. When you preview your site the rss feed should appear as well.  BTW, if you are confused about RSS feeds, the one below loads articles from the New York Times Personal Tech section and you are welcome to use it. 

http://rss.nytimes.com/services/xml/rss/nyt/PersonalTech.xml

Uploading Photos to Your Posts

Time to learn how to upload photos to a post.

1. Locate an image that you would like to use.

2. Start a new post and type something that relates to the picture that you chose.  Make sure you include a title and some generic content for the post.  Once you're done, make sure the cursor in the text box is exactly where you want the image to appear; this is important, because wherever the cursor is, the image will appear on that same line. 4 

3. Above the text editor, you'll see the add media tag shown below. mediaClick Add Media and, in this case, click on upload files. Take note, however, that you do have other options including "Insert from URL," 5 Set Featured Image 6, Create Gallery 7, and Media Library 8

A box pops up that prompts you to Select Files, but you can drag files to this window or click Select Files and browse to wherever your photo is on your computer.   Now you have the options to change the Title, Alternative Text, Caption, Description, Alignment, and Size.  Here's a quick description of each of those:

Title: Basic and simple - the Title

Alternative Text: This is the text that appears in the yellowish colored box when you hover over the image.  This can also be the Title of the image.

Caption: This is the text that may/may not appear under the images 9

Description: This is a longer description of the photo; used mainly for when someone uploads a lot of photos and needs to remember exactly which photo was which

Alignment: This is where the image will show up on your post: Left, Center, or Right

Size: This is how large you want your image to show up. One good generic size will be Medium, but feel free to try the others.

Go ahead and set the parameters however you would like, and click Insert Into Post at the bottom of the screen. If it appears in the wrong place, do not worry.  You can either drag it to where you want it, or hover over the image and click the delete button. Once you're done, make sure the cursor in the text box is where you would like your image to appear and try it again.

Pages v. Posts . . . What's the difference?

Take a look at the left navigation. You'll notice that there are buttons for both Posts and Pages, so what is the difference? Take a look at what WordPress says about it:

Posts are listed in reverse chronological order on the blog home page or on the posts page if you have set one in Settings > Reading.

Pages are static and are not listed by date. Pages are more for static content, stuff that doesn't change on a regular basis. Posts are timestamped and act like a blog.

Let's go ahead and make a page that is has some basic information about yourself.

Adding a Page

1. At this point you have a home page that accepts posts and an "About" page. Hover over the "Pages" icon and click the arrow on the right to drop down the menu.

2. Click on the "Add New" button that pops up underneath.  As you can see, this looks almost identical to a Post page minus a few of the extras.  Go ahead and title this page "About Me", and add some content to the box.  Feel free to mess around with the formatting some and throw a picture of yourself in there as well. 10

3. Go ahead and push "Publish" on the right navigation.

4. View your page. If you have the published version of your site open in another tab, go there hit refresh, and click the About Me tab. Otherwise, click "View Page."

5. You should see the Home and About Me tabs in your page's header. Be aware that other templates may display links to pages in the sidebar, while others do not even show them unless you add the pages widget.

Permalinks: Changing the URL of your pages

By default, WordPress pages display with URLs such as wordpress/?page_id=5. There are other options however via a feature known as permalinks. The permalinks feature can be accessed via settings but it's even easier to click the   "change permalinks" button while you are editing a page (just below the title box).

This button links to several options for changing the URL of your pages. The most straightforward, post-name, changes a URL for a page named contact from something like wordpress/?page_id=5, to a more representative wordpress/contact/ .

Managing comments

Although WordPress is a great content management system, it started as a blogging system and blogging features, such as default enabling of comments on pages, are deeply embedded in its DNA. Although comments can be great for a blog, you may not want random strangers to be able to comment about every page or post on your website. In particular, you certainly don't want to be bombarded with thousands of random bot-generated comments 11

You have at least two good options for dealing with this problem. By default, WordPress installs with a spambot killer called Akismet. Once you activate Akismet, which involves signing up for a Key, bot generated spam is drastically reduced but genuine human beings can still comment on your pages and/or posts. 

If you prefer to eliminate the comment option completely, follow this procedure.

Screenshot

1. Check the pages or posts that you want to de-comment.

2. Click the "bulk actions" button 12 and select edit.

3. Click apply and set comments to do not allow 13

4. Click Update and the comment boxes on those pages and posts will disappear.

Next: Plugging in a Plugin


  1.  note, you may have to enter your FTP credentials; ie. username and password.

  2. in the upper left corner right next to the big W, and Open Link in new tab.

  3. there may be just one depending on your template

  4. either left, right, or center justified.

  5.  If your file is coming from a web address instead of from your computer.

  6. Featured images are used in special cases and their use may vary depending on your theme 

  7. Create Gallery is used when you want to show of LOTS of images with the default WordPress Gallery, which is actually pretty good. 

  8. the Media Library option gives access to all of the media that you have already uploaded. 

  9. It depends on the template you have chosen whether or not the caption shows

  10. same steps as how we did it for the Posts.

  11. otherwise known as spam.

  12. Screenshot

  13. Screenshot

The WordPress Installation

This is currently the shortest lesson in the workbook. Most if not all of you have a Godaddy web account which makes it REALLY easy to install WordPress. Here's how.

  1. Login to your cpanel @ yourDomainName/cpanel with the same username and password that you use for ftp/Cyberduck.
  2. Find the WordPress button and click it to start the installation procedure.
  3. Click the Install This Application button.
  4. At this point there are only a couple of ways to screw this up. DO NOT install WordPress into the root level of your site.  You need to, instead, instruct Cpanel to install WordPress into a specific directory named wordpress as shown below.kookbook
  5. Pick a language and use the screen capture as a guide for additional options. Be SURE that you remember your password and username. Once the installation is complete visit your wordpress installation at yourdomainname/wordpress
  6. To login, visit yourdomainname/wordpress/wp-admin and login with the username and password that you just created.
    wordpress

WordPress Introduction

WordPress was created in 2003 as an open-source blogging system. Since then it has evolved into a robust and sophisticated system for developing websites as well as blogs. One of the most exciting aspects of WordPress is that it also functions quite well as a Content Management System (CMS) for creating dynamic websites that different members of an organization can edit and contribute to. Instead of relying on conventional websites based on static html or on complex 1 content management systems, many developers now use WordPress as an easy cost-effective way to create websites that can be updated and maintained by clients who don’t know 2 HTML/CSS.

WordPress also features themes that can instantly change the look-and-feel of a site with the click of a mouse, and an a extensive library of plug-ins and widgets for equipping a site with just about any bell and/or whistle imaginable. Best of all, WordPress is supported by a vast worldwide community of developers who add new features and work to make the system better every day. Perhaps you will become one of them.

You may already be familiar with a site named wordpress.com but be aware that wordpress.com is quite different from the native wordpress installation that you are about to put on YOUR website. WordPress.com provides a free place to create websites that draw on the wordpress platform but you have much less power over the experience than with a native installation.  3 With a native installation you can install powerful plugins, for example, alter the css of your theme, or ftp into the wordpress infrastructure and download or upload components such as images or themes. Also you can break things, but you can also fix them.

We will begin our exploration of WordPress by installing it.

Next: The WordPress Installation


  1. and expensive

  2. and probably don’t want to know 🙂

  3. You also have fewer options for messing things up