Skip navigation

Lorelle on WordPress, Blogging, Social Media, and Web Publishing

Lorelle on WordPress - What is New on the site banner.


WordPress School: HTML Tags

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.The last lesson was the HTML and CSS Tutorial, another mini-series on Lorelle’s WordPress School. This is a very basic tutorial on HTML and CSS to prepare you for WordPress site customization and WordPress Themes.

This tutorial in the series will help you understand the basics of an HTML tag, the architectural code wrapped around the content on our web site, styled by the CSS.

According to a definition on Webopedia:

HTML Tag: A command inserted in a document that specifies how the document or a portion of the document should be formatted. Tags are used by format specifications that store documents as text files…to mark a section of a document with a formatting command.

In your word processor, when you make a word or phrase bold, codes are embedded in the document that turn on the bold characteristics, then turn on them off. Same applies to document formats such as the margins, fonts, font sizes, subtitles, and so on. Hidden under the surface of your document are the instructions, little bits of code that set the formatting and positioning of the content within. The “Reveal Codes” feature of the once highly popular and respected word processor, WordPerfect, displayed these codes under the hood for the ultimate control of the user on styling the presentation of the document. Eventually, MS Word added the feature, accessible through the Shift+F1 keyboard shortcut. Check a Word document to see the formatting styles for that document.

Screenshot of WordPerfect Reveal Codes Displays the codes under the document to style the content - Lorelle WordPress School.

A web page is no different. HTML tags hold the content in containers, so to speak, with the tag turned on and off around the content, and there is a set of instructions called styles that tell the code how to appear when viewed in the web browser.

<p>This is a sentence in a paragraph HTML tag with 
a <strong>bold</strong> word.</p>

In this example, a paragraph HTML tag holds a sentence with one word in it set as bold. The paragraph tag opens, the bold tag opens, then closes around the word, then the paragraph tag closes, closing the paragraph. Read More »

WordPress School: HTML and CSS Tutorial

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Over the past week we’ve been learning about the web browser, your gateway to WordPress and the web. This was a precursor to the next mini-series of tutorials in Lorelle’s WordPress School free online course. We are going to learn HTML and CSS.

Learning WordPress from the inside out means learning the basic fundamentals of HTML and CSS. HTML is the core architecture of the web. It is the framework that holds content and design. WordPress Themes are built on the architecture of HTML, the styles or “paint” of CSS, and the engines of PHP, JavaScript, jQuery, WordPress Template Tags, and other web programming languages.

According to Wikipedia, HTML as created by Berners-Lee and his team was to allow not just text but graphics to be converted into visual or audible content accessible by anyone.

The first publicly available description of HTML was a document called “HTML Tags”, first mentioned on the Internet by Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML…

HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer’s additional use of CSS.

HTML links and code in web writing.When it comes to learning HTML, treat it like learning a language. Okay, not the whole language. This isn’t an HTML course. We are going to learn the basics to give you a fundamental understanding of how a web page is formed and how to manipulate some basic HTML and CSS to arrange and style the end results. Consider it like learning a vacation language. You will learn just enough to get you through the adventure.

By the time you complete this series of tutorials, you should be able to add inline styles to WordPress posts and Pages, add HTML to the Text Widget and other areas of your site, and tweak your WordPress Theme. When we get to learning more about WordPress Themes, you will be able to speak the lingo and communicate with the natives.

As you go through these next tutorials, work hard to visualize what you are doing, not just do it. HTML works best when you can see what it looks like in your mind as you work on the code because most of the time you won’t be able to see it until you generate the web page in the browser. Working with HTML requires a lot of imagination, which can make it great fun for many and frustration for a few. Breathe through it. I know you can do it. Read More »

WordPress School: Bookmarklets and User Scripts

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the last tutorial in Lorelle’s WordPress School free online course covering the web browser, your gateway to the web and WordPress, we covered bookmarks and how to save a web page for later access and reading. In this tutorial, we take bookmarks a little further by exploring browser bookmarklets and user scripts, small but powerful JavaScript programs to extend the functionality of your web browser on the web and with WordPress.

