WordPress 2.5 Overview - Rich Media Institute

3,132 views

Published on

“A Full day of WordPress2.5, focused on design and development. We’ll cover the essentials of setup, installation, and management. We’ll learn how to build custom themes using CSS, PHP, and image
architecture. We’ll also jump into custom code and template files, best practices for design and management, integrating Flash, and how to build and install WP and custom plug-ins.”

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,132
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress 2.5 Overview - Rich Media Institute

  1. 1. WordPress 2.5 Workshop Rich Media Institute Brendan Sera-Shriar BackSpaceStudios.com
  2. 2. WordPress 2.5 Workshop <ul><ul><ul><ul><ul><li>What is WordPress and why 2.5? </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>What can WordPress be used for? </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Basic Installation and Setup </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Basic Configuration </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>The Dashboard </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Plug-ins </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>WP Architecture </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Template Files </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Conditional Tags </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>WordPress and CSS </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Resources </li></ul></ul></ul></ul></ul>
  3. 3. What is WordPress and why 2.5? <ul><li>“ WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time.” – WordPress.org </li></ul><ul><li>Basically WordPress can be used for any web based application or portal that requires the use of a CMS (Content Management System). </li></ul><ul><li>Why 2.5? </li></ul><ul><ul><ul><li>There is little difference between 2.5 and 2.6 </li></ul></ul></ul><ul><ul><ul><li>WordPress 205 is the most commonly used version </li></ul></ul></ul>
  4. 4. What can WordPress be used for? <ul><li>WordPress has changed a lot since its inception. WordPress was originally developed as blogging software. Today it can be used for anything that requires a CMS! </li></ul><ul><li>WordPress can power Standard Blogs, Online Communities, and Commercial or Personal Websites. At BackSpaceStudios, we use WordPress for almost all our CMS development at level of business, development, and design, we are even using WordPress now to power Flash Sites! </li></ul>
  5. 5. Basic Installation and Setup <ul><ul><li>There are 2 ways to install WordPress: </li></ul></ul><ul><ul><ul><li>A lot of Web Host Providers have “One Click Installs” for WP. *However this is not recommended! </li></ul></ul></ul><ul><ul><ul><li>Do it yourself! Install you MySQL database, setup the </li></ul></ul></ul><ul><ul><ul><li>wp-config file and run the install. </li></ul></ul></ul>
  6. 6. Basic Configuration <ul><li>The “Do It Yourself” option! </li></ul><ul><ul><li>Setup the MySQL database. *Make sure your host provider allows for this. If you don’t know how to setup the DB, get someone to help you! </li></ul></ul><ul><ul><li>Modify the wp-config-sample.php file. This file is located in the WordPress directory. </li></ul></ul><ul><ul><ul><li>Open this file in Notepad, Dreamweaver, or any code editor </li></ul></ul></ul><ul><ul><ul><li>You will need to modify lines 3-6. </li></ul></ul></ul><ul><ul><ul><ul><li>define('DB_NAME', 'putyourdbnamehere'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>define('DB_USER', 'usernamehere'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>define('DB_PASSWORD', 'yourpasswordhere'); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>define('DB_HOST', 'localhost'); </li></ul></ul></ul></ul><ul><ul><ul><li>*Some host providers will allow you to use localhost. If not when you install your DB, </li></ul></ul></ul><ul><ul><ul><li> the DB_HOST address will provided for you. </li></ul></ul></ul><ul><ul><li>3. Re-save the file as wp-config.php </li></ul></ul>
  7. 7. Basic Configuration <ul><li>The “Do It Yourself” option! </li></ul><ul><ul><li>Cont… </li></ul></ul><ul><ul><li>Upload the entire wordpress directory to your FTP. *Make sure you put it in the directory where your site will be. </li></ul></ul><ul><ul><li>Go to http://www.yourwebsite.com/wp-admin/install.php . WordPress provides an install file that will use the information you entered in the wp-config.php file. It will install WordPress to your new DB, enter sample data, and setup the basic WordPress configuration. </li></ul></ul><ul><ul><li>Just follow the easy step on screen installation and your good to go! </li></ul></ul>
  8. 8. The Dashboard <ul><li>The Dashboard tells you about recent activity both at your site and in the WordPress community at large. </li></ul><ul><li>The Dashboard SubPanel provides you a number of links to start writing Posts or Pages, statistics and links on the number of posts, pages, Categories, and Tags. A Recent Comments box shows the number of Comments awaiting moderation and a list of the recent comments. Configurable boxes of Incoming Links, and RSS feeds from the WordPress Development Blog, the Plug-ins blog, and Planet WordPress are also displayed. </li></ul>
  9. 9. Standard 2.5 Dashboard
  10. 10. <ul><li>Login into your WordPress account and we will walk through the Dashboard. </li></ul>
  11. 11. Plug-ins <ul><li>“ Plug-ins can extend WordPress to do almost anything you can imagine.” </li></ul><ul><li>-WordPress.org </li></ul><ul><li>Well almost! There is a limit to what a plug-in can do. Quite often in order to achieve the desired functionality there is some customization of code required. </li></ul><ul><li>WordPress plug-ins help enhance and simplify the blogging experience of advanced users , especially web developers and designers. </li></ul>
  12. 12. Plug-ins vs. Widgets <ul><li>What is a Widget? </li></ul><ul><li>WordPress Widgets are WordPress Plug-ins or add-ons exclusive to your sidebar. WordPress Widgets allow the easy addition of design elements, content, images, etc., without knowing HTML, PHP, or any code. Many WordPress Plug-ins now come with a Widget version to allow easy addition to the sidebar. </li></ul><ul><li>Widgets are great for individuals who are not developers but manage a WordPress site. They require very little customization and are easy to manage. </li></ul><ul><li>Cons </li></ul><ul><li>You can’t customize a widget! This means you have to use them as is which makes it difficult to add the functionality you need. </li></ul><ul><li>Widgets are very basic and do not allow for extending, modifying beyond the bundled options, skinning, and anything else you can do with a plug-in. </li></ul>
  13. 13. <ul><li>Login into your WordPress account and we will walk through plug-ins and widgets. You will need to download these files. </li></ul><ul><li>http://www.backspacestudios.com/RMI/cforms.5.52.zip </li></ul><ul><li>( A basic contact form plug-in ) </li></ul><ul><li>http://www.backspacestudios.com/RMI/wp-polls.2.31.zip </li></ul><ul><li>( A basic poll widget ) </li></ul>
  14. 14. Customizing WP Plug-ins <ul><li>Not all plug-ins work out of the box! A good majority of powerful and essential plug-ins will require some customization. This means CODE! </li></ul><ul><ul><li>A blogger with basic to expert knowledge of HTML/CSS, and for a lot plug-ins, PHP and MySQL experience is highly recommended. </li></ul></ul><ul><ul><li>A blogger who needs to display complex content in posts and pages like displaying and colorizing code snippets, running custom scripts only on certain posts or pages, incorporating custom web forms, etc. </li></ul></ul><ul><ul><li>A blogger who knows what they’re doing - The default configuration of WordPress is too &quot;fool-proof&quot;. For example, with the visual editor turned on, it will add unexpected indents and line breaks even inside <pre> tags. Additionally, it blocks you from adding <div> tags, automatically &quot;sanitizing&quot; them into <p> tags. </li></ul></ul>
  15. 15. BackSpaceStudios Extended/Custom Plug-Ins Custom Logins
  16. 16. BackSpaceStudios Extended/Custom Plug-Ins Login Redirect
  17. 17. BackSpaceStudios Extended/Custom Plug-Ins Random Flash Loader
  18. 18. BackSpaceStudios Extended/Custom Plug-Ins Event Calendar
  19. 19. BackSpaceStudios Extended/Custom Plug-Ins Custom Admin – Current Post View
  20. 20. BackSpaceStudios Extended/Custom Plug-Ins Custom Admin – DashView
  21. 21. BackSpaceStudios Extended/Custom Plug-Ins 1 WordPress Install, 2 designs – Custom MU
  22. 22. WP Architecture <ul><ul><li>The Main page </li></ul></ul><ul><ul><ul><li>home.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>Single Post page </li></ul></ul><ul><ul><ul><li>single.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>WordPress Page </li></ul></ul><ul><ul><ul><li>page.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>Category page </li></ul></ul><ul><ul><ul><li>category.php </li></ul></ul></ul><ul><ul><ul><li>archive.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul>
  23. 23. WP Architecture <ul><ul><li>Cont… </li></ul></ul><ul><ul><li>Search Result page </li></ul></ul><ul><ul><ul><li>search.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul><ul><ul><li>404 (Not Found) page </li></ul></ul><ul><ul><ul><li>404.php </li></ul></ul></ul><ul><ul><ul><li>index.php </li></ul></ul></ul>
  24. 24. WP Architecture <ul><ul><li>Cont… </li></ul></ul><ul><ul><li>Directory Breakdown </li></ul></ul><ul><ul><li>The main WordPress directory consists of 3 sub directories. </li></ul></ul><ul><ul><ul><li>wp-admin </li></ul></ul></ul><ul><ul><ul><li>wp-content </li></ul></ul></ul><ul><ul><ul><li>wp-includes (you will never need to touch it) </li></ul></ul></ul><ul><ul><li>wp-admin </li></ul></ul><ul><ul><li>Contains all the files for the control panel (the dashboard) </li></ul></ul><ul><ul><li>wp-content </li></ul></ul><ul><li>Contains 2 important sub-directories, plugins (where you upload all your plug-ins) and themes (where you upload all you themes) </li></ul>
  25. 25. Template Files <ul><li>WordPress Templates fit together like the pieces of a puzzle to generate the web pages on your WordPress site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions. </li></ul><ul><li>There are 2 kinds of Templates in WordPress, first, the standard Template files discussed in ‘WP Architecture’, and second, custom Templates used to develop a modified/custom theme. </li></ul>
  26. 26. Template Files <ul><li>Cont… </li></ul><ul><li>Why should you build your own WordPress Theme? </li></ul><ul><ul><li>It's an opportunity to learn more about CSS, HTML/XHTML, and PHP. </li></ul></ul><ul><ul><li>It's an opportunity to put your expertise with CSS, HTML/XHTML, and PHP to work. </li></ul></ul><ul><ul><li>It's creative. </li></ul></ul><ul><ul><li>It's fun (most of the time). </li></ul></ul><ul><ul><li>If you release it to the public, you can feel good that you shared and gave something back to the WordPress Community (okay, bragging rights!) </li></ul></ul><ul><ul><li>Most importantly, you can add all the functionality and designed required for your project. </li></ul></ul>
  27. 27. Template Files <ul><li>Cont… </li></ul><ul><li>The WordPress Page Structure </li></ul><ul><li>A simple WordPress web page structure is made up of three basic building &quot;blocks&quot;: a header, the content, and a footer. Each of these blocks is generated by a template file in your current WordPress Theme. </li></ul><ul><li>The header contains all the information that needs to be at the top — i.e. inside the <head> tag — of your XHTML web page, such as the <meta> tags and links to style sheets. It also includes the opening <body> tag and the visible header of your blog (which typically includes the title of your site, and may also include navigation menus, a logo bar, etc.). </li></ul><ul><li>The content block contains the posts and pages of your blog, i.e. the &quot;meat&quot; of your site. </li></ul><ul><li>The footer contains the information that goes at the bottom of your page, such as links, copyright and contact information, and other details. </li></ul>
  28. 28. Template Files <ul><li>Cont… </li></ul><ul><li>Basic Template Files </li></ul><ul><li>To generate such a structure within a WordPress Theme, start with an index.php template file in your Theme's directory. This file has two main functions: </li></ul><ul><ul><li>Include or &quot;call&quot; the other template files </li></ul></ul><ul><ul><li>Include the WordPress Loop to gather information from the database (posts, pages, categories, etc.) </li></ul></ul><ul><li>For our simple structure, we only need to include two other template files: the header and the footer . These must be named header.php and footer.php . The Template Tags that include them look like this: </li></ul><ul><li><?php get_header(); ?> </li></ul><ul><li><?php get_footer(); ?> </li></ul><ul><li>In order to display the posts and pages of your blog (and to customize how they are being displayed), your index.php file should run the WordPress Loop between the header and footer calls. </li></ul>
  29. 29. Template Files <ul><ul><li>Cont… </li></ul></ul><ul><ul><li>More Complex Page Structures </li></ul></ul><ul><ul><ul><ul><ul><li>Header </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Content </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Sidebar </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Footer </li></ul></ul></ul></ul></ul><ul><li>Many WordPress themes include one or several sidebars that contains navigation features and more information about your website. The sidebar is generated by a template file called sidebar.php . It can be included in your index.php template file with the following template tag: </li></ul><ul><li><?php get_sidebar(); ?> </li></ul>
  30. 30. Template Hierarchy
  31. 31. <ul><li>Let’s take a look at the code. Download the following files. </li></ul><ul><li>http://www.backspacestudios.com/RMI/VectorLover1-0.zip </li></ul><ul><li>( A basic CSS theme we will modify ) </li></ul><ul><li>http://www.backspacestudios.com/RMI/npp.4.8.5.Installer.zip </li></ul><ul><li>( A great open source code editor, this is optional ) </li></ul>
  32. 32. Conditional Tags <ul><li>The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog. With the is_home() Conditional Tag, that task is made easy. </li></ul><ul><li>Conditional tags are easy ways to call WP functions without having to write lines of code. You can write complex functions using a combination of Tags and PHP in order to achieve a function or method that does not exist in the WP codex. </li></ul><ul><li>Also, by using a combination of Tags and PHP you can customize how your content is being displayed without having to write 100’s of lines of code. </li></ul>
  33. 33. Conditional Tags <ul><li>Cont… </li></ul><ul><li>Lets take a look at how we can write a custom function with conditional tags. For example; we have a page called ‘blog’ and on this page we only want to display content from category 1. We use the following method. </li></ul><ul><ul><li><?php </li></ul></ul><ul><ul><li>if (is_page('blog')) { </li></ul></ul><ul><ul><li>query_posts(&quot;cat=-1&quot;); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>?> </li></ul></ul>
  34. 34. Conditional Tags <ul><li>Cont… </li></ul><ul><li>Lets see another useful example. If you have more than one style sheet you can write a method determine which one is loaded depending on which page is currently being displayed. </li></ul><ul><ul><li><?php if ( is_home()) { ?> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;<?php bloginfo('stylesheet_url'); ?>&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </li></ul></ul><ul><ul><li><?php } else { ?> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;<?php bloginfo('stylesheet_directory'); ?>/style2.css&quot; type=text/css&quot; /> </li></ul></ul><ul><ul><li><?php endif; ?> </li></ul></ul>
  35. 35. WordPress and CSS <ul><li>WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate your WordPress site's look. </li></ul><ul><li>On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can &quot;float&quot; in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder. </li></ul>
  36. 36. WordPress and CSS <ul><li>Cont… </li></ul><ul><li>In addition to CSS style information for your theme, the stylesheet, style.css must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first. </li></ul><ul><li> /* </li></ul><ul><ul><li>Theme Name: Rose </li></ul></ul><ul><ul><li>Theme URI: the-theme's-homepage </li></ul></ul><ul><ul><li>Description: a-brief-description </li></ul></ul><ul><ul><li>Author: your-name </li></ul></ul><ul><ul><li>Author URI: your-URI </li></ul></ul><ul><ul><li>Template: use-this-to-define-a-parent-theme--optional </li></ul></ul><ul><ul><li>Version: a-number--optional </li></ul></ul><ul><ul><li>*/ </li></ul></ul>
  37. 37. <ul><li>Lets take a look at style.css. </li></ul>
  38. 38. <ul><li>Bridging Two Worlds! </li></ul><ul><li>FlashPress is an extension to WordPress, which allows Flash designers/developers to use the WordPress engine to communicate with a Flash site. The use of the WordPress CMS in Flash overcomes many obstacles involved with maintaining and updating a Flash site. </li></ul><ul><li>The FlashPress development thread is restricted to contributors of this group. If you would like to contribute to this project please contact us at [email_address] </li></ul><ul><li>Launching soon http://www.flashpress.ca and http://www.flashpressdevelopers.com </li></ul><ul><li>We will be launching FlashPress at FITC Toronto 2009! </li></ul>
  39. 39. <ul><li>FREE PHUG Workshops </li></ul><ul><li>Current Scheduled Workshops: </li></ul><ul><li>FlashPress – Flash management Solutions by PHUG </li></ul><ul><li>Drupal </li></ul><ul><li>Papervision3D - Using Papervision3D and Parallax to build environments </li></ul><ul><li>Firefox UI Design </li></ul><ul><li>Flash Media Server and BeatMaker </li></ul><ul><li>Open Source in the Real World </li></ul><ul><li>Adopting Opens Source Commercially </li></ul><ul><li>We would like to thank some of our sponsors and affiliates: </li></ul><ul><li>PHUG, Lifecapture Interactive Inc., BackSpaceStudios, Mozilla Firefox, WordPress.org, Drupal.org, </li></ul><ul><li>BNOTIONS, FITC ( Flash In The Can ), RMI ( Rich Media Institute ) </li></ul><ul><li>If you would like to present or no someone who does we are still taking applications. Please send us an </li></ul><ul><li>email at [email_address] </li></ul><ul><li>http://workshops.phug.ca </li></ul>
  40. 40. Resources <ul><ul><li>http://www.backspacestudios.com </li></ul></ul><ul><ul><li>http://www.phug.ca </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Working_with_WordPress#WordPress_Features </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Template_Hierarchy </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Conditional_Tags </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Templates </li></ul></ul><ul><ul><li>http://codex.wordpress.org/Customizing_Your_Sidebar </li></ul></ul><ul><ul><li>http://www.tamba2.org.uk/wordpress/graphicalcss/ </li></ul></ul><ul><ul><li>http://www.ndesign-studio.com </li></ul></ul><ul><ul><li>http://www.webdesignerwall.com </li></ul></ul><ul><ul><li>http://bloggingsquared.com </li></ul></ul><ul><ul><li>http://automattic.com </li></ul></ul><ul><ul><li>http://www.blog.spoongraphics.co.uk </li></ul></ul><ul><ul><li>http://www.webappers.com </li></ul></ul><ul><ul><li>http://www.wppotential.com </li></ul></ul>
  41. 41. Thank You <ul><li>WordPress 2.5 Workshop at RMI </li></ul><ul><li>Brendan Sera-Shriar, Owner BackSpaceStudios </li></ul><ul><li>http://www.backspacestudios.com </li></ul><ul><li>[email_address] </li></ul><ul><li>Founder of PHUG – Open Source Culture </li></ul><ul><li>http://www.phug.ca </li></ul>

×