Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

HTML & CSS HTML & CSS

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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).

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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"

Slide 12

Slide 12 text

Attributes and values: images Attributes and values: images 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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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).

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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).

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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; }

Slide 24

Slide 24 text

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!

Slide 25

Slide 25 text

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; }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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!

Slide 29

Slide 29 text

Recap: CSS syntax Recap: CSS syntax

Slide 30

Slide 30 text

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 */

Slide 31

Slide 31 text

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).

Slide 32

Slide 32 text

WordPress WordPress

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Heading 1

through
Heading 6

Slide 38

Slide 38 text

Visual editor: tag pairs Visual editor: tag pairs • Unordered/bulleted list ⤵
  • Unordered/bulleted list
1. Ordered/numbered list ⤵
  1. Ordered/numbered list

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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 ⤵ ronja

Slide 41

Slide 41 text

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 ------- ⤵

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Supermundane at Cow&Co from Mark McNulty on Vimeo.

Slide 46

Slide 46 text

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”.

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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:

Slide 52

Slide 52 text

Inline CSS examples Inline CSS examples To add a drop shadow to an image, add a style attribute to an img tag: ronja 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:

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

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.  

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

Wrapping up Wrapping up

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

Resources Resources

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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