I highly recommend you read the previous tutorial before going forward to learn the basic terminology and functionality of bookmarks and using the bookmark bar.

Browser Bookmarklets

A bookmarklet is a JavaScript saved as a bookmarklet to your bookmark bar or in your bookmark manager. There are bookmarklets you click to activate and others that will activate automatically when you load the web page or website associated with the bookmarklet’s code.

Think of bookmarklets as mini-programs. They contain instructions to take action on the web page you are viewing. For example, if you are using the bookmarklet to send a web page to your Kindle app for reading later, you must click the bookmarklet name on the bookmark toolbar to initiate the action to save the web page in a format and send it from the browser to your Kindle. There are several steps in the process of that sending, each controlled by the program code in the bookmarklet. To do it yourself would involve those steps. Letting the bookmarklet do it for you saves you those steps.

Like bookmarks, bookmarklets can get cumbersome to keep organized, so take care in placing them where you can find them and consider creating folders for them, which may be added to the bookmark bar for drop down selections.

WordPress Press It BookmarkletWhile there are thousands of bookmarklets out there, let’s focus on ones that will help you with WordPress, research and writing for the web, and related topics. Then we will look at user scripts, bookmarklets managed with Greasemonkey or Tampermonkey. While they are basically similar, user scripts require the code libraries and functionality of a userscript manager and go beyond the actions of bookmarklets.

The first and most powerful bookmarklet for WordPress was Press It. Added to your browser bookmarks, you’d select the text on a web page, click the bookmarklet, and it would generate a simplified version of the WordPress Post interface with the selected text in the awaiting post along with a link to the source, ready and waiting for you to add your words. With the ever-changing interface and improvements in WordPress, this was changed to the Press This bookmarklet. Read More »

WordPress School: Week 10

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This past week on Lorelle’s WordPress School the focus was on the web browser, helping you to learn the basics of the most important tool in your arsenal for working with WordPress. Like any tool, the more you learn about how it works, the better you work with it.

I’ve one more web browser post and then we are moving into some basic HTML and CSS, the programming language that instructs a web browser on how to display a website. With the basic elements of web design programming under your belt, we can move forward with confidence through the rest of the course as we move into site customization and WordPress Themes and Plugins.

This week 10 – wow! A great landmark week!

Want to Join Us?

Lorelle WordPress School Tips and Techniques Badge.While this course started the first of February, it is a year-long course designed to go at your own speed. Just because a few people started from the beginning, you are welcome to join at any time.

You do not have to rush to catch up. As one of the participants explained, “you will be ahead of us because you will learn from our mistakes.”

When you complete an assignment, you may share the link from test site in the WordPress School Google+ Community post for that assignment. No matter how far along the others are, and everyone is moving at a different pace, they will be there to cheer you on and help you through the process, as will I.

Come join us by introducing yourself to the other participants and tell us why you are here. We love meeting new folks!

This week is the start of my WordPress college course at Clark College in Vancouver, Washington. CTEC 160 is packed with some amazing people eager to learn web publishing, social media, web design, web development, and web programming. There are some journalism and business tech students in there, too, making for a beautiful mix. They represent the quilt that is the WordPress Community, people from all walks and ages of live brought together with a common interest.

For some, this is a required course in their degree. For others, they are in the class by choice. For you, it is all about choice. The choice to join us, the choice to participate, the choice to use this knowledge on your own site or possibly for another such as a non-profit or employer.

I know what pushes my students forward: grades. Without the grade, they can’t take another step forward on the chess game that is their educational life and career.

What is it that pushes you forward in this process? I’m not hounding you to submit assignments on G+ or in the comments below. There is no grade here. No judgment. No pressure. What keeps you going?

This I know. Whatever it is that keeps you going is what keeps you going in life. It is the passion for living and learning. It is the desire to be better. It is the need to learn how to do it yourself. It is the desire to see things through.

Or maybe a friend or relative is pushing you to do this.

Whatever the reason, keep going. The lessons you learn in this course the most have nothing to do with WordPress. They have to do with you.

