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 openingand closing
is a paragraph. *Examples of keywords: p for paragraph, img for image, h1 for heading level 1Slide 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.
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
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.
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” ⤵
BlockquoteHeading 1 Heading 1 through Heading 6 Heading 6 ⤵
Heading 1
throughHeading 6
Slide 38
Slide 38 text
Visual editor: tag pairs
Visual editor: tag pairs
• Unordered/bulleted list ⤵
- Unordered/bulleted list
- 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 ⤵
Image linked to media file, aligned centre, and sized to thumbnail ⤵
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:
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:
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 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]