wordpress html_text_widget - pdf document

Using the WordPress HTML Text

Widget To Build Some Extra Things

Presented by:

Anh ThienWeb Developer, WordPress Enthusiast

I ���� WordPress

May 2014 2

Agenda

I ���� WordPress

1. HTML Text Widget – What is it?

1.1. Definition

1.2. Its Applications

2. Building some extra things

2.2. Adding your favorites: Music Playlist, Flickr, YouTube

2.1. Building your own Social Buttons

4. Conclusion

3. Suggestion & Notes

May 2014 3

1. HTML TEXT WIDGET

I ���� WordPress

NEXT

May 2014 4

1.1. HTML Text Widget – What is it?

I ���� WordPress

HTML Text Widget

����HTML = Hyperlink Text Markup Language, is used for creating

Website or Web Application.

���� It has its own syntax (code) to instruct the Web Browser to “draw”

Web Interface, or to implement some commands.

���� HTML is the Fundamental for any Web Technology (Both ASP,

ASP.NET, PHP, JSP : “understand” HTML codes)

���� HTML codes are easy to learn and work!

May 2014 5

1.1. HTML Text Widget – What is it?

I ���� WordPress

HTML Text Widget

�WordPress offers users this Text Widget for making their own

extra things (e.g.: Social Link Buttons, Favorite Music Playlist,

YouTube, Flickr, :)

�Just write simple HTML codes, then enjoy!

May 2014 6

1. HTML TEXT WIDGET

I ���� WordPress

NEXT

May 2014 7

1.2. HTML Text Widget – Some Applications

I ���� WordPress

May 2014 8

Live Action

I ���� WordPress

1. Login your WordPress Site

2. Go to your Admin’s Dashboard

May 2014 9

Admin Dashboard

3. Scroll to “Appearance”

4. Select “Widgets”

May 2014 10

5. Seek for “Text Widget”

6. Choose this Text Widget to your

side bar

May 2014 11

7. Write or Paste your

HTML codes here :

May 2014 12

2. Building some extra things

I ���� WordPress

NEXT

May 2014 13

2.1. Building your own Social Buttons

I ���� WordPress

We can create this easily with

ONLY 2 LINES of HTML code

(for each Social Button)

� To hold our Social Link � using HTML tag <a>

� To show visitors Social Icon to click on � using HTML

tag <img>

May 2014 14

2.1. Building your own Social Buttons (cont’d)

I ���� WordPress

� Our “recipe”:

� For the tag <a>

<a href=“your_web_address”

target=“_Blank” title=“your_title” >

Put some text or image

here :

</a>

a: HTML tag to “anchor” our Link

href: syntax for the Web Browser

know where our Link refers

target=“_Blank”: open New

Window for a Web page

title: to show visitors “prompt” when

they hover their mouse on our Social

Button (eg.: “We are on Facebook”)

May 2014 15

2.1. Building your own Social Buttons (cont’d)

I ���� WordPress

� Our “recipe” (cont’d):

� For the tag <img>

< img src=“your_image_link”

width=“80px” alt=“your_image_here” >

width: the “breadth” attribute, in “pixel”

alt: Text represents when the image is

lost or cannot be loaded

src: to show the Path of stored

image on Web Server

img: HTML tag to show our image

May 2014 16

2.1. Building your own Social Buttons (cont’d)

I ���� WordPress

� Live codes:

� For Facebook:

<a href=“http://www.facebook.com/your_page”

target=“_Blank” title=“I’m on Facebook” >

We will have the tag <a> (�)

nests the tag <img> (�)

�

</a>

<img src=“fb_icon_link” width=“80px” alt=“fb_icon_here”>�

&nbsp; To draw a “space” between

each Social Button

/* Do the same for other Social Buttons (Twitter, Google Plus, etc.) */

/* There are many FREE Social Icons on the Internet to “grab” Link & enjoy */

May 2014 17

Choose FREE & Beautiful Social Icons

I ���� WordPress

1. Go to “search”

May 2014 18

Choose FREE & Beautiful Social Icons

I ���� WordPress

2. Image Result

May 2014 19

Choose FREE & Beautiful Social Icons

I ���� WordPress

3. Pick a Free Icon & Grab its Link (Right Click)

May 2014 20

Choose FREE & Beautiful Social Icons

I ���� WordPress

4. Choose the Link & Paste it to your < img src = “:”

May 2014 21

Social Buttons – Live Demo

I ���� WordPress

NEXT

Let’s visit this WordPress Site:

http://applefantips.wordpress.com

May 2014 22

2. Building some extra things (cont’d)

I ���� WordPress

NEXT

May 2014 23

2.2. Adding your favorites - Music Playlist

I ���� WordPress

WordPress has been

Partner with

To offer users the

Music feature for FREE

(with limit)

