Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS-Tricks is a Poster Child WordPress Site

CSS-Tricks is a Poster Child WordPress Site

A presentation about WordPress and stuff.

Chris Coyier

March 25, 2017
Tweet

More Decks by Chris Coyier

Other Decks in Technology

Transcript

  1. is a Poster Child
    WordPress Site

    View Slide

  2. By Sarah Drasner

    View Slide

  3. Let us wax philosophic
    for a moment.

    View Slide

  4. Websites are amazing.
    I really like writing things so that
    other people can read them.

    View Slide

  5. I could write something on
    a piece of paper and hand it
    to you, but that's laaaame.

    View Slide

  6. Writing into s
    is way cooler.

    View Slide


  7. Even cooler than that is saving
    what you write to a database and
    barfing it out onto a website. ❤

    View Slide

  8. https:/
    /urls-are-way.cool
    URL's are the best thing to happen
    to the world in a hot while.

    View Slide

  9. Anybody in the world with internet
    access can read what I wrote!

    View Slide

  10. I don't even
    have to
    directly tell
    people about
    it. They can
    just find it.

    View Slide

  11. That's straight up amazing. It
    makes all of us a zillion times
    more resourceful.

    View Slide

  12. So. Writing.

    View Slide

  13. WordPress does writing and publishing
    super well. Word. Press. Get it?

    View Slide


  14. Through the power of
    computer programming!!

    View Slide

  15. WordPress is more
    like this tho.

    (because it's also a website.)

    View Slide

  16. If I do my writing on a
    public website that makes
    websites, how do I keep evil
    villains out?

    View Slide

  17. This is perhaps one of the
    most important things about
    WordPress.
    WordPress is an auth system.

    View Slide

  18. Bad Guy
    Prevention
    System

    View Slide

  19. If the only thing WordPress did
    was be a nice auth system where
    you log in and leave secret
    messages for your friends, it
    would still be amazing.

    View Slide

  20. But of course it does a
    billion more things. Like
    have a front end where
    those things I type are
    published at URLs.

    View Slide

  21. You know where I've
    written almost every
    single word I've ever
    written on the internet?

    View Slide

  22. Right there.

    View Slide

  23. To be fair, it's a slightly nicer

    View Slide

  24. Some of my favorite
    features of this fancy
    textarea is that it saves
    me from myself.

    View Slide

  25. [has 833 tabs open in web browser]
    self: now seems like a pretty
    good time to restart.

    View Slide

  26. Oh shucks I forgot to save.
    NBDDDDD.

    View Slide

  27. FINE. it's a lot nicer
    than a textarea.

    View Slide

  28. View Slide

  29. Automatic revision saving
    is great. If you turn that off
    because you think it makes
    your database slow I think
    you maybe probably have
    bigger problems maybe.

    View Slide

  30. UNSOLICITED
    OPINIONATED HOT TIP
    For the long-term health and
    happiness of your content:
    1. Turn off Visual Editor
    2. Write in Markdown

    View Slide

  31. bye bye

    View Slide

  32. yes plz
    (This is the
    awesome
    Jetpack
    plugin.)

    View Slide

  33. I think WordPress kinda
    tries to fight the
    "WordPress is for blogs"
    thing. But whatever, it's
    kind of a blog.

    View Slide

  34. It's really good for
    blogging. Own it.

    View Slide

  35. 1. You log in
    2. You type some crap
    3. You publish it
    4. It looks fantastic at some URL
    5. It barfs out to RSS
    6. It's dated
    7. It has an author

    View Slide

  36. The WordPress auth system
    isn't just nice because it
    exists and works, it offers
    levels of authentication that
    is wicked useful.

    View Slide

  37. View Slide

  38. Author
    Archives

    View Slide

  39. Chronological, Paginated Homepage

    View Slide

  40. Sensical
    Taxonomies
    by Default
    Like
    Categories

    View Slide

  41. and
    Tags

    View Slide

  42. 1. Featured images!
    2. Title!
    3. Relevant Dates!
    4. Author!
    5. Excerpt!
    6. Tags!

    View Slide

  43. But what if you wanna do
    really customized pages?

    View Slide

  44. Custom
    Functionality
    Custom
    Styling

    View Slide

  45. View Slide

  46. One-off page styling via the Art Direction plugin

    View Slide

  47. Named
    Page
    Templates
    let you do
    whatever the
    heck you
    want for any
    given Page.

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. ✅ Posts are obviously useful.
    ✅ Pages are obviously useful.
    But there is more!
    Custom Post Types means you
    really do whatever makes
    sense for your site.

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. Custom Post
    Types can even
    have their own
    sets of
    taxonomies.

    View Slide

  57. The real HOT CMS ACTION
    starts when you customize
    all the content types with
    custom fields.

    View Slide

  58. View Slide

  59. A recent thing I've done is to
    create a Custom Post Type of
    "Guides", which are programatic
    groupings of other content.

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. Hand-crafted, hand-ordered
    groupings of content!

    View Slide

  64. View Slide

  65. Surfacing (even evergreen)
    content is a challenge.
    Content recirculation is a
    challenge.

    View Slide

  66. With blog posts, pages, custom
    post types, customizations of
    the admin, customizations of
    one-off pages....
    Clearly, WordPress is a CMS.

    View Slide

  67. View Slide

  68. Comments are yet another
    thing you get out of the
    box with WordPress.

    View Slide

  69. View Slide

  70. CSS-Tricks uses pretty
    much run-of-the-mill
    WordPress comments.

    View Slide

  71. Owning the comments feels
    good to me. Having the
    comments right in the HTML
    seems right.

    View Slide

  72. To be fair the Disqus plugin is
    pretty well done, also, because it
    syncs the comments to your DB.

    View Slide

  73. I'm prettttty sure that's
    good for SEO.
    85,888 Comments

    View Slide

  74. Things I do in comments:
    • Markdown / Preview (Jetpack + Plugin)
    • Feature/Bury (Plugin)
    • Heavily moderated and 

    encourage good behavior
    • Offer notifications for follow ups
    • Offer newsletter signup
    • One-level threading

    View Slide

  75. View Slide

  76. Wishlist for WordPress
    Comments
    • Ajax
    • Attached to Users
    • Log in from front end
    • Editability
    • Voting / Sorting

    View Slide

  77. Forums!
    bbPress is pretty sweet

    View Slide

  78. It's a plugin! You just
    activate it and now you
    have public forums. That's
    extremely powerful.

    View Slide

  79. View Slide

  80. As much as we publish, there is
    10✕ more forums content.

    View Slide

  81. Congrats your a publisher and
    community manager now.
    Time for dolla bills.

    View Slide

  82. WordPress makes you a
    powerful publisher. You
    can build whatever the
    heck you want.

    View Slide

  83. • Primary Site Sponsor
    • Sponsored Content
    • BuySellAds
    Some of the ways I monetize:

    View Slide

  84. Another obvious way
    to make money is to
    sell things.

    View Slide

  85. Members-only area of the site
    called The Lodge.

    View Slide

  86. View Slide

  87. Restrict Content Pro
    makes it trivially easy
    to lock down any
    content you like behind
    a paywall.

    View Slide


  88. This content is restricted to active
    subscribers. Probably sign up form.

    Show video and stuff!

    View Slide

  89. View Slide

  90. View Slide

  91. Selling physical or digitally-
    delivered projects is nbd too.

    View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. What's bad about WordPress?
    1. It's on you to keep it
    performant and secure.
    2. Default search is pretty bad.

    View Slide

  97. The best thing
    about WordPress?
    The future looks bright. The
    last 10 years have been pretty
    great, and it looks like the
    next 10 will be even better.

    View Slide

  98. @chriscoyier

    View Slide