Adding Widgets in the Text Field of Your Side Bar

This one took me a while to figure out … but if I can do it, so can you. A better title might be “The Art of Stealing Code and Modifying It to Suit Your Own Purposes”. Yah?

Craig showed us the “visual” and the “text” side of the WordPress site builder. We do our work in the visual side, using macros made available by the software company in a format that looks close to the publication version, it gets translated into html on the text side, and then into the “prettier” published version when you visit the website as an outsider. Over the years, I figured out that many of the software we use can have more customized output when we publish if we modify the code or enter our own simple code. I found this in SurveyMonkey, Moodle, Atlas and WordPress.

But how do you figure out how to modify pre-existing code?

  • trial and error … you can’t break it. ex, I wanted my embeded YouTube Video to be smaller. So, I went into the Text side, figured out that frame width and height must be the code determining the size, so changed the numbers, trying to keep the aspect ratio in tact. It worked!
  • view the source code of something you want your product to look like and copy/paste the bits that look relevant
  • find an html translator or code cheat sheet or a kind soul who has posted a bunch of code for you to copy and paste to do a certain function

My basic understanding of html coding: all html code starts with <dosomething> has the text or link in the middle and ends with </dosomething>

    • The <> says it is code, the “dosomething” is the instruction and when you put / infront of the instruction, it tells the html decoder that this is the end of the section to which it should apply the instruction
    • so <b> is the instruction for bold and you would code it by <b>hey, read this bit</b> and then it would look like hey, read this bit
    • You can string together html code and it will look for the “pair” of instructions doing what ever it is supposed to do to the content inside the bookends except any bits found in the < > symbols so if you want part of your text bolded and part underlined you could code it as <b><u>This will be the bold and underlined bit</b> while this part just has the pleasure of being underlined</u> and it would look like this This will be the bold and underlined bit while this part just has the pleasure of being underlined
    • You might think I cheated, and just used the macro buttons above. I did, but just to prove that this could be useful, here is the code for somethings not found in the buttons above:

Don’t you want your text to be able to be viewed really small?  Or to be able to write superscript or subscript ? OK, maybe not. But tables can be handy.

Column 1 Column 2 Column 3
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell

From the WordPress Support Page

HTML Tags

WordPress.com allows the following HTML code in your posts, pages, and widgets:

address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var

Check out W3 Schools for more information about what each of these HTML codes are used for.

If you are familiar with HTML, you’ll notice that codes such as embed, frame, iframe, form, input, object, textarea and others are missing from the above list. Those codes are not allowed on WordPress.com for security reasons.

But the bit I really wanted to get to … linking your WordPress site using the text widget in the side bar.

1) From the Dashboard, under Appearance, open the Widgets and drag a Text field into the side bar menu.

2015-07-23_2012

Title the Text Field and copy paste the html code below into the text box, modifying it to link to your social media pages.

2015-07-23_2018Code:

<div><a href=”yourtwitterURL“><img title=”Twitter” src=”https://socialmediawidgets.files.wordpress.com/2014/03/twitter.png” alt=”Twitter” width=”35″ height=”35″ /></a><a href=”yourpinterestURL“><img title=”Pinterest” src=”//socialmediawidgets.files.wordpress.com/2014/03/pinterest.png” alt=”Pinterest” width=”35″ height=”35″ /></a> <a href=”yourfacebookURL“><img title=”Facebook” src=”https://socialmediawidgets.files.wordpress.com/2014/03/facebook.png” alt=”Facebook” width=”35″ height=”35″ /></a> <a href=”mailto:youremailaddress“><img title=”Email” src=”https://socialmediawidgets.files.wordpress.com/2014/03/email.png” alt=”Email” width=”35″ height=”35″ /></a><a href=”//yourblogURL/feed”><img title=”RSS” src=”https://socialmediawidgets.files.wordpress.com/2014/03/rss.png” alt=”RSS” width=”35″ height=”35″ /></a></div>

 

Leave a Reply

Your email address will not be published. Required fields are marked *