(*) The SoundCloud FREE offer is limited to

2 hours of Total Song Duration

All things we need are just Sign In (or Sign up)

SoundCloud � Create or Select the Set of

Songs we like, then SoundCloud will give us the

HTML Generated Code to embed into our

WordPress

May 2014 24

1. Go to SoundCloud

May 2014 25

2. Search for a playlist

May 2014 26

3. Hit “Share”

May 2014 27

Pick the “Embed” Tab

May 2014 28

4. In the “Embed” tab,

scroll down & Expand

the Options

5. Pick the HTML Generated

Code for WordPress

May 2014 29

6. Paste it to your Text Widget

May 2014 30

All done!

May 2014 31

Music Playlist – Live Demo

I ���� WordPress

NEXT

Let’s visit this WordPress Site:

http://mywpblogdemo.wordpress.com

May 2014 32

2. Building some extra things (cont’d)

I ���� WordPress

NEXT

May 2014 33

2.2. Adding your favorites - Flickr

I ���� WordPress

Flickr is the Large & FREE

online sharing Photo service

of Yahoo!

We can “embed” our favorite Flickr

Gallery by the 2 HTML codes

� To hold our favorite Gallery Link � using HTML tag <a>

� To show visitors the Cover Photo to click on � using HTML

tag <img>

/* Do the same as the above section (2.1) “Building your own Social

Buttons” */

May 2014 34

2.2. Adding your favorites - Flickr

I ���� WordPress

� Live codes:

<a href=“Flickr_Gallery_Link” target=“_Blank”>�

</a>

<img src=“Cover_Photo_link” width=“200px”>�

Next, we will have some “snapshots” to show how to “catch” the 2

links above easily.

Let’s begin! �

May 2014 35

1. Go to Flickr

May 2014 36

2. Search a Flickr photo to add to the Favorite Gallery

May 2014 37

3. Pick a Flickr photo to add to the Favorite Gallery

Remember to

“like” � - to

encourage its

photographer

May 2014 38

4. Go to your Flickr Gallery

May 2014 39

5. Choose the “Light box” View

May 2014 40

6. Grab the Light Box Link below, to add to <a href=“ :”

May 2014 41

7. Choose a Cover Photo to display on WordPress

(For example, we select this “Red Leaf” to

be our Cover Photo)

May 2014 42

8. Grab its Link (Right Click), to add to <img src=“ :”

May 2014 43

9. We will have the Full & Simple HTML codes (<a> nests <img>)

May 2014 44

The Result

When we click on

the Cover Photo,

it will direct us to

the “Image Slide

Show”

May 2014 45

“Image Slide Show”

May 2014 46

2. Building some extra things (cont’d)

I ���� WordPress

NEXT

May 2014 47

2.2. Adding your favorites - YouTube

I ���� WordPress

WordPress allowed users

to add YouTube Video or

YouTube Playlist to any

WordPress Site.

Just “Pick” a YouTube Video or YouTube

Playlist you love, then paste their

generated codes to WordPress

(*) WordPress may also correct that code,

but it still displays properly the embedded

YouTube Videos.

LIVE ACTION

May 2014 48

1. Go to YouTube & find your favorite playlist

May 2014 49

2. Hit “Share”, then choose “Embed”

Share this

Embed this

May 2014 50

Paste that generated code to

your HTML Text Widget.

See what’s different?

(*) WordPress has corrected it,

but it’s still OK

May 2014 51

Flickr, YouTube – Live Demo

I ���� WordPress

NEXT

Let’s visit this WordPress Site:

http://lukhachquan.wordpress.com

May 2014 52

3. Suggestion & Notes

I ���� WordPress

NEXT

May 2014 53

3. Suggestion & NotesI ���� WordPress

� Wordpress HTML Text Widget for FREE Site only accepts

HTML tags (Free Wordpress sites are recognized as:

sitename.wordpress.com)

� If you want to do more with JavaScripts (e.g.: to run

AdsWord in Wordpress HTML Text Widget), you need a Self

– Hosted Wordpress Site (that’s recognized as yoursite.com,

etc.)

� YouTube, SoundCloud : are allowed to embed into

WordPress sites, while the others are not. So, the 2 HTML

Codes which <a> nests <img> will help you build your own

things with HTML Text Widget.

May 2014 54

4. Conclusion

I ���� WordPress

NEXT

May 2014 55

4. ConclusionI ���� WordPress

� All Demos above just show us that, with WordPress HTML

Text Widget, we can do by ourselves many things we want.

� Visit my site to discover more:

http://anhnguyen88.wordpress.com

THANK YOU!

May 201456

I ���� WordPress

Q&A

May 201457

I ���� WordPress

Having question(s)?

Reach me at:

thienanhnguyenbui@gmail.com

Or:

thecoder2013@gmail.com