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.

2263d09a7964450b647bf7dc8ded785b?s=128

Linn Øyen Farley

November 26, 2014
Tweet

Transcript

  1. 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
  2. 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
  3. 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.
  4. 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.
  5. 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.
  6. 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).
  7. 8.

    HTML basics HTML basics HTML syntax looks like this: <p>This

    is a paragraph.</p> 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 <p> and closing </p> is a paragraph. *Examples of keywords: p for paragraph, img for image, h1 for heading level 1
  8. 9.

    HTML basics HTML basics HTML tag: the pointy brackets and

    the keyword inside them, e.g. <p> or </p> HTML element: the whole thing, content and all, e.g. <p>This is a paragraph.</p>
  9. 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: <br /> 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.
  10. 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"
  11. 12.

    Attributes and values: images Attributes and values: images <img src="http://mywebsite.com/cats-who-cant-jump.gif"

    alt="Hilarious cats" /> 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.
  12. 13.

    Attributes and values: links Attributes and values: links <a href="http://utoronto.ca"

    title="University of Toronto" target="_blank">University of Toronto</a> 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.
  13. 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: <a href="/about-us">About Us</a> or if it’s an email address link: <a href="mailto:my@email.com">my@email.com</a> 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.
  14. 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: <a href="http://twitter.com/LinnOyenFarley" target="_blank">Twitter</a> 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).
  15. 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).
  16. 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.
  17. 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.
  18. 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
  19. 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
  20. 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.
  21. 23.

    Getting more specific with classes Getting more specific with classes

    If this is our HTML: <p>I’m a paragraph!</p> <p>Me too!</p> And this is our CSS: p { color: blue; }
  22. 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!
  23. 25.

    Getting more specific with classes Getting more specific with classes

    If we give one of our paragraphs a class, on the other hand: <p class="special">I’m a paragraph!</p> <p>Me too!</p> And change our CSS to select only paragraphs with that class: p.special { color: blue; }
  24. 26.

    Getting more specific with classes Getting more specific with classes

    Then our page will look like this: I’m a paragraph! Me too!
  25. 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.
  26. 28.

    Classes vs. IDs Classes vs. IDs HTML: <p id="special">I’m a

    paragraph!</p> <p>Me too!</p> CSS: p#special { color: blue; } Result: I’m a paragraph! Me too!
  27. 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: <!-- comment text goes here --> In CSS: /* comment text goes here */
  28. 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).
  29. 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
  30. 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.
  31. 35.

    HTML in WordPress HTML in WordPress You may also have

    noticed that the Text tab has no <p> tags or <br /> 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 <br /> 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 &nbsp; (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.
  32. 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 ⤵ <strong>Bold</strong> Italic ⤵ <em>Italic</em> Strikethrough ⤵ <del>Strikethrough</del>
  33. 37.

    Visual editor: tag pairs Visual editor: tag pairs “Blockquote” ⤵

    <blockquote>Blockquote</blockquote> Heading 1 Heading 1 through Heading 6 Heading 6 ⤵ <h1>Heading 1</h1> through <h6>Heading 6</h6>
  34. 38.

    Visual editor: tag pairs Visual editor: tag pairs • Unordered/bulleted

    list ⤵ <ul> <li>Unordered/bulleted list</li> </ul> 1. Ordered/numbered list ⤵ <ol> <li>Ordered/numbered list</li> </ol>
  35. 39.

    Visual editor: tag pairs with attributes and Visual editor: tag

    pairs with attributes and values values Link with title and target ⤵ <a href="http://google.com" title="Google" target="_blank">Link with title and target</a>
  36. 40.

    Visual editor: standalone elements and Visual editor: standalone elements and

    entities entities Some buttons add a standalone element: Horizontal rule ⤵ <hr /> Image linked to media file, aligned centre, and sized to thumbnail ⤵ <a href="https://drollicdesign.files.wordpress.com/2014/11/ronja.png"><img 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" /></a>
  37. 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: & © ® ‽ ⤵ &amp; &copy; &reg; &#8253; This one adds an HTML comment, which WordPress knows to look for and transform into a More... link: ------- MORE ------- ⤵ <!--more-->
  38. 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.
  39. 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.
  40. 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. <iframe width="560" height="315" src="//www.youtube.com/embed/dywbQ9vkKOU" frameborder="0" allowfullscreen></iframe>
  41. 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. <iframe src="//player.vimeo.com/video/55999985" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/55999985">Supermundane at Cow&Co</a> from <a href="http://vimeo.com /user1284099">Mark McNulty</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
  42. 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”.
  43. 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.
  44. 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.
  45. 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: <h2 style="color: blue;">This heading will be blue.</h2> <h2>This one will not.</h2>
  46. 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: <span style="color: red;">This whole paragraph will be red.</span> You can also use span to style a section of text: I’m a regular paragraph, but <span style="color: red;">these words will be red</span> and these ones will not.
  47. 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: <span style="color: purple; font-family: Baskerville, Georgia; font-size: 300%; font-weight: bold;">T</span>his is the first sentence of my post. will output this:
  48. 52.

    Inline CSS examples Inline CSS examples To add a drop

    shadow to an image, add a style attribute to an img tag: <img style="box-shadow: 10px 10px 5px #888888;" 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" /> 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:
  49. 53.

    Visual editor: inline styles Visual editor: inline styles The remaining

    buttons in the Visual editor insert style attributes into your content. Text alignment ⤵ <p style="text-align: left;">Left-aligned paragraph</p> <h2 style="text-align: center;">Centre-aligned heading 2</h2> <h3 style="text-align: right;">Right-aligned heading 3</h3> <p style="text-align: justify;">Justified paragraph</p>
  50. 54.

    Visual editor: inline styles Visual editor: inline styles Colour picker

    dropdown ⤵ <span style="color: #ff0000;">Colour</span> <span style="color: #99cc00;">picker</span> <span style="color: #800080;">dropdown</span>
  51. 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.
  52. 56.

    Cleaning up code Cleaning up code If you’ve tried to

    work with content from Word, this might look familiar: <h1 style="page-break-after:auto;tab-stops:90.0pt;border:none;mso-border-bottom-alt:solid windowtext .5pt;padding:0cm;mso-padding-alt:0cm 0cm 1.0pt 0cm"><span style="mso-bidi-font- size:12.0pt;font-family:'Verdana','sans-serif';font-variant:small-caps;text-decoration:none; text-underline:none">Hi, we’re from Word!</span><span style="font-size:11.0pt; font-family:'Verdana','sans-serif'; font-variant:small-caps"><a name="_Toc321051627"> </a></span></h1> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:'Verdana','sans-serif'">We brought all this stuff with us. <span style="mso-spacerun:yes">&nbsp; </span></p>
  53. 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: <h1>Hi, we’re from Word!</h1> We brought all this stuff with us. You can also paste directly into the Text tab, or use the “Paste as text” button.
  54. 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.
  55. 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
  56. 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
  57. 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
  58. 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