Whatever gets in your way has been there before. Whatever pushes you forward has always been there. If you wish to change the obstacles and focus more on the pushes, that is up to you.

Either way, you are welcome here. That is part of the magic of the WordPress Community. We take all, deny few, accept the unacceptable, push out the harmers, and cherish the relationships the find us on our unusual journey through a virtual world.

The WordPress School Google+ Community Discussions and Assignment

Each week, our WordPress School Google+ Community features additional discussions and assignments helping you learn more about how WordPress works and all the ways to use WordPress. This post’s G+ discussion is “Week 10 Summary: Web Browser.” Come join us.

Current additional assignments and discussions held in the Google+ Community include:

If you are new to the Community, join us by by responding to the assignment posts rather than starting your own thread on the assignment discussion. This keeps the discussions together so we can learn from each other as we work on each assignment.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


WordPress School: Bookmarks

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.This week on Lorelle’s WordPress School free online course we’ve been covering the web browser, your gateway to the web and WordPress. So far in this Web Browser Guide series we’ve covered some web browser history, keyboard and mouse shortcuts, browser tabs, and search operators and shortcuts to help you find WordPress help as well as research topics and citations for your WordPress site.

This tutorial and the next are related. They are about how to:

  1. Preserve web pages for future access or reading
  2. Use browser scripts as bookmarklets and user scripts

What relates the two? Both may use the browser bookmark bar, the area where you may store information and browser scripts to improve your web browsing experience.

Here are some terms to help you get started with these two tutorials:

  • Bookmark: A bookmark is a saved web page. The address is saved in your browser’s Bookmark Manager. If desired, bookmarks may be sorted into folders or groups and subgroups to organize them and make them easier to find. You may also control how and where they appear on your bookmark bar or menu in your browser, bringing one click access to the bookmarks.
  • Bookmark Bar: The bookmark bar is a menu under the address bar in your web browser with saved bookmarks. It may also contain JavaScript for browser-related actions.
  • Send To: Developed even before mobile, the sendto function found in many computers and browsers is the ability to send a web page to another location. The location could be to send the web page from Firefox to Internet Explorer to view how the web page looks in the different browsers. It could be to send the web page link by email, to your phone, from your phone to your computer, to your tablet, and to social media accounts. You may also send the web page to various services and apps for storing for later access and reading.
  • Browser Extension or Add-on: Two synonymous names, extensions and browser add-ons extend the functionality of the web browser, adding features and functions based upon your needs and goals. They are similar to the concept of WordPress Plugins.
  • JavaScript: JavaScript is an object-oriented computer programming language most commonly used on the web to create interactive effects and actions. JavaScript may be saved as a bookmark on the bookmark bar for actions related to the web page you are viewing or open other web pages and web actions.
  • Bookmarklet: A bookmarklet is a JavaScript script saved as a bookmark to the bookmark bar. When clicked, it initiates an action typically associated with the web page currently loaded in the browser screen.
  • Userscript: A userscript/user script is also known as a browser extension or add-on, a written and publicly shared JavaScript presented for easy adding to the web browser. The most common collections and web userscript extensions are used in combination with the userscript managers Greasemonkey for Firefox and Tampermonkey for Chrome.

Let’s start simple with bookmarks and build our way up through the other web browser features. Read More »

Go Naked: CSS Naked Day April 9

In 2006, the First Annual CSS Naked Day was held, a tribute to honor web designers, the painters of our websites. I celebrate the holiday most years on this site. Every year on April 9, web developers, designers, and those honoring web design and programming celebrate by removing the styles on our sites for 24 hours.

By turning off the CSS, the design styles of my website, it is stripped down to the HTML architecture. It will look similar to what websites resembled in the earliest days of the web, bare bones architecture holding the content and little else.

The second year, 2007, mine and thousands of other sites disrobed to honor CSS Naked Day. By 2008, there were hundreds of thousands of sites participating.

In 2008, this site went naked and I explained:

