Building the basics (WordPress Ottawa 2014)

Building the basics
An introduction to HTML, CSS, and WordPress.

Building the basics
What 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)

What is the web?
- http:// is the hypertext transfer
protocol;
- https:// is the secure hypertext
transfer protocol;

What 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 HTML
What 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 HTML
structural tags
Document structure tags
<html>
<head></head>
<body></body>
</html>

The basics of HTML
paragraph tags
The Paragraph Tag
<p>Hello, I’m a paragraph.</p>
opening content closing

The basics of HTML
heading tags
Heading Tags
<h1>This is a heading</h1>
(also <h2> .. <h5>)

This is a heading
Hello, I’m a paragraph.

This is a heading
This is an h2 heading.
And here is another paragraph full of
amazing things that we’re going to
love.

The basics of HTML
lists
Lists
<li>This is a list item.</li>
<ul>
opening
</ul>
closing
(also <ol>)

This is a heading
love.
• This is a list item.

This is a heading
love.
1. This is a list item.

The basics of HTML
formatting tags
Formatting Tags
<b>This text is bold.</b>
<i>This text is italic.</i>

The basics of HTML
formatting tags
Formatting Tags
<strong>This text is strong.</strong>
<em>This text has emphasis.</em>
(also <tt>, <cite>, <font>, <blockquote>)

The basics of HTML
Formatting tags
Using Formatting tags in a <p>
<strong>This text is strong.</strong>
<p>
</p>

The basics of HTML
The line break
Using line breaks in a <p>
<br>
opening
<p>
</p>
(also <hr>)

This is a heading
And here is another paragraph. Full
of amazing things
that we’re going to love.

The basics of HTML
the anchor tag
The Anchor Tag
<a href=“index.html”>text link</a>
attribute value

The basics of HTML
Adding a link tag
Using link tags into a list
<li> </li>
attribute value

This is a heading
And here is another paragraph.
Full of amazing things that we’re going
to love.

The basics of HTML
The image tag.
The Image Tag
<img src=“image.jpg”>
opening
attribute value
x
(no closing)

This is a heading
And here is another paragraph.
Full of amazing things that we’re going to
love.

Tim Berners-Lee
Web Developer.

The basics of HTML
Combining a tag
Combing two tags to link an image
<p> </p>
<a href=“index.html”><img
src=“image.jpg></a>
attribute value
opening
attribute value
opening closing

New(ish) HMTL tags
Some 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 tags
Some additions to the standards
- <header>, <footer>, <nav>, <aside>,
<article> all replace <div> tags;
- <figure> (sort of) replaces <img> tag

The attributes of a tag
anchor tags
The Anchor Tag
attribute value content closing
opening

paragraph tags
The Paragraph Tag
<p class=“first_paragraph
example_class”
attribute value
id=“opening”
attribute value
>my paragraph text</p>

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

paragraph tags
The Paragraph Tag
example_class”
id=“opening”
class
id
class
>my paragraph text</p>

Using the attributes in
CSS paragraph tags
The Paragraph Tag
<p class=“first_paragraph example_class”
id=“opening”>
class class id
.first_paragraph {}
.example_class {}
#opening {}

CSS paragraph tags
<div id=“first_div”>
example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“example_class”>…</li></p>
</div>
<div id=“second_div”>
</div>

#opening_div { color: #000; }
<ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</<p>…</p>
</div>
</div>

#second_div { color: #000; }
</div>
</div>

.first_paragraph{ color: #000; }
</div>
</div>

.second_list_item{ color: #000; }
<p>…</p>
<ul><li class=“second_list_item”>…</li></<p class=“first_paragraph example_class”>…</</div>
</div>

.example_class{ color: #000; }
</div>
</div>

#second_div .example_class{ color: #000; }
</div>
</div>

CSS cascading styles in html
</div>

</div>
#second_div p
#second_div p

</div>
.example_class
.first_paragraph
.example_class

</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
JavaScript One slide, that’s all.

JavaScript & jQuery
ReusiSng wehlaet wce atloreardsy know.
console.log( jQuery(“.first_paragraph”).text(
);
selector

The basics of
WordPress What does this all really mean for WordPress?

<div id=“header”> or <header>
header.php
<div id=“main”>
index.php
- archive.php
- - category.php
- - author.php
single.php
- single-[id].php
- single-[slug].php
page.php
404.php
search.php
<div id=“footer”> or <footer>
footer.php

Using the template
how to overhridiee WroradPrrecssh payge 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 PHP
Basic PHP usage
<title><?php echo ‘hello’; ?></title>
open php php command close php

Getting data from
WSomoe bradsicP cormemasndss
<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
WSomoe bradsicP cormemasndss
<?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
Some basicC WoordmPresms coammnadndss 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
Some mCoreo bamsic WmordaPrnesds csommands
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
CHoookimng inmto WaorndPdresss
function my_content( $content ) {
$content = “Hello World!”;
return $content;
}
add_filter( ‘the_content’, ‘my_content’ );

Basic WordPress
CWoordmPresms shaorntcoddess
function my_shortcode( $content = null ) {
return ‘Christopher Ross’;
}
add_shortcode( ‘my_name’, ‘my_shortcode’ );

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

Putting it all together
Using 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' => ?>

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

<?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 ) );
?>
<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:/
+

Building the basics (WordPress Ottawa 2014)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Building the basics (WordPress Ottawa 2014)

Ähnlich wie Building the basics (WordPress Ottawa 2014) (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Building the basics (WordPress Ottawa 2014)