Topics: Final Project Assignment, WordPress Installation. The Dashboard, Creating and Modifying Themes, Plugins, Embedded Media, How WordPress Works
Mark your calendars!
Spring Student Show 2012
Design Technology Department
Friday, May 18, 2012
6:00pm – 9:00pm
. . .
Midterm grades are posted. Everyone did well overall. Most of you followed the specifications and met the goals for the website very well. Your grade is based on whether you were successful finessing the finer details and whether your midterm project was complete. How well you did this is what determined your midterm grade.
If you haven’t uploaded/posted the following, please do as soon as possible:
Assignment 4 – Comm brief, estimate, budget
Assignment 5 – Apple iPod
Assignment 6 – Sitemap
Assignment 7 – Wireframe
Assignment 8 – Design Comp
- Take notes! It’s the best way to remember what we did during this demonstration.
- Work with a partner as each of you follow along on your own.
Differences between WordPress.org vs. WordPress.com
- 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
- 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:
- Ability to upload themes
- Ability to upload plugins
- Great community
- Complete control to change code if you’re technically minded
- 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:
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:
OK, once we have that’s let’s sign in.
Let’s change some setting right away:
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
Then we see the dashdoard interface for WordPress:
Admin Dashboard Tour:
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
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.
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.
Settings > Permalinks > Custom structure
This will give the page names the name of your post.
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
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.
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:
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.
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.
1. Modify the style.css file
2. Change font-family for blog title and h1 tags
3. Remove italics
/* Blog Name and Tagline */
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:
Below are a series of useful links I’ve found while modifying or building templates.
How to add Post Thumbnails:
How to set up a separate posts page in WP:
How to create a custom page in wordpress:
WordPress cheat sheet for themes:
Exclude pages from the nav:
Plug-in Solution: http://wordpress.org/extend/plugins/exclude-pages/
Add Post Thumbnail and Excerpt
Add Excerpts to a page:
Remove Page Title:
Create a custom logo on the Login page:
Create a custom URL for the Login page:
Widgetizing Themes: http://codex.wordpress.org/Widgetizing_Themes
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.
- Maintenance Mode
- Google Analytics for WordPress
- All in One SEO Pack
- Galleria WP
- Easy Contact
- Database backup (choose from several)
WordPress and Embedded Media:
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:
Open a Vimeo and YouTube movie:
Copy the Youtube or Vimeo embed code and paste it into your post or page in the HTML editor, not the visual editor.
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