Building the basics (WordPress Ottawa 2014)

Building the basicsAn introduction to HTML, CSS, and WordPress.

Building the basicsWhat we’re going to cover in 30 minutes or less.

- the who, what, where, when, and

why of the web;

- where this all came from;

- and how to use it;

The history of the web(super condensed and non boring)

The history of the webWhat is the web?

- http:// is the hypertext transfer

protocol;

- https:// is the secure hypertext

transfer protocol;

The history of the webWhat is the web?

- the HTTP transfers text files from a

server, to a web browser;

- the text files may be formatted in the

HyperText Markup Languages

The basics of HTMLWhat is HTML and how do we use it?

- HTML has ~10 basic tags

- document structure;

- paragraphs, lists, and formatting;

- images, and linking

The basics of HTMLstructural tags

<html>

<head></head>

<body></body>

</html>

Document structure tags

The basics of HTMLparagraph tags

<p>Hello, I’m a paragraph.</p>

The Paragraph Tag

opening closingcontent

Hello, I’m a paragraph.

The basics of HTMLheading tags

<h1>This is a heading</h1>

Heading Tags

(also <h2> .. <h5>)


This is a headingHello, I’m a paragraph.


This is an h2 heading.

And here is another paragraph full of

amazing things that we’re going to

love.

The basics of HTMLlists

<li>This is a list item.</li>

Lists

(also <ol>)


<ul>

opening

</ul>

closing





love.

• This is a list item.





love.

1. This is a list item.

The basics of HTMLformatting tags

<b>This text is bold.</b>

Formatting Tags


<i>This text is italic.</i>


The basics of HTMLformatting tags

<strong>This text is strong.</strong>

Formatting Tags


<em>This text has emphasis.</em>


(also <tt>, <cite>, <font>, <blockquote>)

The basics of HTMLFormatting tags

Using Formatting tags in a <p>

<strong>This text is strong.</strong>


<p>

</p>





love.


The basics of HTMLThe line break

Using line breaks in a <p>

<br>

opening

<p>

</p>

(also <hr>)



And here is another paragraph. Full

of amazing things

that we’re going to love.


The basics of HTMLthe anchor tag

<a href=“index.html”>text link</a>

The Anchor Tag


attribute value

The basics of HTMLAdding a link tag

Using link tags into a list<li> </li>



attribute value



And here is another paragraph.

Full of amazing things that we’re going

to love.


The basics of HTMLThe image tag.

<img src=“image.jpg”>

The Image Tag

opening

attribute value

(no closing)

x



And here is another paragraph.

Full of amazing things that we’re going to

love.


Tim Berners-LeeWeb Developer.

The basics of HTMLCombining a tag

Combing two tags to link an image

<a href=“index.html”><img

src=“image.jpg></a>

<p> </p>

opening

attribute value

opening closing

attribute value

New(ish) HMTL tagsSome additions to the standards

- <div> is used to divide block content

on a page;

- <span> is used to divide inline

content;

<span>content</span>

<div>

</div>

New HMTL5 tagsSome additions to the standards

- <header>, <footer>, <nav>, <aside>,

<article> all replace <div> tags;

- <figure> (sort of) replaces <img> tag

The attributes of a taganchor tags


The Anchor Tag

opening

closingcontentattribute value

The attributes of a tagparagraph tags

<p class=“first_paragraph

example_class”

The Paragraph Tag

id=“opening”

attribute value

attribute value

>my paragraph text</p>

The basics of CSSWhat is CSS and how do we use it?



example_class”

The Paragraph Tag

id=“opening”

attribute value

attribute value




example_class”

The Paragraph Tag

id=“opening”

class

id


class

Using the attributes in

CSSparagraph tags

<p class=“first_paragraph example_class”

id=“opening”>

The Paragraph Tag

class idclass

.first_paragraph {}

.example_class {}

#opening {}


CSSparagraph tags


example_class”>…</p><p>…</p>

<p class=“example_class”>…</p>

<ul><li class=“example_class”>…</li></p>

<div id=“first_div”>

</div>


example_class”>…</p><p class=“example_class”>…</p>

<div id=“second_div”>

</div>

#opening_div { color: #000; }


<p>…</p>



</div>




</div>



<p>…</p>




</div>




</div>

#second_div { color: #000; }


<p>…</p>




</div>




</div>

