Skip navigation

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, also owns, a company serving polls to 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 »

WordPress School: Text on 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 and experimented with two ways of creating header art from scratch and with text overlaying a photograph. This tutorial covers creating a quote graphic, words over an image used to showcase a quote or to display an image with text overlaid.

In Lorelle’s WordPress School, we’ve covered many of the different ways images are used in our WordPress sites, from profile images to header art to content images and visual examples. Social media is filled with quotes set as graphics, and many websites use them as well.

This image lesson is also a midway point between learning how to add text to an image and turning that image into a badge, icon, or call-to-action image covered in the next tutorial.

How to Use Pixlr

Lorelle WordPress School Tips and Techniques Badge.In the lesson on creating header art images, I went into more detail on how to use Pixlr. Please check that out first to learn the various modular and menu elements and tools.

If you are doing these experiments in your graphic program, note that the steps used in these examples may not match, but they are likely close. Most graphic programs have become fairly standardized.

The need to add words to images on the web go beyond quotes on social media. If you are a serious or professional photographer, comic strip writer and illustrator, graphic artist, or anyone who creates original graphics for the web, you need to learn how to put your name on the image, be it as a visible credit or hidden watermark. I’ll not cover watermarks as there are many tutorials on the web for doing such, but I will help you learn the basics of how to put words on images.

To create a quote graphic is little different from creating header art. In this example, I will use a quote from the astronaut, Neil Armstrong, whom I had the great pleasure of meeting twice.

The process begins with finding or creating a image for the background. This is a little more challenging than you may think. Before I go into details, please remember to use copyright and royalty free images to protect the copyright of others or create your own artwork for the background.

The quote I’m going to use is:

I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn’t feel like a giant. I felt very, very small.

Read like that, it is a powerful visual, but broken up like poetry, it becomes poetic.

I put up my thumb
and shut one eye,
and my thumb blotted
out the planet Earth.
I didn’t feel like a giant.
I felt very, very small.

Immediately we have created a visual presentation just by breaking the sentences up in prose form. This helps me to visualize how I want it to appear on the image, so now I need an image.

In a cliche move, I went with an image from space. I found an image of the Earth as seen from the moon from the NASA public domain images collection. Very appropriate.

Could I have selected a different image? Certainly. This was an easy selection, but finding an image to place words upon isn’t usually that easy. In the previous tutorial on header art, you saw how I experimented with different techniques to allow the words to be easily readable over the image. That’s one challenge. Appropriateness is another. Take your time and experiment with different images if you don’t have one specifically in mind.

If you are using an image on the web, right click and choose Save Image As. Remember, just because it is on the web doesn’t mean it is free. Check image usage rights first.

Images - Quote on Photograph -  Save Image As in Web Browser - Lorelle WordPress School

In Pixlr, click on Open image from computer. Find the image on your computer’s hard drive and open it. Adjust the Pixlr modular elements and tools in and around the image so you have a good working space.

Images - Quote on Photograph - Image of Earth from Lunar Surface in Pixlr - Lorelle WordPress School

At this point, I could add filters and adjust the image but it is good for my purposes. I’m ready to add the quoted text. Read More »

WordPress School: Header Art Images

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In the first article in this mini-series on learning how to create images for WordPress header art, call-to-action images, and add text to images for your site’s design elements, I covered the basic tools and materials you will need for these tutorials.

In this tutorial, you will learn simple basics for header art, specifically how to create your own custom header art image and how to use an existing image or photograph and add text to the header image.

You will need to know the recommended width and height for your header art image. For the second part of this tutorial, you will need one or more images such as photographs, graphics, logos, branding, or other design elements.

To create an image from scratch requires imagination and experimentation. You could draw pictures, scribble, or do whatever your graphic arts skills permit.

Creating an Original Custom Header Art

Notes On Pixlr

Lorelle WordPress School Tips and Techniques Badge.Pixlr is a fairly powerful free online image editing and creation tool. It is built in Adobe Flash and requires the Flash Plugin activated on your web browser or mobile app.

You have the ability to add layers and use many features found on graphic software programs, but it is a bit tedious to use as it requires precise series of actions to make things happen.

For instance, you cannot just click on a design or image on a layer without selecting the layer first. To move text or images, while you may do so while working on them, you need to click the Move tool to move things. You must click some tools repeatedly to use them in series.

Be patient and experiment. Pay close attention to the Layers and History to note where you are and the actions you have implemented.

In this example, I will create header art from scratch on Pixlr and add text for the name of the site.

