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
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
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.
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.
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.
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).
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
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.
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.
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"
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.
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.
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.
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).
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).
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.
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.
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
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
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.
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; }
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; }
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.
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:
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).
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
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.
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.
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
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
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" />
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.
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.
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>
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.
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”.
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.
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.
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.
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.
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:
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:
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.
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.
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.
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
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
linnalexandra
andpad
ericgpks
masahiro_nishimi
mitchan
maroon1st
masayaaoyama
tomokusaba
y0gi
coe401_
xztaityozx
hyopt
hcrane
mthomps
chrisshort
jcasabona
marktimemedia
skipperchong
paulrobertlloyd
deanohume
nonsquared
frogandcode
bluesmoon
tanoku
bermonpainter