• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Designing for WordPress
 

Designing for WordPress

on

  • 1,617 views

As web designers and print designers encounter WordPress for the first time, it can be a challenge to understand how WordPress works. Yet, it is so important for designers to know the system for which ...

As web designers and print designers encounter WordPress for the first time, it can be a challenge to understand how WordPress works. Yet, it is so important for designers to know the system for which they are designing. This presentation will address key points for helping designers understand the basic functionality and structure of WordPress — so that they can design truly beautiful and functional sites that run well on WordPress. This presentation will aim to help designers understand what developers do to get their designs live on a WordPress site.

Statistics

Views

Total Views
1,617
Views on SlideShare
1,512
Embed Views
105

Actions

Likes
2
Downloads
0
Comments
0

4 Embeds 105

http://lbdesign.tv 94
http://localhost 8
http://feeds.feedburner.com 2
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing for WordPress Designing for WordPress Presentation Transcript

    • Designing for WordPress Understanding templates + content types within WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • About Halloween Me • Fictional literary character • Retired Army surgeon who lived in London • Shared a flat with an eccentric intellectual • Often told “Elementary!”WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • John H. Watson, M.D. Sherlock Holmes’ friend, colleague and biographerWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • About the Real Me • Liam Dempsey • Work in web + print: a designer who codes • Started my own company in the UK, since expanded to the US • Working with WordPress since 2007 • Co-founded Philly ‘burbs WordPress Meetup earlier this yearWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • What We’ll Cover Today • What are templates + why they matter • How WordPress uses templates • Content Types in WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • What We Won’t Cover • Any sort of design principles or best design styles • We won’t write any code • Forensic Science methodology of the late 19th centuryWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • My intended audience is … • New to designing database-driven websites • New to WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • I’m presenting from a simple WordPress setup standpoint – nothing too advanced or fancyWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Using WordPress as a CMS • We use WordPress to build small, medium and large business websites • WordPress is how we get content to the front end of the website • We need to know how WP thinks so we can create designs that will work wellWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • What is a template?Templates are howWordPress controlswhere + how content isdisplayed on the frontend of a website.
    • A key concept to take away from this presentation: WordPress relies on templates to deliver web page designs and layouts to browsersWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • If you can understand templates, then you can … Design for WordPressWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Why Do Templates Matter to Designers?WordCamp Philly2012: Designing for WordPress @liamdempsey
    • Designs for content must fit the structure – content can only go where the WordPress template allows it to go The greater the number of templates = the greater the cost Web templates are very different from print designWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Two big issues Print Designers have with web templates? FLUIDITY of web presentation RIGIDITY of web templates HUMILITY I know I struggled with them.WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Fluidity of Web Presentation • Limited display control: different browsers present typography and margins in slightly different ways • Responsive design: moving/resizing to fit the screen + purposeWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • http://thetruckingaccidentlawyers.info
    • http://thetruckingaccidentlawyers.info
    • Rigidity of Web Templates • Content management systems do EXACTLY what we tell them to do – they can’t guess our intentions • Templates can be used for more than a single page – e.g, the About Us and Our Services pages can use the same template.WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Key Points about Templates • Header and footer files are shared across WordPress • Unique page layouts require their own templates • Sidebars have templates • Additional templates can be added to themesWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • The template files in WordPress 2011 theme On this pageWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • WP’s THREE Content Types These three content types are your building blocks! 1. Posts 2. Pages 3. Custom Post TypesWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Posts in WordPress • Used for blog, news, updates, etc. • Posts get pushed around the site in sidebars, footers and elsewhere as Latest News, Popular Posts, etc. • Comes with lots of fields: titles, excerpt, slug, category, author, tags and more • Can add custom fields as wellWordCampPhilly 2012: Designing for WordPress @liamdempsey
    • How to Design Posts for WP • Consider the look of the title, publication date and author display • Use excerpts or read more? • Will posts have a featured image? Need a default image too? • Remember: All the posts will be formatted the same! (Unless they are not!)WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Pages in WordPress • Obviously, for individual pages • Can also be used to embed in other pages (e.g., for articles on a home page) • Can be used to embed posts or custom post types • Come with set fields + can include custom fieldsWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • How to Design Pages for WP • What content needs to go a specific page? • Will the different pages across a site require separate layouts? • Will a page display its own content, posts or custom post type?WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Custom Post Type (CPT) • Used for any content with a need for repeated instances of that content type • Think more of as a Custom Content Type • Can act like posts – e.g., a CPT of houses displayed on a housing listings page • The fields are customized • Content can be displayed across the site in sidebars + footer – Recipes, Staff, Products, etc.WordCamp Philly 2012: Designing for WordPress @liamdempsey
    • How to Design CPT for WP • Clearly set out the fields to be included • Define the parameters of those fields • Decide how those fields will be organized and displayed on the page • Consider how certain fields of the CPT will be displayed across the siteWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • CPT in Page Templates Page Template Logo A pithy little tagline Home Our Services Our Team Recent Cases Contact UsOur Detective Team Sherlock Holmes Consulting Detective sholmes@consultingdetectives.co.uk Custom Post Type of Team John H. Watson, M.D. Retired Surgeon, Asst. Consulting Detective jwatson@consultingdetectives.co.uk Mrs. Hudson Landlady mrshudson@consultingdetectives.co.uk
    • Exploring the CPT Featured Image Fields in the Custom Post Type of Team Sherlock Holmes Consulting Detective sholmes@consultingdetectives.co.uk
    • Exploring the CPT Fields in the Logo A pithy little tagline Custom Post Home Our Services Our Team Recent Cases Contact Us Type of TeamSherlock HolmesConsulting Detective Featuredsholmes@consultingdetectives.co.uk ImageLorem ipsum dolor sit amet, consec-tetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra necconsectetur ante hendrerit. Donec et mollis dolor.Praesent et diam eget libero egestas mattis sit ametvitae augue. Nam tincidunt congue enim, ut porta Mainlorem lacinia consectetur. content
    • Pulling it all together Logo A pithy little tagline Home Our Services Our Team Recent Cases Contact Us At Baker Street Detective Services, we provide Contact Us Now! answers when no one else can. We find evidence 020 7723 2312 that others overlook. We make connections that escape the average investigative team. Recent Cases Why choose us? Our Top Detective • A Study in Scarlet Frankly, the reason is Sherlock Holmes • The Sign of the Four elementary! We’re the Consulting Detective • The Hound of the best in the world when it Baskervilles comes to solving crime. • The Valley of Fear Content from page template Custom Post Type Posts Embedded Page Template Content
    • How to Learn More • Play around with your own development site • A good overview of CPT: http://keithdevon.com/custom-post-types/ • The Codex: http://codex.wordpress.org • Google stuff • Attend WordCamps • Go to local WordPress MeetupsWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • In Review … • Understanding templates is key to designing for database-driven websites • WordPress uses templates to display content on the front-end of the site • Three content types in WordPress: post, page and custom post type • Engage with the WordPress CommunityWordCamp Philly 2012: Designing for WordPress @liamdempsey
    • Questions? Liam Dempsey Director | Communications Designer @liamdempsey liam@lbdesign.tv 610-390-9076 liamdempsey.com lbdesign.tv chickenmonkeydog.comWordCamp Philly 2012: Designing for WordPress @liamdempsey