how to embed a customized widget in wordpress

58
How to Embed a Customized Widget in WordPress By: Jaysarie C. Gundran The Evolving Virtual Assistant

Upload: jaysarie-gundran

Post on 15-Apr-2017

1.169 views

Category:

Education


3 download

TRANSCRIPT

Page 1: How to Embed a Customized Widget in WordPress

How to Embed a Customized Widget

in WordPress

By:Jaysarie C. Gundran

The Evolving Virtual Assistant

Page 2: How to Embed a Customized Widget in WordPress

This is the customized widget to be embedded

Page 3: How to Embed a Customized Widget in WordPress

Log in to your WordPress account

Page 4: How to Embed a Customized Widget in WordPress

A dashboard page will open

Page 5: How to Embed a Customized Widget in WordPress
Page 6: How to Embed a Customized Widget in WordPress

Click either the Pages Tab or Posts Tab in the Dashboard

Page 7: How to Embed a Customized Widget in WordPress
Page 8: How to Embed a Customized Widget in WordPress

In this tutorial, the posts tab is chosen

Page 9: How to Embed a Customized Widget in WordPress
Page 10: How to Embed a Customized Widget in WordPress

Click the Posts tab

Page 11: How to Embed a Customized Widget in WordPress

This will open

Page 12: How to Embed a Customized Widget in WordPress

Click “Add New”

Page 13: How to Embed a Customized Widget in WordPress

The Post Editor Screen will open in the visual tab

Page 14: How to Embed a Customized Widget in WordPress
Page 15: How to Embed a Customized Widget in WordPress

Click the “Add Media” button

Page 16: How to Embed a Customized Widget in WordPress
Page 17: How to Embed a Customized Widget in WordPress

Open the file to be embedded

Page 18: How to Embed a Customized Widget in WordPress

If the file to be embedded is in the media library, click the media library tab

Page 19: How to Embed a Customized Widget in WordPress
Page 20: How to Embed a Customized Widget in WordPress

If the file to be embedded is in another location and still need to be uploaded, click “Upload Files” tab

Page 21: How to Embed a Customized Widget in WordPress
Page 22: How to Embed a Customized Widget in WordPress

Click “Select Files” button and locate the customized widget to be embedded

Page 23: How to Embed a Customized Widget in WordPress
Page 24: How to Embed a Customized Widget in WordPress

Click the “Open” button

Page 25: How to Embed a Customized Widget in WordPress
Page 26: How to Embed a Customized Widget in WordPress

Click the “Insert into post” button

Page 27: How to Embed a Customized Widget in WordPress
Page 28: How to Embed a Customized Widget in WordPress

Your customized widget will be added on the Post Editor Screen

Page 29: How to Embed a Customized Widget in WordPress
Page 30: How to Embed a Customized Widget in WordPress

Click the Text Editor tab on Post Editor Screen

Page 31: How to Embed a Customized Widget in WordPress
Page 32: How to Embed a Customized Widget in WordPress

The Text Editor tab will show the code of the customized widget

Page 33: How to Embed a Customized Widget in WordPress
Page 34: How to Embed a Customized Widget in WordPress

Highlight the code of the customized widget then right click

Page 35: How to Embed a Customized Widget in WordPress
Page 36: How to Embed a Customized Widget in WordPress

Copy and paste the code in NotePad

Page 37: How to Embed a Customized Widget in WordPress
Page 38: How to Embed a Customized Widget in WordPress

From the Add New Post Section, Click the “Appearance” tab then “Widgets”

Page 39: How to Embed a Customized Widget in WordPress
Page 40: How to Embed a Customized Widget in WordPress

Leave the Add New Post Section by clicking the “Leave this Page” button

Page 41: How to Embed a Customized Widget in WordPress

The Widgets Section will open

Page 42: How to Embed a Customized Widget in WordPress
Page 43: How to Embed a Customized Widget in WordPress

Depending on the theme being used, widgets can be added to the sidebars, footer, header and other areas

Page 44: How to Embed a Customized Widget in WordPress

We will use the Text Widget

Page 45: How to Embed a Customized Widget in WordPress
Page 46: How to Embed a Customized Widget in WordPress

In this tutorial, we will place it in the default sidebar

Page 47: How to Embed a Customized Widget in WordPress

Drag the Text Widget in the area where you want your customized widget to appear

Page 48: How to Embed a Customized Widget in WordPress
Page 49: How to Embed a Customized Widget in WordPress

This will open

Page 50: How to Embed a Customized Widget in WordPress

Embed the code of the customized widget that we saved in the NotePad under Content

Page 51: How to Embed a Customized Widget in WordPress
Page 52: How to Embed a Customized Widget in WordPress

You can also add a Title to your customized widget

Page 53: How to Embed a Customized Widget in WordPress
Page 54: How to Embed a Customized Widget in WordPress

Click Save

Page 55: How to Embed a Customized Widget in WordPress
Page 56: How to Embed a Customized Widget in WordPress

View Site

Page 57: How to Embed a Customized Widget in WordPress

Our embedded customized widget now appears in the sidebar of the WordPress Site

Page 58: How to Embed a Customized Widget in WordPress