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

Coding Basics for WordPress

Coding Basics for WordPress

Slides for my guest lecture at the Foundations of Digital Communications Strategy and Social Media class at the University of Toronto.

Linn Øyen Farley

November 26, 2014
Tweet

More Decks by Linn Øyen Farley

Other Decks in Programming

Transcript

  1. Coding Basics for
    Coding Basics for
    WordPress
    WordPress
    Linn Øyen Farley
    Linn Øyen Farley

    • @LinnOyenFarley
    @LinnOyenFarley
    drollic.ca
    drollic.ca
    Foundations of Digital Communications Strategy and Social Media
    November 26th 2014, University of Toronto

    View Slide

  2. Linn Øyen Farley
    Linn Øyen Farley
    Web designer/developer
    Building things on the internet since 2005
    Usually working solo or collaborating with a designer
    Mainly use WordPress for client sites

    View Slide

  3. HTML & CSS
    HTML & CSS

    View Slide

  4. What are HTML & CSS?
    What are HTML & CSS?
    HTML and CSS are languages. They work together to present the majority of websites you
    see on the internet.
    In short: HTML is for content. CSS is for design and layout.

    View Slide

  5. What are HTML & CSS?
    What are HTML & CSS?
    HTML stands for HyperText Markup Language, because we use it to “mark up” content so
    your browser knows how to display it.
    For example, you use HTML to tell your browser which parts of your content are
    paragraphs, which parts are lists, which parts are headings, and so on.

    View Slide

  6. What are HTML & CSS?
    What are HTML & CSS?
    CSS stands for Cascading Style Sheets. You use CSS to apply styles to your HTML.
    Without CSS, each browser applies its own (very basic) styles to various elements. For
    example, paragraph text is usually black Times New Roman with a size of 16 pixels. And
    headings are just larger, bolded Times New Roman.
    Using CSS, we can tell the browser to ignore these defaults, and instead show paragraphs
    (for example) in dark grey Georgia at 18 pixels, and headings in purple italic Verdana.

    View Slide

  7. What are HTML & CSS?
    What are HTML & CSS?
    You can have HTML without CSS (although it looks boring), but you can’t have CSS
    without HTML (it would just be a list of styles that aren’t being applied to anything).

    View Slide

  8. HTML basics
    HTML basics
    HTML syntax looks like this:
    This is a paragraph.
    This is a tag pair. An HTML tag is a specific keyword* between two angle/pointy brackets.
    There’s usually a matching closing tag, indicated by the forward slash before the keyword.
    Together, the opening and closing tags make a tag pair.
    This particular tag pair is for the HTML element paragraph. It tells the browser that
    everything between the opening and closing is a paragraph.
    *Examples of keywords: p for paragraph, img for image, h1 for heading level 1

    View Slide

  9. HTML basics
    HTML basics
    HTML tag: the pointy brackets and the keyword inside them, e.g. or
    HTML element: the whole thing, content and all, e.g. This is a paragraph.

    View Slide

  10. HTML basics
    HTML basics
    If there’s no closing tag, we have a standalone element. One example of a standalone
    element is a line break, which closes itself:


    You don’t put content inside a line break — you just want to go to a new line — so there’s
    no need for a closing tag here.

    View Slide

  11. Attributes and values
    Attributes and values
    Some HTML elements need to give the browser more info than just a keyword, which is
    where attributes and values come in.
    HTML elements can have several attributes and values, but their syntax is always the
    same:
    [attribute name] + [equal sign] + [double quotes] + [value] + [double quotes]
    src="http://utoronto.ca"
    class="credits"

    View Slide

  12. Attributes and values: images
    Attributes and values: images

    The image element always has at least two attributes. The first is the src (source)
    attribute, which tells the browser where to go to find the image so it can display it.
    The second is the alt (alternate text) attribute, which displays if the image can’t be
    displayed, or if someone is using a screen reader to read your site aloud. The alt text
    should be a short description of what the image is.

    View Slide

  13. Attributes and values: links
    Attributes and values: links
    University of
    Toronto
    A link has at least one attribute: href. It tells the browser where to go when the link is
    clicked.
    It can also have a title attribute, which appears when you hover over the link, and/or a
    target attribute, which tells the browser to open the link in a new window.

    View Slide

  14. Attributes and values: links
    Attributes and values: links
    Some important notes about links: the href value should always start with http://,
    unless the link is pointing to somewhere else on your website:
    About Us
    or if it’s an email address link:
    [email protected]
    When clicked, a mailto link opens the default mail program on your computer with the
    address pre-filled. This isn’t always ideal for your visitor, so you should use them with care.

    View Slide

  15. Attributes and values: links
    Attributes and values: links
    If you want the link to open in a new window, include the target attribute and give it the
    value _blank:
    Twitter
    Use this very sparingly, if at all. It’s not recommended for accessibility reasons, because a
    visitor accessing your website using a screen reader or other assistive technology could
    get “lost” if a link unexpectedly opens in a new window.
    Also, most people know how to open a link in a new tab or window if they want to, but
    using target="_blank" forces the decision for them (there’s no way to stop a link with
    that attribute and value from opening in a new window).

    View Slide

  16. Recap: HTML syntax
    Recap: HTML syntax
    Source: dabrook.org/resources/posters/

    View Slide

  17. CSS basics
    CSS basics
    CSS syntax looks like this:
    p { color: gray; }
    The first part is a selector. This selects a specific HTML element — in this case, the
    paragraph. Then there are two curly braces, and within those braces, you add styles to
    apply to the selector. These styles are called declarations, or property/value pairs.
    In the above example, the property is color, and the value is gray. I’m telling the
    browser to display all paragraphs in the colour grey (note the American spelling).

    View Slide

  18. CSS basics
    CSS basics
    You can have several declarations applied to a single selector. The browser doesn’t care
    how you space it out, but it’s easier for us to read if we put each declaration on its own
    line:
    p {
    color: gray;
    font-family: Georgia;
    font-size: 18px;
    }
    This whole thing is called a rule.

    View Slide

  19. CSS basics
    CSS basics
    The “cascading” part of Cascading Style Sheets refers to how rules further down in your
    CSS will override earlier rules. One way to think of this is that “the last thing you heard is
    the one you’ll remember”. For example, if your CSS looks like this:
    p { color: red; }
    p { color: blue; }
    p { color: green; }
    your paragraphs will be green, because that was the last rule you wrote.
    If a rule you wrote doesn’t seem to be working, look further down in your stylesheet to
    check if an existing rule is overriding the one you just wrote.

    View Slide

  20. CSS colour
    CSS colour
    You can define colour in CSS in a few different formats:
    Colour name: e.g. red, blue, coral, lime ... the full list is at
    , but you’re limited to 140 (mostly
    weird) colours in total
    Hex value: e.g. #FF1493 (most common)
    RGB value: e.g. rgb(30,144,255)
    RGBA value: e.g. rgba(30,144,255,0.5) where the final value is opacity
    www.w3schools.com/cssref/css_colornames.asp

    View Slide

  21. CSS colour
    CSS colour
    You can get these values from Photoshop, or one of these websites:
    Colour Lovers (palettes and trends)
    Adobe Color (interactive colour wheel)
    W3 Schools’ colour wheel (more basic than Adobe’s)
    colourlovers.com
    color.adobe.com
    www.w3schools.com/tags/ref_colorpicker.asp

    View Slide

  22. Getting more specific with classes
    Getting more specific with classes
    What if you want to give one specific paragraph a different style with CSS?
    This is where classes come in. A class is a bit of additional info we add to our HTML
    elements, which we can later select in our CSS. If we’re not going to use CSS, we don’t
    need to add classes to our HTML.

    View Slide

  23. Getting more specific with classes
    Getting more specific with classes
    If this is our HTML:
    I’m a paragraph!
    Me too!
    And this is our CSS:
    p {
    color: blue;
    }

    View Slide

  24. Getting more specific with classes
    Getting more specific with classes
    The output on the page will look like this:
    I’m a paragraph!
    Me too!

    View Slide

  25. Getting more specific with classes
    Getting more specific with classes
    If we give one of our paragraphs a class, on the other hand:
    I’m a paragraph!
    Me too!
    And change our CSS to select only paragraphs with that class:
    p.special {
    color: blue;
    }

    View Slide

  26. Getting more specific with classes
    Getting more specific with classes
    Then our page will look like this:
    I’m a paragraph!
    Me too!

    View Slide

  27. Classes vs. IDs
    Classes vs. IDs
    You might come across IDs in addition to, or instead of, classes.
    They’re used in almost exactly the same way, except IDs are referenced in your CSS with
    a pound sign (#) instead of a period (.). Also, IDs are only used once per page, whereas
    classes can be used multiple times on a page.

    View Slide

  28. Classes vs. IDs
    Classes vs. IDs
    HTML:
    I’m a paragraph!
    Me too!
    CSS:
    p#special {
    color: blue;
    }
    Result:
    I’m a paragraph!
    Me too!

    View Slide

  29. Recap: CSS syntax
    Recap: CSS syntax

    View Slide

  30. Comments
    Comments
    A useful thing to know in both HTML and CSS is how to leave a note for yourself, or for
    future developers working with your code.
    Browsers will ignore anything inside a comment, so these will only be visible when viewing
    the code itself; they won’t show up on the page at all.
    In HTML:

    In CSS:
    /* comment text goes here */

    View Slide

  31. Comments
    Comments
    WordPress sidenote: you can also use this as a quick & dirty way to hide content on your
    site, like a page title.
    This will still show up in the WordPress dashboard, but it won’t appear on your site (unless
    someone looks at your code).

    View Slide

  32. WordPress
    WordPress

    View Slide

  33. WordPress.org WordPress.com
    Hosted by you (on your web hosting
    account)
    Hosted for you (no hosting required)
    Needs to be installed Automatic installation when you sign up
    A full version of the software A light version of the software
    Unlimited access to code, themes, and
    plugins
    Limited access to code and themes, no
    plugins
    Like building a house on a rented plot Like renting a house on someone else’s plot

    View Slide

  34. HTML in WordPress
    HTML in WordPress
    The structural HTML on your site comes from your theme, and possibly from plugins (if
    you have any).
    When you write a blog post or a page in the Visual editor, WordPress is writing your
    content-related HTML for you. That’s what you’ll see when you switch to the Text tab.
    Some HTML is “invisible” within the WordPress editor, like your post or page title — your
    theme is likely wrapping the title in a heading like h1, but you won’t see that in the editor.

    View Slide

  35. HTML in WordPress
    HTML in WordPress
    You may also have noticed that the Text tab has no tags or
    tags, but
    WordPress automatically inserts them behind the scenes.
    By default, hitting Enter in the Visual editor will start a new paragraph. To start a new line
    instead (i.e. insert a
    tag inside the existing paragraph), hold down the Shift key
    when you hit Enter.
    To add an empty line, go to a new line and hit the space bar (in the Visual editor) or type
      (in the Text editor) to insert a non-breakable space.
    If you’re really having trouble with spacing in the Visual editor, switch to the Text tab and
    clean it up there.

    View Slide

  36. Visual editor: tag pairs
    Visual editor: tag pairs
    Most of the buttons in the Visual editor add some kind of HTML to your content. Some of
    them add simple tag pairs:
    Bold ⤵
    Bold
    Italic ⤵
    Italic
    Strikethrough ⤵
    Strikethrough

    View Slide

  37. Visual editor: tag pairs
    Visual editor: tag pairs
    “Blockquote” ⤵
    Blockquote
    Heading 1
    Heading 1
    through
    Heading 6
    Heading 6

    Heading 1 through Heading 6

    View Slide

  38. Visual editor: tag pairs
    Visual editor: tag pairs
    • Unordered/bulleted list ⤵

    Unordered/bulleted list

    1. Ordered/numbered list ⤵

    Ordered/numbered list

    View Slide

  39. Visual editor: tag pairs with attributes and
    Visual editor: tag pairs with attributes and
    values
    values
    Link with title and target ⤵
    Link with title and target

    View Slide

  40. Visual editor: standalone elements and
    Visual editor: standalone elements and
    entities
    entities
    Some buttons add a standalone element:
    Horizontal rule ⤵

    Image linked to media file, aligned centre, and sized to thumbnail ⤵
    class="aligncenter wp-image-107 size-thumbnail"
    src="https://drollicdesign.files.wordpress.com/2014/11/ronja.png?w=150" alt="ronja"
    width="150" height="150" />

    View Slide

  41. Visual editor: standalone elements and
    Visual editor: standalone elements and
    entities
    entities
    This one adds an HTML entity, which begins with an ampersand and ends with a
    semicolon:
    & © ® ‽ ⤵
    & © ® ‽
    This one adds an HTML comment, which WordPress knows to look for and transform into
    a More... link:
    ------- MORE ------- ⤵

    View Slide

  42. Widgets
    Widgets
    Another place to use HTML in WordPress is in the Text widget.
    To insert some complex content into one of these, create a draft post and make
    WordPress write your code for you. Then switch to the Text tab, copy the contents, and
    paste into a Text widget.

    View Slide

  43. Embed code
    Embed code
    You can embed a YouTube or Vimeo video by pasting the video link into the Visual editor,
    but if you want more control over how it appears, use their embed code instead.

    View Slide

  44. Embed code: YouTube
    Embed code: YouTube
    Go to the video you want to embed
    1.
    Click the Share link, below the video title
    2.
    Click the Embed tab, and click SHOW MORE for more options
    3.
    Change the video size, whether or not to show suggested videos, etc
    4.
    When you’re happy, copy the full line of code:
    5.
    Paste that code into the Text editor in WordPress, or into a Text widget
    6.
    frameborder="0" allowfullscreen>

    View Slide

  45. Embed code: Vimeo
    Embed code: Vimeo
    Go to the video you want to embed
    1.
    Click the Share button, on the video’s right side
    2.
    Click + Show options next to the Embed heading
    3.
    Change the video size, colour, whether or not to autoplay the video, etc
    4.
    When you’re happy, copy the full line of code:
    5.
    Paste that code into the Text editor in WordPress, or into a Text widget
    6.
    webkitallowfullscreen mozallowfullscreen allowfullscreen> href="http://vimeo.com/55999985">Supermundane at Cow&Co from Mark McNulty on Vimeo.

    View Slide

  46. Embed code
    Embed code
    Lots of websites have embed code like this. A few examples:
    Twitter (either single tweets or full timelines)
    Google Maps (zoomable maps with one or more markers)
    Flickr (single images or slideshows)
    Instagram (single images)
    Look for the word “embed” or “share”, or Google “[service name] embed code”.

    View Slide

  47. CSS in WordPress
    CSS in WordPress
    Primarily, the CSS on your WordPress site comes from your theme. Your theme controls
    colours, fonts, backgrounds, borders, widths and heights, spacing, image styling, and
    much more.
    Because the most specific CSS “wins”, your theme’s CSS can be overridden by plugins,
    or by you via Jetpack’s Custom CSS module ( ).
    wordpress.org/plugins/jetpack/
    You can also upgrade your WordPress.com account to allow custom CSS, but at the
    current price point you may be better off just buying hosting.

    View Slide

  48. Inline CSS
    Inline CSS
    You can get even more fine-grain control with CSS by putting it right into HTML elements
    in the Text tab. This is referred to as inline CSS, because it’s not being applied globally
    across your site.
    Normally this is a bad thing — if you decide you want your drop cap colour to be green
    instead of purple, you’ll have to edit hundreds of blog posts — but for simple tweaks it
    works well.

    View Slide

  49. Inline CSS
    Inline CSS
    The syntax is similar to when you’re writing CSS in a separate file, with property and value
    pairs separated by semicolons, but instead of selecting an HTML element and putting the
    declarations inside curly braces, you use the style attribute directly within the element
    you want to style.
    For example, this will make the first heading blue:
    This heading will be blue.
    This one will not.

    View Slide

  50. Inline CSS
    Inline CSS
    Since WordPress doesn’t show paragraph tags, if you want to style a regular paragraph
    using inline styles, use the span element instead:
    This whole paragraph will be red.
    You can also use span to style a section of text:
    I’m a regular paragraph, but these words will be red and
    these ones will not.

    View Slide

  51. Inline CSS examples
    Inline CSS examples
    To style a drop cap, start by Googling the styles you want (e.g. “css change font to
    Georgia” or “css small caps”). Then apply the styles using a span tag.
    Putting this in your Text tab:
    This is the first sentence of my post.
    will output this:

    View Slide

  52. Inline CSS examples
    Inline CSS examples
    To add a drop shadow to an image, add a style attribute to an img tag:
    alt="ronja" width="150" height="150" />
    This will add a dark grey drop shadow 10 pixels to the right and 10 pixels below the
    image, with a 5 pixel blur, which looks like this:

    View Slide

  53. Visual editor: inline styles
    Visual editor: inline styles
    The remaining buttons in the Visual editor insert style attributes into your content.
    Text alignment ⤵
    Left-aligned paragraph
    Centre-aligned heading 2
    Right-aligned heading 3
    Justified paragraph

    View Slide

  54. Visual editor: inline styles
    Visual editor: inline styles
    Colour picker dropdown ⤵
    Colour picker dropdown

    View Slide

  55. Cleaning up code
    Cleaning up code
    When you paste text into the Visual editor, it can bring a lot of junk with it that you need to
    clean up in the Text tab.
    WordPress is getting better at doing this automatically, but it doesn’t always catch
    everything.

    View Slide

  56. Cleaning up code
    Cleaning up code
    If you’ve tried to work with content from Word, this might look familiar:
    Hi, we’re from Word!

    We
    brought all this stuff with us.  

    View Slide

  57. Cleaning up code
    Cleaning up code
    Now that you have an idea what those pointy brackets, attributes and styles are doing,
    you can confidently delete them:
    Hi, we’re from Word!
    We brought all this stuff with us.
    You can also paste directly into the Text tab, or use the “Paste as text” button.

    View Slide

  58. Wrapping up
    Wrapping up

    View Slide

  59. Three things you should know about coding
    Three things you should know about coding
    Someone has already solved this exact problem
    Related: Google is your best friend
    a.
    1.
    Everything is possible
    2.
    Everything will take longer than you expect
    3.

    View Slide

  60. Resources
    Resources

    View Slide

  61. Learning to code in person
    Learning to code in person
    Camp Tech (workshops)
    Ladies Learning Code (workshops)
    HackerYou (long-term programs)
    camptech.ca
    ladieslearningcode.com
    hackeryou.com

    View Slide

  62. Learning to code online
    Learning to code online
    Codecademy (interactive coding tutorials)
    Treehouse (video courses)
    Don’t Fear the Internet (HTML and CSS videos)
    codecademy.com
    teamtreehouse.com
    dontfeartheinternet.com

    View Slide

  63. Coding references
    Coding references
    W3 Schools (language reference)
    CSS Tricks (code snippets and tutorials)
    Smashing Magazine (especially their WordPress category)
    w3schools.com
    css-tricks.com
    wp.smashingmagazine.com

    View Slide

  64. Design tools
    Design tools
    Colour Lovers (palettes and trends)
    Adobe Color (interactive colour wheel)
    Picmonkey (image editing)
    Subtle Patterns (background tiles)
    BG Patterns (background tile creator)
    Google Fonts (free web fonts)
    TypeKit (premium web fonts)
    colourlovers.com
    color.adobe.com
    picmonkey.com
    subtlepatterns.com
    bgpatterns.com
    google.com/fonts
    typekit.com

    View Slide

  65. Questions?
    Questions?
    @LinnOyenFarley
    @LinnOyenFarley
    [email protected]
    [email protected]

    View Slide