building the basics (wordpress ottawa 2014)
TRANSCRIPT
![Page 1: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/1.jpg)
Building the basicsAn introduction to HTML, CSS, and WordPress.
![Page 2: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/2.jpg)
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;
![Page 3: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/3.jpg)
The history of the web(super condensed and non boring)
![Page 4: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/4.jpg)
The history of the webWhat is the web?
- http:// is the hypertext transfer
protocol;
- https:// is the secure hypertext
transfer protocol;
![Page 5: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/5.jpg)
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
![Page 6: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/6.jpg)
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
![Page 7: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/7.jpg)
The basics of HTMLstructural tags
<html>
<head></head>
<body></body>
</html>
Document structure tags
![Page 8: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/8.jpg)
The basics of HTMLparagraph tags
<p>Hello, I’m a paragraph.</p>
The Paragraph Tag
opening closingcontent
![Page 9: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/9.jpg)
Hello, I’m a paragraph.
![Page 10: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/10.jpg)
The basics of HTMLheading tags
<h1>This is a heading</h1>
Heading Tags
(also <h2> .. <h5>)
opening closingcontent
![Page 11: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/11.jpg)
This is a headingHello, I’m a paragraph.
![Page 12: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/12.jpg)
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.
![Page 13: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/13.jpg)
The basics of HTMLlists
<li>This is a list item.</li>
Lists
(also <ol>)
opening closingcontent
<ul>
opening
</ul>
closing
![Page 14: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/14.jpg)
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.
![Page 15: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/15.jpg)
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.
![Page 16: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/16.jpg)
The basics of HTMLformatting tags
<b>This text is bold.</b>
Formatting Tags
opening closingcontent
<i>This text is italic.</i>
opening closingcontent
![Page 17: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/17.jpg)
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>)
![Page 18: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/18.jpg)
The basics of HTMLFormatting tags
Using Formatting tags in a <p>
<strong>This text is strong.</strong>
opening closingcontent
<p>
</p>
![Page 19: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/19.jpg)
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.
![Page 20: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/20.jpg)
The basics of HTMLThe line break
Using line breaks in a <p>
<br>
opening
<p>
</p>
(also <hr>)
![Page 21: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/21.jpg)
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.
![Page 22: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/22.jpg)
The basics of HTMLthe anchor tag
<a href=“index.html”>text link</a>
The Anchor Tag
opening closingcontent
attribute value
![Page 23: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/23.jpg)
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
![Page 24: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/24.jpg)
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.
![Page 25: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/25.jpg)
The basics of HTMLThe image tag.
<img src=“image.jpg”>
The Image Tag
opening
attribute value
(no closing)
x
![Page 26: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/26.jpg)
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.
![Page 27: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/27.jpg)
Tim Berners-LeeWeb Developer.
![Page 28: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/28.jpg)
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
![Page 29: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/29.jpg)
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>
![Page 30: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/30.jpg)
New HMTL5 tagsSome additions to the standards
- <header>, <footer>, <nav>, <aside>,
<article> all replace <div> tags;
- <figure> (sort of) replaces <img> tag
![Page 31: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/31.jpg)
The attributes of a taganchor tags
<a href=“index.html”>text link</a>
The Anchor Tag
opening
closingcontentattribute value
![Page 32: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/32.jpg)
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>
![Page 33: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/33.jpg)
The basics of CSSWhat is CSS and how do we use it?
![Page 34: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/34.jpg)
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>
![Page 35: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/35.jpg)
The attributes of a tagparagraph tags
<p class=“first_paragraph
example_class”
The Paragraph Tag
id=“opening”
class
id
>my paragraph text</p>
class
![Page 36: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/36.jpg)
Using the attributes in
CSSparagraph tags
<p class=“first_paragraph example_class”
id=“opening”>
The Paragraph Tag
class idclass
.first_paragraph {}
.example_class {}
#opening {}
![Page 37: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/37.jpg)
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>
![Page 38: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/38.jpg)
<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>
![Page 39: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/39.jpg)
#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>
![Page 40: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/40.jpg)
<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; }
![Page 41: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/41.jpg)
<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; }
![Page 42: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/42.jpg)
<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>
![Page 43: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/43.jpg)
<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; }
![Page 44: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/44.jpg)
<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; }
![Page 45: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/45.jpg)
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>
![Page 46: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/46.jpg)
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
![Page 47: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/47.jpg)
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
![Page 48: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/48.jpg)
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
![Page 49: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/49.jpg)
The basics of
JavaScriptOne slide, that’s all.
![Page 50: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/50.jpg)
JavaScript & jQuery
SelectorsReusing what we already know.
console.log( jQuery(“.first_paragraph”).text(
);
selector
![Page 51: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/51.jpg)
The basics of
WordPressWhat does this all really mean for WordPress?
![Page 52: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/52.jpg)
![Page 53: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/53.jpg)
<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
![Page 54: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/54.jpg)
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;
![Page 55: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/55.jpg)
About PHPBasic PHP usage
<title><?php echo ‘hello’; ?></title>
open php close phpphp command
![Page 56: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/56.jpg)
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?
![Page 57: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/57.jpg)
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?
![Page 58: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/58.jpg)
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
![Page 59: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/59.jpg)
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
![Page 60: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/60.jpg)
Basic WordPress
CommandsHooking into WordPress
function my_content( $content ) {
$content = “Hello World!”;
return $content;
}
add_filter( ‘the_content’, ‘my_content’ );
![Page 61: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/61.jpg)
Basic WordPress
CommandsWordPress shortcodes
function my_shortcode( $content = null ) {
return ‘Christopher Ross’;
}
add_shortcode( ‘my_name’, ‘my_shortcode’ );
![Page 62: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/62.jpg)
Putting it all togetherUsing HTML, CSS, and WordPress together.
![Page 63: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/63.jpg)
Putting it all togetherUsing HTML, CSS, and WordPress together.
- All WordPress pages include
extensive CSS and HTML to all on.
![Page 64: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/64.jpg)
![Page 65: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/65.jpg)
![Page 66: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/66.jpg)
<?php
$menu_class = ( is_rtl() ) ? ' navbar-right' : '';
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar
?>
![Page 67: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/67.jpg)
<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:/
![Page 68: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/68.jpg)
![Page 69: Building the basics (WordPress Ottawa 2014)](https://reader034.vdocument.in/reader034/viewer/2022042715/55a252be1a28abc7758b4727/html5/thumbnails/69.jpg)
<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 ) );
?>
+