Week 11

Week 11 – Topics

Final Project Assignment
Installation
The Dashboard
Creating and Modifying Themes
Plugins
Embedded Media
How WordPress Works


Assignment

Individually on your own:

Create and modify a WordPress site.

  • Pick a theme to work with for this exercise. Choose a theme that is suitable for the Design Technology website.
  • Create pages for the Design Technology website based on your site map.
  • Set up your menu system to reflect the site structure. Be sure to put the pages in a hierarchy as appropriate.
  • Add “dummy” content to your page. Add Widgets to your site. Appearance > Widgets.
  • Using the Editor, make changes to your CSS file (style.css) such as changing the font-family, color for the font, styling for your h1, h2, etc.
  • Install plug-ins and look for a plug-in you can use to create a slideshow/gallery.
  • Use this assignment to play with WordPress, it’s pretty difficult to “break,” but make sure you have a back up of your CSS file and any .php files you modify.

As a team (dividing up the work is a smart approach):

1) Pick a team leader and a name for your “studio.” Create a wordpress.com “studio” site that you can use as a project website to communicate with your “client” and you can post your documentation.

2) Make a decision on your final documentation. The deliverables due next week are the documentation you will base your final project on: Final versions of Client Survey, Personas, Competitive Analysis, Communication Brief,  Schedule, Final Estimate, Content Outline, Sitemap, Wireframes.  You will be graded on the visual design of this documentation so put together a set of documentation that is “client-ready.”

3) Review Themes to find one your team can use for the final project for the Design Technology website.


WordPress

  1. Take notes! It’s the best way to remember what we did during this demonstration.
  2. Work with a partner as each of you follow along on your own.
Differences between WordPress.org vs. WordPress.com

http://www.wordpress.com/

WordPress.com Benefits

  • It’s free and much easier to setup
  • Everything is taken care of: setup, upgrades, spam, backups, security, etc
  • Your blog is on hundreds of servers, so it’s highly unlikely it will go down due to traffic
  • Your posts are backed up automatically
  • You get extra traffic from blogs of the day and tags
  • You can find like-minded bloggers using tag and friend surfer
  • Your login is secure (SSL) so no one can get into your account if you use wifi

WordPress.com Cons

  • They provide 100+ themes (and adding more every day) which you can modify and edit the CSS, but you cannot run a custom theme
  • You can’t hack the PHP code behind your blog
  • You can’t upload plugins

The VIP program on WordPress.com for high-traffic and high-profile sites allows you to run custom themes, custom PHP code, ad code, and WordPress plugins.

Open Source Development Community for WordPress:
http://www.wordpress.org/

WordPress.org Benefits

  • Ability to upload themes
  • Ability to upload plugins
  • Great community
  • Complete control to change code if you’re technically minded


WordPress.org Cons

  • You need a good web host, which generally costs $7-12 a month, or thousands of dollars per month for a high traffic site
  • Requires more technical knowledge to set up and run
  • You’re responsible for stopping spam
  • You have to handle backups
  • You must upgrade the software manually when a new version comes out
  • If you get a huge spike in traffic your site will probably go down unless you have a robust hosting setup

Above information from the following article: http://en.support.wordpress.com/com-vs-org/

WordPress Installation Options

Host on WordPress.com for free: http://wordpress.com/

Custom install on your server: Most web hosting services have “1-click” install. You’ll have good control over our template, as well as the ability to upload custom ones. WordPress.tv has good instructional videos on installing WordPress: http://wordpress.tv/category/how-to/installation-how-to/

Logging in to WordPress

Go to wherever your site is installed. For example:
On your server: http://www.yoursite.com/wp-admin
Or for this class: http://cavanaugh.smcgrdes.com/grdes67/your_folder/wordpress/wp-admin

You’ll see the User and Password login window:

Wordpress Admin Login

You should have a user name and password from when you first set up your blog. (When you install, be sure to write down the username and password!)

For this class:
Username: admin
Password: WebDev4grdes

OK, once we have that’s let’s sign in.

Let’s change some setting right away:

Exercise 1
1. Change site title, tag line, and email:
Settings > General > Site Title, Tag line, Email