I wanted to keep this original header art project simple, so I came up with a site title, “The Splatter of My Life on the Web.” The site title influences your artistic decisions and what could be easier than a little spilled paint to represent this test site’s header art.

Begin by determining the size recommendations for the WordPress Theme. You should still be using the Twenty-Eleven WordPress Theme. The size recommendations for the header art is at least 1000 pixels width, 288 pixels height.

Images - Header Art WordPress Theme Size Recommendations on Appearance - Header Art - Lorelle WordPress School

In the Pixlr Editor, go to File > New or choose Create a New Image from the opening menu. Read More »

WordPress School: Image Lessons

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.I’m often asked by students in the college degree programs of web development and web design how much familiarity and expertise do they need with images. “Do I need to learn PhotoShop and Illustrator?” The truth? You need to know more about images and graphic design than you would ever imagine.

Web design and development are often thought of as focused on the code, painting HTML and CSS to make a site look good, but there is so much more to the design aspect of web design than adding header art and background images. The art of the visual on the web is one of the most critical aspects, and most often misunderstood. Connecting the visual with the code is the key to becoming a successful web designer and developer.

In this tutorial for Lorelle’s WordPress School I’m not going to go down that learned academic path of web design and illustration. Instead, I’m going to focus on how to help you do simple but powerful things with images on your WordPress site.

Most of the following tutorials feature image types most commonly found on websites. We’ve covered some of types of images in tutorials such as adding images to represent you in your profile with Gravatars and on your About web page to represent you and your site’s purpose, and other images to represent your site called Blavatars. In the second post, a tutorial, in your test site’s article series you were to add a minimum of three images to experiment with the preparation of image and size and placement of the images within the content. In the third post of the series, you created a gallery of images. You were also to add a Google Map as a visual on your test site. To customize the look and feel of the site, you were to experiment with header art images and background images.

Today, I want to dive deeper into the artistic aspects of these tutorials and help you learn how to:

In the style of the article series we’ve worked on in this course, I will present each of these in a series of four additional articles today and tomorrow, in addition to the other tutorials this week. This post serves as your introduction to the series and explain what tools and materials you will need for the tutorials.

Tools and Materials For Working with Web Images

Images - Quote on Stars - Web Dev Travels Inspired Creativity by Lorelle VanFossenThere are no right or wrong ways to create web images beyond file naming, file sizes, and file dimensions. You may use any graphic technique you wish, and manipulate the images in any way you wish.

Please remember to respect the copyright of all graphics and images found on the web and elsewhere, just as you would appreciate the respect of your own images.

To continue with this tutorial and the assignment, you will need the following:

  • A graphic editor program. For this tutorial, I will be demonstrating the techniques using the free online web app Autodesk Pixlr (Adobe Flash required). You may use your graphics program of choice.
  • 2-4 graphic images (original or copyright and royalty free) of various sizes, no less than 300 pixels wide (see this article for a list of sources).
  • The published size of the image you are creating. If you are working on the header art image, you will need to know the WordPress Theme’s recommended header image sizes. If you are working on a article series badge or other call-to-action image, while you may create it at any size, keep in mind the end published size requirements as an image 2000×2000 pixels is not necessary for uploading and publishing as a 100×100 pixels icon.
  • Time: Depending upon your comfort and familiarity with using a web browser, computer, and graphic program, consider setting aside a minimum of a hour to work on the examples and assignments. This is something you don’t want to rush.

You do not need to create or change the header art and images on your test site if you wish to keep them as they are. These tutorials are designed to create experimental images for your site. It’s up to you to use them or just learn from the process. If you choose to use the images you create in these tutorials, please find the appropriate assignment post on our WordPress School Google+ Community and describe your experience and post a link to the post, or comment in the appropriate post on this site so other participants can see what fun you are up to in this course.

The next tutorial in this series will focus on creating your own custom header art, first creating an original header art image followed by using a photograph with a text overlay. Be ready with a photograph and your creative hat on.

Image Lessons Article Series

Image Lessons is a mini-series within Lorelle’s WordPress School to teach you the very basics of how to create and modify images for your WordPress site.

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: Pageviews

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.A student trying to explain how WordPress Themes worked to another student used the following metaphor:

Think of WordPress Themes like a poker hand. They are all cards but the value of the playing hand changes with each deal.

She was right. There are 52 cards in a deck, four suits (clubs, diamonds, hearts, spades), and the cards ranging in value from 1 to 11 or higher, depending upon the game. Playing poker, it is estimated that a draw of 5 cards could have as many as 2,598,960 combinations.