I honor the web designers who “walk the walk” and volunteer their time to ensure those standards grow with the web not against. I honor web browser developers who understand the need for standards and thus work with them, also not against them, for our web browsing pleasure, helping designers design well and avoid all the hacks and customizations on a per-browser basis.

I honor the founders of the web, the great minds who looked into the future and said, “Everyone must have access to this.” They meant everyone. Every person on any computer using any method to access the web. In their minds, they wanted to have people on different computer operating systems be able to share data. Today, this has stretched to include access for the blind and visually impaired, disabled, deaf, Mac user, Windows user, Linus user, cell phone, web TV, big screen, little screen, all the various methods the web is accessed so the data can flow both ways with ease.

I also honor those who give so much of their creativity to the WordPress Community, while setting a standard in web design around the world. Thank you to all who understand that a free WordPress Theme is a resume. A business card. A portfolio of your work. By giving, you are showing the world what you are capable of. It’s a way to give back to the WordPress Community which gives so much of its time to volunteering to support WordPress through their work on WordPress Plugins, donating and writing articles for the WordPress Codex, the online manual for WordPress Users, and volunteering their time in the WordPress.com Forums and WordPress Support Forums to help others.

For those who make a living off of the free WordPress blogging platform, I honor you for giving back to that which helps you pay your rent or mortgage. The WordPress Community is a fantastic free school of education for coders, programmers, designers, writers, and hackers. Thank you for volunteering your time and skills towards the improvement of WordPress and WordPress development.

My causes at the time was to break down one of the last barriers on the web: language. That is still a rousing cry of mine, but we are closer than every to being able to sit in our homes or offices in our language and read the words of others written in their language and translated instantly into ours.

Google Chrome has translation built into their browser. There are Firefox extensions that provide similar translation options, but it requires manual action rather than an integrated, seamless experience.

In addition to honoring the designers who make our sites look beautiful and those behind web standards and laws that ensure the web remains open and accessible to all, in spite of narrow-minded governments, politicians, and corporations determined to control such access and transparency, let’s make the web truly open and accessible to all through browser-activated translation.

How to Go Naked on CSS Naked Day April 9

If you would like to join me naked on the web, here are the instructions.

First, write and publish a post warning people that you are changing your WordPress Theme to go naked for CSS Naked Day. The web is important to all of us, and the design of the web and our website is critical to our needs as well as the needs of our readers and visitors, helping to visually direct them to the most critical content on the site. Take a stand and tell the world why you think it is important to stand naked for 24 hours to remind us how important access to the web is, and how important this cause is to you.

Please include a link to the original post by Dustin Diaz and this and any other explanations of the annual event. Jens Oliver Meiert sppears to have taken over the reigns from Dustin to keep the annual event alive. There is also a CSS Naked Day Google Group you can join to stay updated.

  • WordPress.com Not Premium: Unfortunately, unless you have purchased the Premium package for Custom CSS, your option is to switch to a minimalist WordPress Theme and not customize it in any way, just strip it down to the barest essentials. Be sure to remove the header art and set it to just text for the site title, and remove all background color or set it to white. I recommend the following WordPress Themes from the WordPress.com Free Themes Directory. They are still styled, and a bit minimalist, but could be a dramatic change from your current Theme:
  • WordPress.com Premium: If you have the CSS Extra as part of the Premium services on WordPress.com, do the following, taking notes on everything you do as you go:
    1. Go to WP-Admin > Themes > Customization > CSS
    2. Select all and copy or cut the CSS instructions
    3. Paste them into a TEXT EDITOR and save the file where you can find it within 24 hours or so
    4. Delete all of the styles in the CSS form and hit SAVE AND PUBLISH, and your site should be stripped bare of custom styles set by the CSS
    5. Go to the Header, Colors, Background, and other Theme settings and set them to the default or blank, taking notes on the changes you’ve made, and hit SAVE AND PUBLISH. This should reset your Theme back to the basics if the CSS styles didn’t.
    6. 24 hours later, follow your notes and restore the header, background, colors, etc., and the CSS file, and hit SAVE AND PUBLISH. Your site should be restored. No widgets and content customization should be impacted.
  • Self-hosted or Managed WordPress: There is a CSS Naked Day WordPress Plugin by Aja Lapus and other manual techniques, including the basics:
    1. Go to the CSS file for your active WordPress Theme through WordPress. Copy and save the CSS instructions and delete them from the file so it is empty, and save it.
    2. Or access your site through FTP and rename your stylesheet for the active Theme from styles.css to styles.bak. If you are using a Child Theme, do the same with the parent Theme if the styles are not cleanly removed from the site. Rename them back when the event is over.
    3. Or use one of the blank WordPress Themes created just for the event.

