Week 5: WordPress Continued

Homework | Week 4 | Review

  1. Complete the website questionnaire and upload it to your blog NO LATER THAN FRIDAY. Notify your partner once it’s uploaded.
  2. Once you’ve read your partners website questionnaire, upload a list of questions you have for them and upload it to your blog. Share the link with your partner. The questions may pertain to clarifying what they wrote.
  3. Complete your competitive analysis in reference to your partner’s website questionnaire and upload to your blog. Please share it with your partner.
  4. A few important guidelines we need to consider when working your partner:
    • If your partner is in the developmental stages (their content is not completed or in one place), it can be really difficult to design a site for them as their plans and objectives shift around.
    • There are WordPress plugin’s for-commerce (online shopping) component of the site, so don’t let that scare you.
    • Make sure you set up a Google Calendar with a schedule for deliverables and email it to your partner. It will important for when you start listing deadlines for approvals and materials/files you will need for the website build.
    • Create a folder in your DROPBOX account and invite your partner to share the folder. Inside the folder create a sub folder name images, another named documents.
  5. IF YOU DO NOT have your own URL AND WEB HOSTING space, email me and I will set one up on my personal server.
  6. READ: The Web Development Process
  7. Code your Mobile Web Leaflet Page and upload to your MSU web server.
  8. The ENTIRE Mobile Web Leaflet project is due at the beginning of class on week 5.
  9. On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 4, week 5, week 6, etc. in your comments section so that I can keep track of your comments. *Make sure you also add the tag: msuinteractivemedia AS WELL AS add additional tags.

WordPress Partners

  • Jocelyn & Laura
  • Meghan D. & Ray
  • Leah & Megan Naef
  • Kristin & Liz
  • Cristina & Kristen & Nicole
  • Jade & Jesus
  • Michelle &  Megan P.
  • Paul & Rhianna

Week 5 | Overview


TED TALKS | BEST OF THE WEB
Kid President: I think we all need a pep talk


WordPress Portfolio Project

YOU should have COMPLETED the CLIENT SURVEY and SHARED it with your WordPress partner.

YOU should have COMPLETED the COMPETITIVE ANALYSIS  and SHARED it with your WordPress partner.

IF you don’t have a WordPress partner, notify me immediately!

This week you should be getting content from your partner.

  • Did you create a Google Calendar with deliverable dates?
  • Did  you create a Dropbox folder and share it with your partner?

Content Development

Your “client” has delivered the CLIENT SURVEY (website questionnaire) to you and you’ve sent them your response in the COMPETITIVE ANALYSIS. Now you have a clear roadmap for what they want and can now move on to creating a SITE MAP for them.

SITE MAP SHOULD BE SIGNED OFF ON BY THE END OF CLASS TODAY.

Next phase: Content Development

This is the stage where the information that is going to appear on the website needs to be collected from your client and delivered to you in an informative and easily understood format. You should have already created a Dropbox folder for your “client” and shared it with them. Inside that folder should be sub folders. Example:

FTP Organized


Examples of some of the main page types:

  • Home
  • About
  • Resume
  • Portfolio
  • Contact
  • News / Updates / Blog

In you GOOGLE CALENDAR, create content delivery deadlines for your “client” .


Design Phase:


A sample template to keep your project schedule up to date.


WordPress: Getting Started

Logging In

 

Every WordPress site has two faces: One that the public sees, and a private view called “The Dashboard” for authors and editors.

This login link is your URL/wp-admin

Example:

http://example.com/wp-admin

A page with the image below will appear.

DON’T click the Remember Me if your on an MSU or public computer. Clicking the Remember Me checkbox will cause your browser to remember your login session for 14 days and anyone will be able to login to your dashboard.


Set Your Byline and Password

In the Dashboard, take a look at your personal “profile” page, which you can get to by clicking your name or username at the top right of the WordPress interface:

admin name

There are three important things to take care of right away:

1) Most WordPress installers only ask for a username but if your want your full name to appear on the posts your make, fill in your full name. It’s just more professional.. Scroll down to the Name section and enter your first and last name.

2) Once those have been entered, click on the dropdown labeled “Display name publicly as” and select your full name:

admin name

3) At the bottom of the Profile editor you’ll find two fields where you can enter a new password. CHANGE your password to something you can remember and enter the password you want to use, twice.  


WordPress – getting started 

Everything you need to get started with the WordPress content management system, including installation, setting up pages, managing themes and adding plugins.

 

 


FREE WORDPRESS PLUGINS FOR COMING SOON PAGES

IF your hosting your own site, you may want to consider  installing a coming soon “plugin”.