A WordPress Theme is made up of template files featuring programming code with conditionals, arguments based upon the logic of if X then Y, with literally thousands of permutations. In a way, a WordPress Theme is much like a deck of cards. The resulting web page you see on the front-end view of the site is based upon the hand you are dealt.

For instance, if you land on the front page of a WordPress site, the code within a WordPress Theme asks, “Is this the front page of the site? If so, then display this, that, and the other thing.” If the user clicks a category link, WordPress works with the WordPress Theme to answer the request, “Want to see the posts in this category? Let’s display the title with the word ‘Category’ in it, then all the posts in that category.”

Screenshot of Pageviews - March 2006 Monthly Archives on Lorelle on WordPress - Lorelle WordPress School.

Do a search. Type a word into the search form on your test site. If the word is found, the posts with that word are displayed as excerpts. Click the title to access the web pages. If the word is not found, a “Nothing Found” is generated with a search form in the content area to help you keep searching.

Each one of these actions, clicking category or initiating a search, is an action. With each action, conditions must be met in order for WordPress to generate the end resulting web page. Each generated web page is called a pageview or the front end view of that request.

As part of the ongoing Lorelle’s WordPress School, let’s explore the basic WordPress pageviews. Read More »

WordPress School: Week 8

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.In Lorelle’s WordPress School free online course last week, we covered:

This week, the end of our second month in this year-long series, we are starting to move more into site customization, beginning with ensuring you have a text editor and have had some time to play around with different ones before we begin learning the basics of a web browser and HTML and CSS starting next week.

This week, we cover:

  1. WordPress Pageviews, the generated web page views of your site
  2. How to view the source code of a web page in your web browser
  3. More experiments with using images in WordPress
  4. Polls and Surveys
  5. The WordPress Community

Want to Join Us?

Lorelle WordPress School Tips and Techniques Badge.While this course started the first of February 2015, 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. Move at your own pace. 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 assignments and tutorials on learning WordPress pageviews and how to view the source code of a web page are the first steps in learning more about how WordPress works from within a web browser and how HTML and CSS are used to design your WordPress site.

Think of HTML like learning a language, not an entire language but enough to visit a foreign language place. In the upcoming set of tutorials, I will break things down into their most basic elements, making the process simple and easy, as well as fun, to learn.

In the tutorial on images this week, I’m going to help you understand more about how to add text to images and how to incorporate images into your site’s content and design elements. I will focus on images within posts and Pages, buttons and badges, and header art images. I will be giving examples using the web app Autodesk Pixlr (Adobe Flash required) available for free online. You may use the graphics program of your choice. The techniques are basically the same.

You will also learn how to create a poll or survey on your test site, a start on the interactivity you will learn about with WordPress later in the course.

On Friday, I will talk about the WordPress Community, a community I’m most proud of and honored to be a tiny part of in this huge world. It is a large community, an international community, made up of people from all walks, paths, and journeys through life. It is one that you belong to as well. So enjoy it and take advantage of the connections.

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.

This week we are voting on test site taglines to determine which ones convey the clearest intentions and purposes of the site. Come read through, vote with your + and talk about why the one(s) you voted for make the most meaning and sense to you. Taglines are our site’s subtitles, and are often forgotten when setting up a WordPress site.

Google Plus WordPress School Community - screencap.People are submitting their assignments and it is part of your participation in this course to review their work and comment, too. It is important to learn from others so you don’t make the same mistakes – or better yet, you learn how to do it even better from their outstanding efforts. We are all here to learn from each other. It’s a very sharing community forming and we’d love you to 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: Text Editors

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.Coming very soon, I’m dedicating a couple weeks to learning about web browsers and HTML and CSS in preparation for moving into the site design and customization aspects of Lorelle’s WordPress School free online course. To help you prepare, today’s tutorial and assignment is to introduce you to text editors.

In WordPress, there is a visual editor that offers you a word processing experience for web publishing, and a text editor, a stripped down editor that displays the actual code as you write, not the GUI or visual interface of the content. A text editor is much like the WordPress text editor.

A text editor is a program that allows you to write and edit text. It does not allow embedding of multimedia like a word processor, only text with little or no formatting. Sounds simple, but a text editor can be so much more.

A word processor is software or an app used to process words, literally. It helps you to write letters, stories, newsletters, etc., and comes with with writing, editing, multimedia, and formatting tools for writing in a traditional medium. While you may export in a text or web format, and copy and paste from a word processor into WordPress using the paste as text feature, most bloggers and web publishers do not recommend it. Such copies and exports come with programming code you don’t want in your WordPress site.