Consider joining me to honor the power of Cascading Style Sheets and the visual illusion of the web, as well as the tremendous work web designers and developers do to make our web experience easier.

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


WordPress School: Web Browsers and The Search

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Search is used in WordPress for many different purposes as you prepare, develop, implement, and launch your website, and as you continue to maintain and publish on the site. This tutorial will help you understand how to search within a web page with the web browser, search within a WordPress site, and provide helpful tips on how to search the web in general to help you with your WordPress site.

In Lorelle’s WordPress School, please remember that the underlying motto I keep in mind as I present each of these tutorials is how to make your life simpler, faster, and easier when it comes to WordPress, and that spill out into everything you do on the web. Finding content to blog about on your WordPress site is a part of your web experience as well. Anything you find on the web could be a source of inspiration. How you move it from the source of inspiration to a WordPress post is a part of this topic of how to search within the browser and the web.

Another part of searching on the web is saving what you find for later. While it is nice to assume we can act and respond to everything we discover through our web interactions, some things must be set aside for later review. Some discoveries also take a while to percolate in your brain to become content of value. I’ll cover a little of that in this tutorial as well.

We begin with some basic search techniques, some you are probably familiar with, and some that might be new to you. Read More »

WordPress School: Browser Tabs

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In my WordPress college courses, we make it a habit to have a minimum of four tabs open in the web browser before class starts, ready to start jumping into WordPress. I equate this to having my notebook of paper and pen ready to go when my teachers started teaching in school. The three tabs are:

  1. Email
  2. Class Notes
  3. WordPress site backend/Admin
  4. WordPress test site front end

Depending upon the exercises in the class, additional tabs may be opened for quick access to the information they need to complete the tasks.

For those working on their own laptops, and for you, this process will be even easier and faster by learning about how to pin tabs to preserve them from session to sessions, and how to customize the browser to restore the tabs open during your last session.

In this tutorial on the web browser and WordPress in Lorelle’s WordPress School free online course, we will explore the power of browser tabs, one of the greatest feature inventions in the history of the web browser.

What are Browser Tabs?

Originally, if you viewed more than one web page at a time, more than one browser application program had to be running. That ability is still alive and it is referred to as opening a web page in a new window.

What this meant was that you have two full versions of the program running at the same time, or three, or four, or five, or ten, and each one consumed massive resources on the computer. For the user, it meant playing hide and seek with all those open windows, not sure which one you’d just been to and which one you needed.

Instead of opening the web page in a new window, browser tabs meant you could open a web page in a new tab within the program, not start another version of the program. Tabs had order in a lineal fashion, left to right, oldest to youngest opened. It also gave us the ability to easily open, and load web pages in the background and continue reading where we were on the first web page, making our browsing, or surfing as it was originally called, experience faster with less wait times and less burden on our computers.

Screenshot of Browsers - Browser Tabs in Firefox - Lorelle WordPress School.

With two tabs next to each other, it took little or not time for most of us to develop a two tab preview method for working with WordPress, again, saving us time on the wait for a web page to reload and all the opening and closing of web pages as we move around WordPress. Read More »

WordPress School: Web Browser Shortcuts

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this section of Lorelle’s WordPress School free online course we are exploring the web browser, our gateway to the web, and how it impacts our use of WordPress.

In this tutorial you are going to learn some very basic features and functions of the web browser:

While this may seem academic for most of you, I’m always surprised at how few students and clients of mine know how to find the address of a website to copy or change, don’t know how to right click or even that this is an option on a mouse, nor how to use the most simple of keyboard shortcuts that are universal across almost all software, online and off.

There is no shame in not knowing, and now it is time to learn as these are browser features and functions you will use every day with WordPress.

Here are a few terms and web browser features I will be referring to during these tutorials.

  • Screen: While WordPress refers to each of the Administration area interface as Screens, when I refer to a screen in these tutorials I mean the screen of your computer.
  • Window: Software works in windows, even if you are not using Microsoft Windows. They are the interface windows for each program. If you have Microsoft Word open, it would be open in a window. If you have Firefox open, it would be open in its own window. You may have multiple programs open at the same time, each one in a window, and some programs will allow you to open it multiple times, each one in a separate window. Think of windows as sheets of paper on your desk. The page you are reading is on top, but the others are sitting there waiting for you to read. Just switch to the page to bring it to the front to work on that page, and the others will slip behind. There is no need to file each page away every time you switch to another, then dig it out when you need it a minute later. That wouldn’t be useful nor efficient. Leave the windows open you need. Your computer can take it. It’s designed to do so. It hurts nothing and makes your computer experience faster and more enjoyable.
  • Browser Tabs: A browser tab is a “window” within a web browser that allows you to have multiple web pages open within a single window of the application. They are typically featured at the top under the address bar.
  • Address Bar: The area at the top of the browser window with the address of the web page you are viewing.
  • Browser Menu: The browser menu is the access area to change the browser’s settings and use features and functions of the program. Many web browsers are minimizing the control areas of their screens, removing the standardized File, Edit, View, Help, etc., menu options from the top of the window to a three bar drop down menu. Click it to access the menu options.

Read More »

WordPress School: Web Browsers

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Do you realize we spend more time talking about the web then understanding how the main tool we use to access the web works? I think we take the web browser for granted.

Without it, you wouldn’t be able to watch all those YouTube videos. You wouldn’t be able to let the world know what you had to eat for lunch on Facebook, or tweet out a hashtag for the latest global silliness. You wouldn’t be able to experience Caterday every weekend. You wouldn’t be able to file your taxes online, find a new home, look for a job, take classes, get a map to a location, or access your email. You wouldn’t be able to hangout on Google Hangouts or Skype, Jabber, or Viber with friends and family around the world. You wouldn’t be able to “google it” to find the answer to the question. You also wouldn’t be able to blog.

The web browser is our gateway to the web, the door through which we virtually walk to discover the world around us.

Many say the web is the great democratizer, allowing anyone with an Internet connection access to the world’s collective knowledge. I say it is the web browser. Without it, that access would be constrained to email or code based requests to databases.

The web browser is a graphical interface on the world of the web, allowing us to see and experience the data. And it is all data, a collection of pixels displaying fonts, colors, images, video, and the web browser converts it into a readable and accessible format for the human experience.

Browsers - Pixshark - Web Browser Neutral or Chaotic

Web Browsers as dictated by the Dungeon and Dragons’ Alignment Theory. Credit: Slashgear.

Web Browsers Translate the Virtual and Digital to Readable Content

The purpose of Lorelle’s WordPress School is to teach you WordPress from the inside out. We’ve spent the first part of this educational series teaching you the basics of WordPress, helping you understand how the content features work, publishing posts, styling and structuring those pots, creating links, adding images, video, and starting to customize the look and feel of your site.

Why are the words here italic? How does each word or letter change from the normal font to the italic emphasis?

The web designer or developer would tell you that it is because the words are wrapped with an HTML tag called <em> (formerly <i>). They’d explain how the CSS sets the style for how the HTML tag changes the font to slanted. That’s true, but there is so much more to it. Read More »

WordPress School: Week 9

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Welcome to week 9 of Lorelle’s WordPress School free online course. Last week, we covered:

Hopefully, the image lessons will help you with the graphics most commonly found on a WordPress site. I know that many have been frustrated with learning how to edit and create original images for their site. I will do another round of image lessons later in the course to help you incorporate more original designs into your site.