2. Change admin email to your own:
Users > Admin > Change Email
The Dashboard

Then we see the dashdoard interface for WordPress:

Wordpress Back Office Interface

Admin Dashboard Tour:

http://weblogtoolscollection.com/archives/2009/08/02/exploring-and-learning-about-wordpress-admin-dashboard/

Dashboard
Posts
Media
Links
Pages
Comments
Appearance
Plugins
Tools
Settings

Content Editing Tip #1

Edit WordPress using two browser tabs. One for your admin/dashboard panel, and another to view your site. Make your changes in one tab, and refresh the other tab to check it out. Simple enough, but not always readily apparent.

Creating Post versus Pages
Creating/Editing Posts

Quickpost: Available from the dashboard screen this allows to quickly create new post.

Create New Post: under the left hand menus of the dashboard we click POSTS and then there will be a button at the top of a new screen that says “Add New” Click it and you will be able to create a new post and modify content.

Creating Pages

Sometimes we want information on our sites not to appear in dated or time stamp entries so for this we create pages. To create pages, in the sidebar menu of your WordPress dashboard click the PAGES Link and it will take you to a menu where at the top there is a button that says “Add New” Click it and you should be taken into a new page, where you can set the title and modify content similarly to a post.

Content Editing Tip #2

In the visual editor, when you want a line to end, hit SHIFT + RETURN this gives a soft return/line beak, if you want a hard return(return with more space between lines) say at the between two paragraphs just hit RETURN. Just like a typewriter or word processor.

Setting a Static Homepage

The default setting for WordPress is to have the Blog with it’s chronological posts as the first thing we see when we come to a site. Often times though we want there to be a static page and then a link to the blog/posts. Fortunately without to much hassle we can set it up this way.

http://codex.wordpress.org/Creating_a_Static_Front_Page

Set permalinks

Settings > Permalinks > Custom structure
/%postname%/

This will give the page names the name of your post.

Exercise 2
1. Quick Edit: Sample pages and Sample posts: change to "Draft."
2. Settings > Reading > Front page displays: change to "A static page."
3. Turn off comments using Quick Edit.
4. Add other pages
5. Set permalinks
Switching Themes

WordPress uses a database to manage/store our content, one of the nice things about it is that we can change the appearance of this information relatively quickly by using a theme, or creating our own. Much like plug-ins we can search via Google or on the WordPress Theme directory. To switch themes:

Click the Appearance tab in your Dashboard menu. You’ll see two tabs at the top of the screen:

Manage Themes: Choose from available themes, Activate, Preview, Delete

Install Themes: Search for new ones or upload ones that you download or create. Once you have a new theme that will work, you want ot activate it on the Manage Themes page.

Modifying Themes

If we don’t build a theme from the ground up, often times we will hack and modify an existing theme. If we are logged into our WordPress admin Dashboard we can edit the theme CSS as well as the theme files. We have a couple of possible workflows though:

  • Edit theme files in the WordPress editor. Good, although no code highlighting, and no line numbering. Can make it tricky when you are starting out.
  • Edit theme files locally and upload the modified file via FTP to your theme directory on your server. Usually under WP-CONTENT > THEMES > YOUR THEME
  • Edit theme files locally and then upload the theme files as a .zip file via the WordPress theme uploader.

In general when modifying themes we want to find a theme that has the general structure of what our design is. Short of creating a theme from scratch this is a good place to start.

Go to Appearance > Themes > Chateau (Preview) then Activate.

In Appearance (using Chateau theme) notice the following:

Themes
Widgets
Menus
Theme Options
Background
Header
Editor

Exercise 3
1. Notice how the Chateau theme has options to customize the header, background, theme options...
    not all themes have these options. Therefore choose your theme wisely for a project.
2. In Themes Options > change layout to one column.
3. In Widgets, add a few widgets to the "Footer Widget Area"
4. In Menu, I'll demo how to create a drop down menu.
Custom Menus

Sometimes we want a custom menu structure. A lot can be done out of the box or via plug-ins, but there are ways to create custom menus via the dashboard. If you plan on doing custom menus, it’s best to have a theme that supports them from the get-go, but you can also make the theme support it, by modifying your functions.php file.

