Intro to Wordpress Development Clinton Warren, 2012 About Me Developer @ Kim Ronemus Design (Monday –Wednesday), TechCare LLC (Thursday), Clinton Warren Web.
Download ReportTranscript Intro to Wordpress Development Clinton Warren, 2012 About Me Developer @ Kim Ronemus Design (Monday –Wednesday), TechCare LLC (Thursday), Clinton Warren Web.
Intro to Wordpress Development Clinton Warren, 2012 About Me Developer @ Kim Ronemus Design (Monday –Wednesday), TechCare LLC (Thursday), Clinton Warren Web Design (Friday – Sunday) www.clintonwarren.com Call me: 617-501-3995 Email me: [email protected] Other interests: Brazilian Jiu-Jitsu,Yoga, Crossfit, Strongman competitions, writing, reading, What We’ll Cover What is development? Why develop for Wordpress? How Wordpress works – theme structure Template tags The Loop Build a basic theme from scratch No one gets this the first go round…sit back, hold questions til the end, and I will answer all of them http://clintonwarren.com/intro-to-wordpressdevelopment/ What is Development? Designers vs. Developers Opportunities for Development in Wordpress Theme Development Plugin Development Core Wordpress Development Extremely fast growing industry Always in demand “GSD” What is Wordpress? PHP / MySQL powered content management system How Themes Work Theme File Structure header.php - Contains everything you'd want to appear at the top of your site. index.php - The core file that loads your theme, also acts as the homepage (unless you set your blog to display a static page). sidebar.php - Contains everything you'd want to appear in a sidebar. footer.php - Contains everything you'd want to appear at the bottom of your site. archive.php - The template file used when viewing categories, dates, posts by author, etc. single.php - The template file that's used when viewing an individual post. comments.php - Called at the bottom of the single.php file to enable the comments section. page.php - Similar to single.php, but used for WordPress pages. search.php - The template file used to display search results. 404.php - The template file that displays when a 404 error occurs. style.css - All the styling for your theme goes here. functions.php - A file that can be used to configure the WordPress core, without editing core files. Theme File Structure Theme File Structure WordPress uses the Query String — to decide which template or set of templates will be used to display the page. WordPress matches every Query String to query types — i.e. it decides what type of page (a search page, a category page, the home page etc.) is being requested. Templates are then chosen — and web page content is generated — in the order suggested by the WordPress Template hierarchy, depending upon what templates are available in a particular WordPress Theme. WordPress looks for template files with specific names in the current Theme's directory and uses the first matching template file listed under the appropriate query section below. With the exception of the basic index.php template file, Theme developers can choose whether they want to implement a particular template file or not. If WordPress cannot find a template file with a matching name, it skips down to the next file name in the hierarchy. If WordPress cannot find any matching template file, index.php (the Theme's home page template file) will be used. Theme File Structure Example: If your blog is at http://example.com/blog/ and a visitor clicks on a link to a category page like http://example.com/blog/category/your-cat/: Here is the progression of how WordPress uses the template hierarchy to find and generate the right file. WordPress looks for a template file in the current Theme's directory that matches the category's ID. If the category's ID is 4, WordPress looks for a template file named category-4.php. If it is missing, WordPress next looks for a generic category template file, category.php. If this file does not exist either, WordPress looks for a generic archive template, archive.php. If it is missing as well, WordPress falls back on the main Theme template file, index.php. Template Tags A template tag is code that instructs WordPress to "do" or "get" something Example: in your header.php file you want to output the site name <h1>My Site Name</h1> -- STATIC!! <h1><?php bloginfo(‘name’)?></h1> -DYNAMIC!! Examples of Common Template Tags The_permalink(); outputs the link the post/page The_title(); outputs the page/post title the_author(); outputs the name of the author who created the post The_date(); outputs the date posted The_content(); outputs the post/page content The_excerpt(); outputs the post/page excerpt Get_header(); get_footer(); get_sidebar(); -- include the header.php file; include the footer.php file, include the sidebar.php file How do you use Template Tags? Insert them into your theme files Use them to dynamically request information throughout the theme such as author data, date & time, post content, post excerpt, etc. Can also be used to include other files such as the header, footer, sidebar, menu http://codex.wordpress.org/Template_Tags Can be used inside and outside ‘the loop’ The Loop - Overview The loop is simply a block of code that displays all information that Wordpress has about a post or pages It loops through each post that it finds in the database sequentially (one, then another, etc.) so that it can handle supplying information about several posts Three crucial parts: Start the Loop Do something with each post/page found in the loop Close the loop By default the loop will retrieve everything that it can possibly find … hence the query (later) The Loop – The Code The Loop – In English If there are posts, while you have posts, output the post Output the post class, the post ID in the div tag Output the post permalink and title in the H1 tag End the while statement (ends when hits end of posts) Else: if there are no posts that match the criteria, output a <div> saying “no posts match your criteria” End the loop with endif statement Modify the Loop using Query_Posts Query Parameters Full list at: http://codex.wordpress.org/Class_Reference/WP_Query Author parameters (ex. Show posts only by a specific author or a few different authors) Category parameters: show posts only in one category, show all posts not in a category Tag: show all posts with a specific tag, show posts from several tags Taxonomy: show all posts with a specific taxonomy Post/Page Parameters: show specific posts, page IDs, etc Pagination Parameters: number of posts per page, show all posts Orderby Parameters: ascending, descender, order by name, etc. Time Parameters: Show posts from just the current week, current year, etc Demonstration Build a basic theme from scratch incorporating the Loop and Template tags Steps Creating a Theme Sketch mockup / Design in photoshop 2. Map out functionality 3. Create static HTML template and stylesheet 4. Rename HTML template(s) to PHP files, add template tags to dynamically retrieve information 1.