Coming soon pages play a vital role in keeping your potential visitors in touch when your website is not yet live allowing you to build the site without visitors seeing the actual site.

 

 


 

INTRO TO WORDPRESS THEMES

What is a Theme?

A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.

A WordPress “theme” generally consisting of:

  • One or more CSS style sheets
  • Any necessary images that comprise the theme graphics
  • A collection of PHP/HTML “template” files
  • A thumbnail image representing the theme in the Dashboard

A typical WordPress theme contains a dozen or more files, but only a few are technically required.

These files work together as a package to define the entire look and feel – and sometimes behavior – of a WordPress site. Themes are completely decoupled from site content, so a site owner can apply a new theme with the click of a button and have all content on their site take on a whole new appearance.

This collection of files is contained in a folder that lives in the wp-content/themes directory on your web server. When an administrator visits the Appearance | Themes section of the WordPress Dashboard, all valid theme folders in that location will appear. Any valid theme can be applied to the site content by clicking the Activate link below its name.

Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the WordPress.org site or Google “free WordPress themes”.


CHOOSING THEMES

When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 3.5). Many new features were introduced in WordPress 3.0, and you want to make sure to take advantage of them.

RESPONSIVE THEMES

A responsive WordPress theme is a theme built to adapt it’s design to tablets and smartphones, creating a great user experience. Previously, dedicated WordPress mobile themes was the best option, but in 2013, responsive WordPress themes are the hot new trend. With the rapid growth of smartphones, tablet computers and Internet enabled gadgets, we have to take mobile web design seriously and ensure that your theme is can be viewed easily on any mobile device.

Responsive web design allows your website content to be displayed correctly by adjusting the layout to accommodate screens of different orientation and sizes. From a branding perspective, responsive themes allow you to maintain one theme and provide one consistent look and feel no matter how visitors access your website. This is a huge money saver for clients as there is not longer the need for mobile versions of websites. To test responsive layouts, check out some responsive web design tools.


Checking Your Themes

A quick note on downloading and installing themes. There are thousands of FREE and PREMIUM themes out there and not everyone is as honest and straightforward as we hope they’d be. It’s good practice to check your themes prior to installing them.

Take a look at: TAC (Theme Authenticity Checker)

Scan all of your theme files for potentially malicious or unwanted code. Be aware of advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.

Future versions will allow to check for other theme vulnerabilities. CHECK YOUR THEMES BEFORE INSTALLING THEM!


Installing Themes

There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes

To install a NEW theme that is not currently available through your WordPress panel, do the following.

  1. Go into your ADMIN panel
  2. Go to APPEARANCE
  3. Go to THEMES
  4. Click on INSTALL THEMES
  5. Click on UPLOAD and upload the theme that you’ve already downloaded from the web and saved to your hard drive
  6. Click on BROWSE and UPLOAD the theme
  7. Click on INSTALL and then PREVIEW

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme. “Paid” themes usually offer you more options and more documentation.


CUSTOM MENUS

Most up to date themes allow you to add at least one custom menu to your site. You can build a menu of links to categories, pages and custom links.

 

 

 


Beginner’s Guide to WordPress Menus

Paul Kaiser explains the menu system basics and how to start using them on your site. Working with the original WordPress menus WordPress menu management to the rescue.

Drag, drop, and done

RESOURCE:Read more about WordPress menus.

Building Menus

Your site’s navigation menu is generally a combination of Categories and Pages, as shown in this example:

Menu1

Categories are shown here in red, while the other three links are to Pages in the system.

Prior to WordPress 3.0, menu building was a semi-manual process. There are WordPress function calls that can be inserted into a theme’s header.php template file, which will automatically pull in a hierarchy of nested pages, or of categories and their subcategories. However, that system required users to touch the HTML/PHP of the site (many users aren’t comfortable with this), and made it tricky to precisely control the order of items in the menu, or to exclude certain items.

WordPress 3 introduced a new “Menus” system which has made menu construction much, much easier. If your currently active theme is designed to support Menus, you’ll see a “Menus” link in the Appearance section of the Dashboard sidebar:

Menus2

If that entry doesn’t appear in your Appearance manager, you’ll need to edit your theme’sheader.php template file, remove the code that currently builds menus, and replace it with a bit of new code. That process is well-described here. For now, we’ll assume that your theme already has Menu support.

WordPress can actually support the use of multiple menus on a site. To get started, you’ll need to name at least one menu in the system – may as well call it “Main”:

Menus3

Once you’ve saved a blank menu, you’ll need to attach it to a location. In the default “2010” theme that comes with WordPress, the main named location is called “Primary Navigation.” Associate your “Main” menu with the “Primary Navigation” location:

