GD 67 Class 10 + 11

Class 10 Topics: WordPress, Working in Teams
Class 11 Topics: Using WordPress: Plug-ins and Short codes


Announcements

  • Be sure to post your design comps to your WordPress process blog so I can give you credit for this assignment.
  • No more weekly assignments. It’s all about your final project from now until the end of the semester.

Class 10


Schedule

Class 10 (May 7): Team leader selected (email Jamie with name of leader) and wordpress.com site setup for team using the creative studio name selected by team.

Class 11 (May 14): Select your responsive WordPress theme.
Deliverables due: Final versions of Client Survey, Personas, Competitive Analysis, Communication Brief, Schedule, Final Estimate, Site map, Wireframes.

Class 12 (May 21):
Final Design, Final Content

Class 13 (May 28): Deliverables due:
Home page & a landing page finalized in WordPress.

Class 14 (June 4): Deliverables due:
In-class lab time.

Class 15 (June 11)Your final project presentations are Thursday, June 11 at 6:30pm. No late projects accepted.


WordPress

What files get uploaded to server when you upload a theme?

wp-files-on-server

What is a plugin?

Plugins are tools to extend the functionality of WordPress. Plugins offer custom functions and features so that each user can tailor their site to their specific needs.

http://wordpress.org/extend/plugins/

40+ essential WordPress plugins
http://www.webdesignerdepot.com/2012/11/40-essential-wordpress-plugins/

Responsive WordPress Plugins
http://premium.wpmudev.org/blog/10-responsive-wordpress-plugins-to-complement-your-theme/

40 Best Responsive WordPress (Free) Plugins
http://www.smashingapps.com/2014/01/08/40-best-responsive-wordpress-free-plugins.html

Responsive plugins I’ve used in my WP sites:
Video embeds: http://wordpress.org/plugins/responsive-video-embeds/
Fluid images: https://wordpress.org/plugins/wp-fluid-images/ (there may be a better on since this hasn’t been updates recently)


What is a short code?

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

http://codex.wordpress.org/Shortcode

11 Awesome Shortcodes & Page Builder Plugins For WordPress
http://www.wpexplorer.com/wordpress-shortcodes-page-builders/

Plugins for responsive shortcodes

Responsive video: https://wordpress.org/plugins/responsive-video-shortcodes/
Responsive columns: https://wordpress.org/plugins/wens-responsive-column-layout-shortcodes/

More stuff for WordPress

http://codecanyon.net/category/wordpress


WordPress Exercise

Recreate this page:

smc_wordpress

Do the following:

  1. Upload and Activate SmartStart WP Theme
  2. Add four pages, change the color of the highlight to match logo
  3. Insert logo graphic
  4. Create slider of three images
  5. Create three columns of text below the slider (lorem ipsum)
  6. Add address and social media icons to footer

Download the images for this exercise: http://everythingaboutweb.com/classes/downloads/wordpress_exercise.zip

The zip file includes:

  1. SmartStart WP Theme
  2. Documentation for Theme (you will need to read through this!)
  3. Images

Child Themes

Why use a Child Theme?
If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.

After you install your theme, create a Child theme for your site.

How to create a Child Theme

1. Create a directory in your themes directory to hold the child theme. The theme directory is wp-content/themes. For example, if you are making a child of the twentyfourteen theme, your folder name would be twentyfourteen-child.

2. Create a CSS file. In the child theme directory, create a file called style.css. The style sheet must start with the following lines. See this page: http://codex.wordpress.org/Child_Themes

3. Create a functions.php file. Copy and paste the code below and name the page functions.php. Upload this into the child theme directory. (The two files you need in the child theme directory are a style.css and a functions.php file.)

4. Activate the child theme. Log in to your site’s dashboard, and go to Administration Panels > Appearance > Themes. You will see your child theme listed there. Click Activate.


More information:
http://cyberchimps.com/responsive-theme/
http://cyberchimps.com/guide/child-theme-example/

More about Child Themes
http://codex.wordpress.org/Child_Themes


Class 11


Responsibilities as a team member

As teams members you agree to do the following:

  • Prepare before team meeting/class (for example, do all the required work for each class)
  • Complete any tasks that the team assigns to its members
  • Attend all meetings/classes and arrive on time
  • Actively participate during the team meeting in ways that further the work of the team
  • Help promote one another’s learning and success
  • Provide assistance, support, and encouragement to team members
  • Be involved in periodic self-assessments to determine whether the team is working successfully (Is the time in team meetings well spent?)

What is the process for working together to develop a website?

  • What are the challenges?
  • What are the benefits?

Questions for Teams

  • Deliverables: If you haven’t done so already, select final versions of the Client Survey, Personas, Competitive Analysis, Communication Brief, Schedule, Final Estimate, Site map, and Wireframes. Have you “branded” these documents and posted to your team WordPress.com site?
  • Visual Design: Do you have the final design for your final project? I suggest basing your design on one team member’s design comp, or a combination of two team members. What changes or modifications do you need to make?
  • Content: Based on your site map and wireframes, compile a document with the final content for the 9-12 pages of your site. Include text and images. This document will be used by the team to add content to each page.
  • Functionality: What additional functionality do you need to add to the site? (Example: secondary navigation, slideshows, calendar, Twitter feed, etc.) Who is responsible for researching and implementing these features?
  • WordPress theme: Have you selected your WordPress theme? Have you taken in consideration the functionality you’ll need for the site. Does the WP theme accommodate your logo? (Is there enough space to fit your requirements for the logo and branding)
  • Team Schedule: Who is going to do what, and by when? Put together a schedule of outstanding tasks and who is responsible for these tasks. Each team member should be responsible for creating some of the pages.

 

Leave a comment