WP Custom Menus: http://codex.wordpress.org/Appearance_Menus_Screen

Adding Custom Menus to a Theme: http://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/

Modifying site using the Editor

Before doing anything to your CSS file, MAKE A COPY OF THE CSS FILE as  a backup.

Exercise 4
1. Modify the style.css file
2. Change font-family for blog title and h1 tags
3. Remove italics

/* Blog Name and Tagline */
#main-title {

Exercise 5
1. Preview your site choosing another theme: Appearance > Themes. Click on another theme and preview.
2. Install a different theme found online. We'll install the Academica theme found here:
http://www.smashingmagazine.com/2010/08/29/academica-free-wordpress-theme-for-educational-websites/
Useful Links:

Below are a series of useful links I’ve found while modifying or building templates.

How to add Post Thumbnails:
http://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/

How to set up a separate posts page in WP:
http://www.wpbeginner.com/wp-tutorials/how-to-create-a-separate-page-for-blog-posts-in-wordpress/

How to create a custom page in wordpress:
http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/

WordPress cheat sheet for themes:
http://www.wpbeginner.com/wp-themes/wordpress-theme-cheat-sheet-for-beginners/

Exclude pages from the nav:
http://www.wpbeginner.com/wp-tutorials/how-to-exclude-pages-from-the-menu-in-wordpress/
Plug-in Solution: http://wordpress.org/extend/plugins/exclude-pages/

Add Post Thumbnail and Excerpt
http://www.dynamicwp.net/articles-and-tutorials/quick-tip-make-a-post-automatic-excerpt-with-image-thumbnail-on-wordpress-2-9/

Add Excerpts to a page:
http://wordpress.org/extend/plugins/page-excerpt/installation/

Remove Page Title:
http://wordpress.org/support/topic/remove-page-title-1

Create a custom logo on the Login page:
http://www.wpbeginner.com/wp-tutorials/how-to-change-the-login-logo-in-wordpress/

Create a custom URL for the Login page:
http://www.wpbeginner.com/wp-tutorials/how-to-change-the-login-logo-url-in-wordpress/

Widgetizing Themes: http://codex.wordpress.org/Widgetizing_Themes

Plugins

Key to the WordPress universe are plug-ins, which are custom bits of code made for reuse that expand the functionality of our blog. These run the gamut from galleries to shopping carts and all points in between. Likewise the implementation varies, but the process is generally the same.

  • Find the plug-in. Search via Google or the WordPress Plugin directory.
  • Download plugin file as a zip file.
  • Upload to your site via the plugin uploader, which is accessed via the Plugin tab on the dashboard menu.
  • Activate the plugin.
  • Read the documentation, see if you can make it work.
Suggested Plugins
  • Maintenance Mode
  • Google Analytics for WordPress
  • Akismet
  • All in One SEO Pack
  • YouTuber
  • iframe
  • Galleria WP
  • Easy Contact
  • Sociable
  • Database backup (choose from several)
WordPress and  Embedded Media:
Embedding Images

We can embed images relatively easy using the WordPress content editor. The icon for inserting an image is right above the text editor in the post/page editor. It looks like this:

Wordpress Insert/Upload Image Icon

Embedding Movies

Open a Vimeo and YouTube movie:
http://vimeo.com/6996147
http://www.youtube.com/watch?v=WGTp1RSrGWc

Copy the Youtube or Vimeo embed code and paste it into your post or page in the HTML editor, not the visual editor.

Embedding Flash

You have to use a plug-in in order to embed a .SWF file in a page.
Seach for plug-ins or use this one, which has a fairly simple method and good documentation:http://kimili.com/plugins/kml_flashembed/wp

How WordPress Works

How wordpress works info graphic

 



Comments

  1. Casey Sullivan November 17th

    Comment Arrow

    hungerdesign.wordpress.com


Add Yours

  • Author Avatar

    YOU


Comment Arrow

Powered by WP Hashcash




About Author

jamie

Instructor for Graphic Design 67