While we’ve completed the basic content of the Article Series posts on your test site, we will come back to it to edit and add more WordPress features as we did with the article series call-to-action graphic in last week’s assignments.

Want to Join Us?

Lorelle WordPress School Tips and Techniques Badge.While this course started the first of February, it is a year-long course designed to go at your own speed. Just because a few people started from the beginning, you are welcome to join at any time.

You do not have to rush to catch up. As one of the participants explained, “you will be ahead of us because you will learn from our mistakes.”

When you complete an assignment, you may share the link from test site in the WordPress School Google+ Community post for that assignment. No matter how far along the others are, and everyone is moving at a different pace, they will be there to cheer you on and help you through the process, as will I.

Come join us by introducing yourself to the other participants and tell us why you are here. We love meeting new folks!

The next couple weeks are special as I’m staying with a critical WordPress topic but moving slightly away from WordPress to teach you more about the web browser, your gateway to WordPress and the web, and teach you more about HTML.

Don’t fear the code. I will make this easy for you. While you do not have to know HTML to publish on the web, in this course it is critical to know the basics as we are diving deeper into WordPress as we go further, and that involves code.

The first part of next week will cover the web browser. I will teach you keyboard shortcuts and tips for making your use of the browser faster and easier, and talk about how to make the web browser work better for you in WordPress.

We will be focusing on Mozilla Firefox with a nod to Google Chrome. You should not be using Internet Explorer, Safari, or Opera in this course, at least during these code-based sessions. I will be talking about browser extensions and add-ons and these are exclusive to Firefox and Chrome. Also, the other browsers have had problems in the past with the WordPress interface displaying properly. If you haven’t heard yet, Internet Explorer is being retired for a new, web standard browser integrated into the operating system.

Then we will move into the basics of HTML. This is when you will need the text editors as discussed a week ago.

Ready?

The WordPress School Google+ Community Discussions and Assignment

Each week, our WordPress School Google+ Community features additional discussions and assignments helping you learn more about how WordPress works and all the ways to use WordPress. Come join us.

Current additional assignments and discussions held in the Google+ Community include:

If you are new to the Community, join us by by responding to the assignment posts rather than starting your own thread on the assignment discussion. This keeps the discussions together so we can learn from each other as we work on each assignment.

A Weekend With Writing WordPressers

I spent much of the weekend with the amazing people of the WordPress Community and Automattic at Press Publish in Portland, Oregon. Sponsored by Automattic, this was a chance for staff and WordPress experts in web publishing to spend a day sharing their insights on how to use WordPress for writers, authors, self-publishers, and publishers. For those who live to share their words online with WordPress.

It was amazing. The speakers were top notch, covering a wide range of topics focused on web content. Some of the speakers kept their topics simple for beginners, others dove in deep to the internal workings of WordPress and how to make it sing for you.

The next event like this is April 18 in Phoenix, Arizona, and I urge you to go, whether you live nearby or fly there. I’m actually debating checking flight prices to repeat the experience, it was that good.

While you are contemplating the same idea, check out the schedule of WordCamp conferences held around the world. I just announced WordCamps coming up in April on our Google+ Community.

A WordCamp is a day to multi-day conference for WordPress users. A WordPress Meetup is a regularly scheduled event in your community that brings WordPress users together to learn more from each other on how to use WordPress. Check out the WordPress Meetups list for a meetup in your hometown. If there isn’t one, consider starting one.

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

Subscribe to Lorelle on WordPress. Feed on Lorelle on WordPress Follow on Twitter. Give and Donate to Lorelle VanFossen of Lorelle on WordPress.


WordPress School: How to View a Web Page Source Code

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Starting this Monday, we will be diving into web browsers in preparation for some basic HTML lessons to help you learn more about the inner workings of WordPress, WordPress Themes, and web design as part of Lorelle’s WordPress School free online course.
The first step in the process is learning to view a web page under the hood. Yep, it’s time to peel back the pretty and explore the code.

Code - View Page Source Code - Lorelle WordPress School.Go to any web page. This article is a good one.