Menus4

With that done, you can now begin dragging menu sections from the left side of the page to the “Main” menu drawing area at the right, in much the same way as you built your collection of Widgets.

Start by checking the boxes for some or all of your Categories at the lower left, then click Add to Menu:

Menus5

The selected categories now appear in the menu builder:

Menus6

To change the order of the menu, try dragging the category entries up or down. Click Save Menu, then take a look at your live site. Want to see something even cooler? Try dragging one of your menu items a bit to the right, so that one category is nested under another:

Menus7

Now take another look at your live site – the hierarchy of categories will be translated into nested “fly-out” menus on your site.

Now try adding some of your Pages to the menu, in the same way. You might want to arrange it so your menu shows one page, then three categories, then another page, or whatever you like.

Finally, take a look at the Custom Links section on the left of the Menu builder. Create a Custom Link to your homepage by entering a URL of “/” (or whatever is relevant for your site) and a label of “Home”:

Menus9

Of course, custom links can go to any page or post on your site, or even to other pages on the web! Drag the new custom link to the top of the menu and save.

Menus10

Using this system, categories and pages no longer show up automatically in your menus, but you’ll find that you have much more control, and end users will have far less need to call in developers to build their menus.

If you do decide you want newly added top-level pages to be added to your menu automatically, check the box labeled “Automatically add new top-level pages” near the top of the menu builder.


Sidebars and Widgets

Most WordPress themes include at least one “sidebar”, an area to the right or left of the page content that can contain a variety of things, including search, lists of recent posts, your blogroll, and admin links. These components are called widgets, and are managed through the widgets panel. Some themes also support the addition of widgets in other areas of the site, such as the headers and footers.

 


 

Mastering The WordPress Visual Editor

wysiwyg-big

What You See Is What You Get Add, Edit & Remove Links Insert More Tag Fullscreen Mode Headers & Paragraph Types Paste As Plain Text/Paste From Word Remove Formatting Insert Special Character

RESOURCE:The WordPress Visual Editor


 

HTML vs. Visual Modes

 

When editing a post or page, you can select either Visual or HTML mode at the top right of the editing area.

Visual mode is similar to using Microsoft Word, and lets you work without seeing or touching any HTML code. But note that the Visual mode does not completely reflect how things will appear on your live site, since your final design is controlled by the CSS stylesheets in your theme, while the Dashboard focuses on the structure of your content.

HTML mode offers advanced users an added level of control when formatting media and text (i.e. there are many more HTML tags in existence than are represented by the toolbar icons). HTML mode is also used when you need to insert “embed” code in your posts, such as the code provided by YouTube for embedding videos in other sites. We’ll come back to that.

If you prefer to stay in HTML mode permanently, you can disable the Visual mode from your Dashboard Profile page (click your name at the top right of the Dashboard).

You’ll notice that the formatting toolbar icons also change when you switch to HTML mode. The purpose of most of them should be fairly clear, but see the toolbars appendix for full descriptions.

NOTE: When copying text from Microsoft Word or other websites, paste it into the TEXT mode – HTML, and the formatting will be deleted.


HOMEWORK | Week 5

  • Review the client survey’s and make notes and questions about things you are unsure of . Email your client with these questions and post those questions to your blog. Your client needs to respond to your questions by Friday at 5pm.
  • Update your Google Calendar, adding deliverables deadlines for resume, portfolio, contact, skills, artist statement, images and home  page and share this with your client.
    • Create a site map and share it with your client.
    • Here’s an example:
    • Sitemap
    • Start sorting through the files that your clients are sending you and prep the images making and color corrections on contrast corrections necessary.
    • Sort your content by page and put the text/images/video in the correlating folders on your DropBox. Take a screenshot of your DropBox folder and upload it to your blog.
    • Make a list of missing or needed items and relay the information to your client. Give them a deadline.
    • Finalize your site map and get your clients approval. List the site map on your blog.
    • By next weeks class you should have a final site map and a clear vision for your client’s website. Go page by page and think about how you will start laying out the information. With a finalized sitemap , start drawing some wireframes to see how all the content will fit on your site.
    • Settle on a theme with your client’s approval and install the theme.
    • Build your menus.
    • Set a deadline for your client to deliver their portfolio images.
  • On week 6 give me the URL to your blog and your client’s URL where the WordPress site is located.
  • On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 4, week 5, week 6, etc. in your comments section so that I can keep track of your comments. *Make sure you also add the tag: msuinteractivemedia AS WELL AS add additional tags.

***Earn 10 points extra credit by going to the MSU women’s basketball playoff’s and cheering them on!***