Wordpress+101


 * Let's hit the ground running:** //It is expected that you've got your WordPress account up and running since last week – if you haven't already changed your administrative and cpanel/FTP passwords – do this before you get started. Once your passwords and FTP access are organized and secure you can get started. This tutorial (and future exercises) are working on the assumption that you've made your way through and are familiar with the material covered in Chapter 1 and 2 in WordPress 3 Complete.//


 * 1. Plugging in General Information for your Site**
 * 1) From the main dashboard menu click on the 'Settings' button at the bottom of the left sidebar.
 * 2) This will take you to the General Settings page. Change your Site Title and tagline to something you think is appropriate.
 * 3) Change your email address to your Sheridan email address see 'first login' here – if you don't know what that is]
 * 4) Note that you can change other basic information related to date format, time format, timezone, etc.




 * 2. Adding some filler content (and categorizing and tagging it)**
 * 1) Click on 'Posts' on the left sidebar – take a look at the administrative interface for managing posts. There is probably already a post titled "Hello World!" – ignore that for the moment.
 * 2) Click on the 'Add New' button in the centre, top of the screen.
 * 3) GIve your post a title in the field labelled 'Enter title here' at the top of the page.
 * 4) Navigate to [|hipsteripsum.me] and generate 2-3 paragraphs of filler text to copy into the body field of your new post. Once you've got this, paste it into your post.
 * 5) You can add some media to your post by clicking on on the small rectangular button immediately to the left of 'Upload/Insert' at the top of the body field. Click on this button, select 'Select File' and add an image to your post (use whatever you like) – this causes a lot of information to pop open. Give your image a title and alternate text (for SEO) and a caption. Note that you can set the alignment for your image and also adjust the size. For the moment, leave it on 'medium'. Click on 'insert into post' at the bottom and then 'Save all changes'. //We'll talk more about handling media next week.//
 * 6) Note that you can also change the formatting of body text with the WYSIWYG editor across the top of the body field. Make some text bold, italic and insert a bullet point list (fourth button from the left). //You could also change the justification of your text here – but that is probably best handled through CSS.//
 * 7) Note over on the right we have the opportunity to set 'Categories' and 'Tags' for our test post. At the bottom of the 'Categories' window, click on '+Add New Category' and add a new category called Test. //We will tag all of our test posts with 'test'.//
 * 8) You can also add tags to your post, add a tag related to the image you've selected to the post.
 * 9) Scroll up to the top right and hit 'Preview' – this will open up another tab and demonstrate how your post will look once it is live. Close this preview tab and hit the blue 'Publish' Button and you are done.
 * 10) Add another 2-3 posts. Set the category of each of these to 'test' and set a few tags for each post as well.
 * 11) Click on Wordpress in the upper left menu to leave the administrative view of your site and return to the landing page.

//Note that at the bottom of each post we can see what categories the post is associated with (left) and the tags that are applied to it (right – in this case Charlie Chaplin and Clockwork). If you click on either of these you get a view of content with that tag or category. For more on the distinction between categories and tags in WordPress see pg. 49 of W3C.//

//Now that you are somewhat familiar with adding content, note the below additional tasks://


 * 3. Other Basic Actions**
 * 1) Try adding a post and set it to 'aside' rather than standard. Once it is published, note how it is different than the generic posts.
 * 2) Try adding a post with two or more images and set it to 'gallery'. Once it is published note how it is different than the 'standard' or 'generic' posts.
 * 3) In the administrative menu click on 'Links' – you are bounced to a page with a list of URLS. Try adding a new one and set the category to 'blogroll' //(ignore all the other fields, just click on 'Add Link' in blue on the top right)//. Once you've done that click on 'Appearance' and then 'Widgets'. Once you click on 'Widgets' a big screen opens up with a list of 'Available Widgets' and then on the right there is a list of the widgets installed on the site. Drag the 'Links' widget over to the 'Primary Widget Area' – accept the default settings and hit the blue 'Save' button. Now, leave the administrative view and go back to the front page of your site. //The 'Blogroll' list of links we just edited should now be visible in your right sidebar.//
 * 4) Return to the 'Widget' page and try activating a few of the other widgets – note what functionality they deliver and the options for arranging them in the various areas.
 * 5) Go to 'Header' under 'Appearance' – change your background image. (Note the required dimensions).
 * 6) Go to 'Editor' under 'Appearance' – note that you can access styles.css here as well as various other page component templates (on the right).


 * 4. Adding a Page with Menu Items**
 * 1) Click on 'Pages' on the right, and then select 'Add New'. //Note that pages are managed with the same interface as posts.//
 * 2) Give your post a title and some filler text.
 * 3) Note on the right you can select a 'Parent' page in the 'Page Attributes' menu – this allows you to child pages under a parent page and connect content to menu items. Leave this dropdown menu as 'no parent'.
 * 4) Also note that you can select different display templates – different themes have different options. For now, select 'One column, no sidebar'
 * 5) Hit 'Publish' on the right.
 * 6) Navigate back to the front page. Now note the menu across the top, the title of the page you just created should be available as a menu link.
 * 7) Add another page, but make it's 'Parent' the page you've just created. Navigate back to the frontpage and see how this is accessible via the navigation.



It is easy to change themes in WordPress, and even easier to take test how your site content would like with them enabled.
 * 5. Changing Themes and accessing their stylesheets**
 * 1) In the admin menu navigate to 'Appearance' on the left sidebar and note the interface for managing themes that opens up. Since Esther 2.0 is available we might as well see what it looks like – click on preview underneath it. This will cause a lightbox to open up showing what the frontpage would look like with this theme installed. It is of course heinous, so let's close the lightbox and look for something a little more tasteful.
 * 2) Click on 'Install Themes' at the top of the page and note the many options that present themselves. Try selecting 'Photoblogging' and click on 'Find Themes' – you will suddenly be presented with approximately 40 options, which prove how widely used WordPress is. Go back to the 'Search' option and take 5-10 minutes to explore the theme options that are out there.
 * 3) Enter the word 'Toolbox' into the search bar, select 'Install' to install that theme – this will open up a lightbox, click on 'Install Now'
 * 4) You should get a message that the theme is being unpacked and installed – click on 'Activate' to complete this process.
 * 5) Navigate back to the frontpage of the site – note the alternate design. //Changing themes in WordPress is dead simple, learning how to pick and manipulate the right one is more involved though – that is what we'll be focusing on for the remainder of the semester.//
 * 6) Try playing around with the widgets and see if this theme presents any additional options that were not present with the default theme we used.

//For the rest of class, try to restyle the navigation menu of Simplemarket. Connect to the site via FTP, find your themes folder and open up style.css in a text editor of your choice (it will be located in the a folder named 'Simplemarket' within 'themes' within 'wp-content') to get started. Explore the a:link, a:visited, a:hover properties as well as background colours, font and text decoration to see what kind of alternate effects you can get for the base menu items and rollover states.//