Right click on the web page in a blank area and select View Page Source, View Source, or something similar. While Chrome and Firefox use the former, different web browsers may use other words for the same thing.

A web browser window will appear displaying the code that displays the website content.

Code - Page Source Code - Lorelle WordPress School.

Don’t be intimidated. Relax. In a bit, this will be as familiar as your living room couch, you know, the one you only use for guests. Yeah, that kind of familiar.

What will be familiar is the content area of the code. First yo have to find it.

Look at the original web page or post. What is the title of the post? Look for a word or phrase in the first paragraph. Use either of those in a web page search on the displayed code (not the web page) window: Read More »

WordPress School: Polls and Surveys

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Coming up soon in Lorelle’s WordPress School free online course is a huge section on interactivity with WordPress, learning about comments, integrating social media, social media automation, and how to encourage and support such interactivity without draining your time, energy, and emotional being. To help you get started thinking about how you can use your WordPress site to promote interactivity, we begin with polls and surveys.

Everyone asks readers “What do you think?” at the end of their posts, a lousy way to interact. It asks for an opinion not a dialog. A fun way to gather information and interact with readers is through polls and surveys.

Automattic, the owner of WordPress.com, also owns Polldaddy.com, a company serving polls to WordPress.com and WordPress Community for free and paid accounts.

In this tutorial and assignment, you will be creating a poll in a post on your test site. Read More »

WordPress School: Screen Capture Images

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this mini-series of tutorials helping you learn how to create and use graphic images in your WordPress site, we’ve covered header art images, adding text overlays to images, and made a call-to-action graphic with a link wrapped around it, all common uses of images with WordPress sites. I’ve also introduced you to the free online web app Autodesk Pixlr, a powerful graphic editor.

In this part of the image lessons, the last in the series, I will teach you about creating a screen capture.

A screen capture is an image taken of your computer screen. Screen captures are used often for all types of web content, demonstrating software, web apps, mobile apps, tutorials, techniques, and more.

Images - Screen Capture with camera - Moire Pattern - Lorelle WordPress SchoolIn the old days of computers, we experimented with cameras, adjusting the shutter speed of the camera pointed at the screen so the Moire pattern wouldn’t appear. It was difficult to get a sharp image.

With the need to capture an image of the screen for tutorial purposes as well as to provide a visual image to help support staff literally see what the user was seeing, the PRINT SCREEN (PRNT SCR) was added to most keyboards and incorporated into most operating systems.

Once you capture an image, then what? You must save it. How?

In Windows, you can paste the Print Screen captured image into any graphic program, including Microsoft Paint, or use the Microsoft Windows Snipping Tool.

On the Mac, you have the ability to use CMD+SHIFT+4 to initiate the screen capture, then drag the cross hair pointer over the area. Click when done to capture the screen. Then paste the image into a graphic program or work with the image saved as a PNG file to the desktop (since OS X v10.6).

There are many other tools to capture the screen for different operating systems. While these are helpful tools, and many use these and nothing else, I’m going to introduce you to a tool that makes the process easier and faster all around. Read More »

WordPress School: Call-to-Action Graphic Images

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In this mini-series of lessons on creating images for your WordPress site, we’ve covered the basics, experimented with two ways of creating header art from scratch and with text overlaying a photograph, and learned how to put text on images for quotes and other purposes.

Today’s image lesson in this series is about creating a call-to-action graphic.

Call-to-action images are images typically wrapped with a link that behave much like buttons, taking the visitor to a destination on the site, or possibly off the site.

In this lesson, we are going to create an article series badge or graphic. It is a call-to-action to visually represent an article series, and the article series on your test site is a prefect example. The image may also represent a category of posts, and this is just two of the many graphic design elements possible using these basic image editing techniques.

I use category and article series badges in many of my posts. My fans love it as it instantly identifies the topic of the post visually. I don’t recommend it for others, but this is a teaching site and it works to create visual continuity. Read More »

Follow

Get every new post delivered to your Inbox.

Join 22,516 other followers