Text Editor - NoteTab Pro Interface - Lorelle WordPress School.

Dreamweaver is not a text editor. It is a an IDE (Integrated Development Environment) tool, a web development tool for creating, publishing, and managing web sites, not web content in general. Dreamweaver offers a GUI interface featuring a code editor, automation and shortcut tools, and WYSIWYG display and testing of the code as you work on it. While you may use Dreamweaver and similar programs for designing WordPress Themes, and you may use it during the tutorials we will work on to learn HTML and CSS, and there is a source code editor (text editor) incorporated into it, it is not a text editor. In other words, while it is a great tool for what it does, it is over the top for most of your daily activities and tweaks for working with WordPress unless you dive deeply into web design. Read More »

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

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

WordPress School: Google Maps

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.We’ve experimented with image and video embeds in your test site in Lorelle’s WordPress School. We’ve also worked a with WordPress shortcodes in the contact form on the Contact Page, and you’ve gotten a little HTML awareness within your site’s content. Today’s assignment is another form of embed. Today, we are going to embed a Google Map.

Many sites use maps on their Contact and location information Pages to help people find their physical location, but what if your site doesn’t represent a brick-and-mortar spot on a map? How would you use maps?

  • Maps are used in posts to provide visual information about the location associated with the topic
  • Want to share directions to an event you are involved with?
  • If you blog about a specific area or region, maps help to point out tourist sites, landmarks, and geological features
  • Blog about natural science, hiking, traveling, and other geolocation topics? Maps flesh out the stories you tell.
  • Publishing educational material? What is better than just talking about a volcano? Showing pictures of the volcano on a map!

Google Maps - Mt St Helens Satellite view.

I’m sure you are thinking about several ways to use maps in your site’s content even now.

The above map is not an interactive map but a graphic screen capture of a Google Map satellite view of Mt. St. Helens, an example of an educational use. Around the image is a link to the Google Map for more interactivity with the famous volcano. I’ll explain how to do this. Read More »

WordPress School: Blavatars

Badge - Learn WordPress with Lorelle VanFossen at WordPress School.About a month ago in Lorelle’s WordPress School free online course you added a Gravatar image to your test site. A Gravatar image and profile is linked to your email address and displays on any WordPress (and many other services) site in the world when you use that email address to comment.

Another visual part of your online persona and profile is the blavatar.

A blavatar is your site’s blog avatar.

Here is the difference between a Gravatar and Blavatar:

  • Gravatar: Linked to your image, displayed anywhere Gravatars are used including all WordPress and sites, in comments, author profiles and icons, and throughout any site where you are a registered member. Your Gravatar follows you from site to site, wherever you use your email address.
  • Blavatar: Linked to your site, displayed within site networks like to represent the website. You may be the owner or a contributor to the site, and your Gravatar will appear there and your Gravatar profile highlights these sites if you wish, displaying their Blavatar. The Blavatar is also the site’s favicon, the image that appears on the web browser tab.

Just like a Gravatar image, a Blavatar must be square and withstand a wide range of image sizes from 16 to 148 pixels wide, maybe even larger. Read More »

PDX Writers and Bloggers: Join Me at Press Publish WordPress Event March 28 in Portland

Press Publish banner for Portland, Oregon event.Press Publish is a one-day conference in Portland, Oregon, and Phoenix, Arizona, described as “featuring inspiring WordPress bloggers and the people behind I’d rename it to “Rocking Your World with Inspired Authors and Web Publishers on WordPress in the Pacific Northwest!”

I will be attending the Portland event on March 28, 2015, and the speaker line-up looks fascinating. Come join me.

The schedule for Portland features two tracks for beginners and more experienced bloggers, writers, and publishers. The focus is totally on publishing, web publishing, and book publishing. There is even some design presentations tossed in to help you tweak your WordPress site in and around the content.

If you use WordPress with a strong focus on the blogging and publishing aspect, and you wish to meet and learn from those who have branched out with their blogs and beyond their blogs to amazing success stories, register now.

Tickets are $150 for the event on March 28, 2015. Your ticket includes a 1-year subscription to the Premium upgrade, a $99 value, for any blog.

Because you’re a friend of mine, and a student in one of my WordPress, blogging and social media classes, use pdxwp30 as a coupon for a whooping reduction to $30, but register immediately as space is limited and this coupon might not last forever.

If you are in Arizona, the April 18 event in Phoenix sounds like it going to be just as exciting. Jump on that right away to save your seat.

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


Get every new post delivered to your Inbox.

Join 24,626 other followers