.first_paragraph{ color: #000; }

<p>…</p>




</div>




</div>

.second_list_item{ color: #000; }



<p>…</p>




</div>




</div>

.example_class{ color: #000; }


<p>…</p>




</div>




</div>

#second_div .example_class{ color: #000; }


CSScascading styles in html




</div>






</div>

#second_div p

#second_div p






</div>

.example_class

.example_class

.first_paragraph






</div>

div p

div#second_div p

div#second_div

p.first_paragraph

div#second_div

p.example_class

p.example_class

p.first_paragraph

p

The basics of

JavaScriptOne slide, that’s all.

JavaScript & jQuery

SelectorsReusing what we already know.

console.log( jQuery(“.first_paragraph”).text(

);

selector

The basics of

WordPressWhat does this all really mean for WordPress?

<div id=“header”> or <header>

<div id=“footer”> or <footer>

<div id=“main”>

header.php

footer.php

index.php

- archive.php

- - category.php

- - author.php

single.php

- single-[id].php

- single-[slug].php

page.php

404.php

search.php

Using the template

hierarchyhow to override WordPress page templates

- WordPress will always search for

templates with -ID or -slug first;

- for example page-about.php or

archive-sales.php;

- WordPress waterfalls while

searching for page templates;

About PHPBasic PHP usage

<title><?php echo ‘hello’; ?></title>

open php close phpphp command

Getting data from

WordPressSome basic commands

<title><?php bloginfo( ‘title’ ); ?></title>

open php close php

bloginfo fetches and displays

information stored in the

WordPress options table by

name.

What do you want to fetch from

the database?

Getting data from

WordPressSome basic commands

<?php $title = get_bloginfo( ‘title’ ); ?>

open php

get_bloginfo() fetches details

but doesn’t display it. It’s ideal

for reading data into a variable.

What do you want to fetch from

the database?

Basic WordPress

CommandsSome basic WordPress commands for the Loop

the_title(); the post title

the_excerpt(); the excerpt

the_author(); the author

the_id(); the post id

the_content(); the post content

Basic WordPress

CommandsSome more basic WordPress commands

get_posts( $args ); get a group of posts

get_post( $id ); get a specific post

get_the_title( $id ); get a post title

wp_mail( $args ); send an email

wp_insert_posts( $args

);

create a new post

human_time_diff() converts dates

Basic WordPress

CommandsHooking into WordPress

function my_content( $content ) {

$content = “Hello World!”;

return $content;

}

add_filter( ‘the_content’, ‘my_content’ );

Basic WordPress

CommandsWordPress shortcodes

function my_shortcode( $content = null ) {

return ‘Christopher Ross’;

}

add_shortcode( ‘my_name’, ‘my_shortcode’ );

Putting it all togetherUsing HTML, CSS, and WordPress together.

Putting it all togetherUsing HTML, CSS, and WordPress together.

- All WordPress pages include

extensive CSS and HTML to all on.

<?php

$menu_class = ( is_rtl() ) ? ' navbar-right' : '';

wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar

?>

<ul id="menu-top-menu" class="nav navbar-nav”>

<li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item

current_page_item menu-item-home active menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li>

<li id="menu-item-34353" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34353"><a

href="http://thisismyurl.com/downloads/">Plugins</a></li>

<li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-

34572"><a href="http://thisismyurl.com/news/">News</a></li>

<li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-

34573"><a href="http://thisismyurl.com/tutorials/">Tutorials</a></li>

<li id="menu-item-34177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34177"><a

href="http://thisismyurl.com/about/">About</a></li>


href="http://thisismyurl.com/about/contact/">Contact</a></li>


href="http:/

<ul id="menu-top-menu" class="nav navbar-nav”>

<li id="menu-item-34574" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active

menu-item-34574"><a href="http://thisismyurl.com/">Home</a></li>


href="http://thisismyurl.com/downloads/">Plugins</a></li>

<li id="menu-item-34572" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34572"><a

href="http://thisismyurl.com/news/">News</a></li>

<li id="menu-item-34573" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-34573"><a

href="http://thisismyurl.com/tutorials/">Tutorials</a></li>


href="http://thisismyurl.com/about/">About</a></li>


href="http://thisismyurl.com/about/contact/">Contact</a></li>

<li id="menu-item-34653" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-34653"><a href="http:/

<?php

$menu_class = ( is_rtl() ) ? ' navbar-right' : '';

wp_nav_menu( array( 'theme_location' => 'primary',

'container' => '', 'menu_class' => 'nav navbar-nav' .

$menu_class, 'fallback_cb' => 'default_menu', 'depth'

=> 2 ) );

?>

+

Building the basics (WordPress Ottawa 2014)

Internet

Transcript of Building the basics (WordPress Ottawa 2014)