Building the basics (WordPress Ottawa 2014)
Post on 12-Jul-2015
233 Views
Preview:
Transcript
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>)
opening closingcontent
This is a headingHello, I’m a paragraph.
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>)
opening closingcontent
<ul>
opening
</ul>
closing
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.
• This is a list item.
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.
1. This is a list item.
The basics of HTMLformatting tags
<b>This text is bold.</b>
Formatting Tags
opening closingcontent
<i>This text is italic.</i>
opening closingcontent
The basics of HTMLformatting tags
<strong>This text is strong.</strong>
Formatting Tags
opening closingcontent
<em>This text has emphasis.</em>
opening closingcontent
(also <tt>, <cite>, <font>, <blockquote>)
The basics of HTMLFormatting tags
Using Formatting tags in a <p>
<strong>This text is strong.</strong>
opening closingcontent
<p>
</p>
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.
1. This is a list item.
The basics of HTMLThe line break
Using line breaks in a <p>
<br>
opening
<p>
</p>
(also <hr>)
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.
1. This is a list item.
The basics of HTMLthe anchor tag
<a href=“index.html”>text link</a>
The Anchor Tag
opening closingcontent
attribute value
The basics of HTMLAdding a link tag
Using link tags into a list<li> </li>
<a href=“index.html”>text link</a>
opening closingcontent
attribute value
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.
1. This is a list item.
The basics of HTMLThe image tag.
<img src=“image.jpg”>
The Image Tag
opening
attribute value
(no closing)
x
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.
1. This is a list item.
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
<a href=“index.html”>text link</a>
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?
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 attributes of a tagparagraph tags
<p class=“first_paragraph
example_class”
The Paragraph Tag
id=“opening”
class
id
>my paragraph text</p>
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 {}
Using the attributes in
CSSparagraph tags
<p class=“first_paragraph
example_class”>…</p><p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“example_class”>…</li></p>
<div id=“first_div”>
</div>
<p class=“first_paragraph
example_class”>…</p><p class=“example_class”>…</p>
<div id=“second_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
#opening_div { color: #000; }
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
<p class=“example_class”>…</p>
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
#second_div { color: #000; }
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
.first_paragraph{ color: #000; }
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
.second_list_item{ color: #000; }
<p class=“first_paragraph example_class”>…</p>
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
.example_class{ color: #000; }
<p class=“first_paragraph example_class”>…</p>
<p>…</p>
<p class=“example_class”>…</p>
<ul><li class=“second_list_item”>…</li></p>
<div id=“opening_div”>
</div>
<p class=“first_paragraph example_class”>…</p>
<p class=“example_class”>…</p>
<div id=“second_div”>
</div>
#second_div .example_class{ color: #000; }
Using the attributes in
CSScascading styles in html
<p class=“first_paragraph
example_class”>…</p><p class=“example_class”>…</p>
<div id=“second_div”>
</div>
Using the attributes in
CSScascading styles in html
<p class=“first_paragraph
example_class”>…</p><p class=“example_class”>…</p>
<div id=“second_div”>
</div>
#second_div p
#second_div p
Using the attributes in
CSScascading styles in html
<p class=“first_paragraph
example_class”>…</p><p class=“example_class”>…</p>
<div id=“second_div”>
</div>
.example_class
.example_class
.first_paragraph
Using the attributes in
CSScascading styles in html
<p class=“first_paragraph
example_class”>…</p><p class=“example_class”>…</p>
<div id=“second_div”>
</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>
<li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a
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:/
<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>
<li id="menu-item-34578" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34578"><a
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 ) );
?>
+
top related