Author Archives: Lorelle VanFossen

Unknown's avatar

About Lorelle VanFossen

Lorelle VanFossen is a pioneering XR Innovator and WordPress leader, tech educator, keynote speaker, and producer bridging virtual reality and digital innovation. Co-founder of Educators in VR, founding WordPress community member, and passionate advocate for emerging technologies and human rights. Expert in immersive education, VR/XR event production, UX, and digital transformation.

How to Work with WordPress Theme Frameworks

Posted on by
5

WordPress Design Wordle graphicA framework is literally a frame upon which a web designer adds the design elements. A WordPress Theme frameworks is a skeletal frame set with HTML and CSS with all the WordPress code embedded within it, upon which a designer can paint the website walls.

Most WordPress designers and developers either create their own WordPress Theme frameworks or use one already created for every WordPress site they develop. It’s important for them to be familiar with all the HTML and CSS design elements so they can quickly apply the design elements, whether from scratch, wireframe, or from a Photoshop to WordPress conversion. The more you understand how a Theme framework functions, the faster the design work can be applied.
Continue reading →

How to Convert a Photoshop Wireframe to a WordPress Theme

Posted on by
2

WordPress Design Wordle graphicMany use Photoshop to create their WordPress wireframe as part of designing their WordPress site. Converting the Photoshop graphic to a WordPress Theme is fairly easy if you have some basic HTML, CSS, and web design familiarity.

Simply described, each core design element such as the header, background, and design details are segmented into graphics and then used as background images or direct images where appropriate on a WordPress frameworks, a WordPress Theme with the core design elements you need to flesh the site out with a strong stylesheet.

A Photoshop (PSD) Plugin, Divine, is very popular and available for a thirty day trial. Add it to Photoshop and it will automatically help you export the graphic elements for a WordPress site. Familiarity with WordPress functions, features, and Theme structures and styles are required to complete the process, but it does help with the export of the graphics for the Theme. It works with Windows XP, Vista, and 7. Currently, there are no free programs for the Mac, but some alternatives are available with free, limited trials. [NOTE: Since 2009, all marketing about the Divine Photoshop Plugin explicitly says it is “absolutely free.” I just learned it has a thirty day trial and then it is expensive to purchase. While it might seem to be the ideal thing to try, unless you are making a living as a web designer, it’s not worth the cost.]

In general, while the Divine Photoshop Plugin is helpful, you can generate the graphics yourself. For more information on how to take a wireframe Photoshop image and convert it to a WordPress Theme, try these resources.

How to Create a WordPress Theme Wireframe

Posted on by
Reply

WordPress Design Wordle graphicWireframes are website mockups, prototypes, layouts, and doodles. For many, wireframes begin with with pen and paper, others use sticky posts and crayons. More technically inclined folks turn to graphic and design software and web apps to layout the look and feel of a site for themselves or a client.

Wireframes are essential in the process of getting ideas down and the site design fleshed out. They are also critical for working with clients to ensure the designer/developer and the client are on the same page.

However you make your wireframes, make sure they are flexible and easily altered as your site evolves.

A Google search for WordPress and wireframe images turns up some excellent examples.

Here are some articles featuring wireframe tips and resources.

How to Install WordPress on Your Computer or USB

Posted on by
11

WordPress code logo thumbnailInstalling WordPress on your computer is a great way to test and explore WordPress features. It’s also an excellent way to work on WordPress Themes and Plugins without exposure to the public view. When your site is set up and ready, it’s easy to move WordPress from your computer to your hosted server.

Why would you want to install and setup a portable version of WordPress?

  • It allows you to design and develop a testing environment protected from public eyes.
  • It allows you a safe, secure space, especially for testing private and security-specific WordPress development.
  • You can take WordPress with you or mail the thumbdrive to anyone. Plug it into any Windows-based machine and fairly instantly have WordPress up and running, ready to show clients what their future site will look like and have them test it fully while not connected to the Internet nor exposed to the public.
  • You can work on WordPress while not connected to the Internet.

There are a variety of tools that will help you install WordPress to your computer dependent upon the operating system. Some are very simple requiring few steps to completion. Others are a little more complex, so read through the documentation carefully before deciding which one to try, or try several to get the feel of how they work and which ones will work for you and your needs.

You have two choices in making WordPress portable. You can install it on a thumbdrive or to your laptop or desktop computer.

For my classes and workshops, unless you are used to bringing in your laptop, I recommend you install it on a Thumbdrive. Most of the computers in the classrooms where I teach are Windows based, so use Instant WordPress and install it to your thumbdrive. Continue reading →

Class Interviews Coming Up Soon

Aside

The Winter Clark College CTEC 280 Introduction to WordPress class will be working on creating multimedia posts in WordPress coming very soon. Dig out your digital cameras and recorders and bring them to class. If you have ones to share, bring those. I’ll be announcing when soon.

If you currently have a video hosting service like YouTube, Vimeo, Daily Motion, etc., bring password access with you for uploading video.

NOTE: Currently, the computers in the room only connect via USB, so bring USB connectors (and extra batteries or chargers).

PDX WordPress Meetup January 23, 2012

Posted on by
Reply

The next PDX WP Monthly User Group Meeting in Portland is Monday, January 23, 2012, from 6PM to 8PM. RSVP your intention to go, and those needing rides from Clark College, Cait and I will be there with two vehicles ready to go. Meet outside the classroom in the hall and we’ll be getting into the cars and leaving by 5PM.

If enough people are interested, we’ll have some dinner immediately after the meeting within walking distance.

If you are going on your own:

U.S. Bancorp Tower Conference Rooms (by the security next in the northeast corner)
111 SW 5th Avenue, Portland, OR 97204

The next meeting is February 27, 2012, at 6PM in the same place, so put it on your calendar.

Email Obfuscation Tools and Scripts

Posted on by
6

There are a variety of ways to protect and hide emails and other information from email harvesters or just to protect your privacy through obfuscation, a technique on the web that allows displaying of email and content within web browsers so browsers can understand them, but masks them from web crawlers and bots.

A typical email link would be: 

<a href="mailto:fredsmith@gmail.com" title="Email Fred">email</a>

An obfuscated email address link would look like this:

<a href="mailto:&amp;#102;&amp;#114;&amp;#101;&amp;#100;&amp;#115;&amp;#109;&amp;#105;&amp;#116;&amp;#104;&amp;#064;&amp;#103;&amp;#109;&amp;#097;&amp;#105;&amp;#108;&amp;#046;&amp;#099;&amp;#111;&amp;#109;" title="Email Fred">email</a>

Free Online Tools to Obfuscate Email Addresses

Instead of doing this manually using HTML Character Entities, there are a variety of free online tools to obfuscate email addresses. The output can be set to be in HTML characters or use JavaScript or other code methods. NOTE: WordPress.com blogs are restricted to only HTML Character Entities.

There are a variety of WordPress Plugins that will handle the job for you automatically, too. Check the WordPress Plugin Directory for the latest versions and options.

For more information on obfuscation, see:

Testing Video Floats and Alignments

Posted on by
3

Alex Ferguson came up with a way to help us align videos with the text, floating them to the left or right of the post content area so the text will wrap around the video.

NOTE: This is not for the timid nor typical usage. This was an experiment and it works. To embed a YouTube (and most popular video services) video into your blog post, simply paste the URL into the post on its own line with a space above and below.

Let’s see if this works.

It does, but the technique is a little trickier than you might thing. Remember, this is for within a WordPress.com blog, thus we have to work around some of their limitations.

The code involves creating a DIV with the alignment class for left, right, or center, plus the WordPress.com Youtube shortcode with the width and possibly height set. 

<div class="alignright">

</div>

In the link to the Youtube video you should see &w=400&h=450. This sets the width of the video to 400 pixels, narrower than the typical 500 or so, and the height to 350 pixels. Every Theme has a different column width so you will need to play around with these to get them the right size for your WordPress.com site.

This is what we call a “hack,” a way around the typical way of doing things. I recommend you save this in a reference text file so you can copy and paste in the video link next time you try this in a post.

Thanks, Alex, for experimenting with this!

What Do Students Want to Learn About WordPress

Posted on by
Reply

On the first night of class I asked the students of Clark College’s first Introduction to WordPress class to explain why they were there and what they wanted out of the class. Here is that list.

  • How to make my site “mine”
  • How to design
  • How to fix the CSS
  • How to maximize SEO
  • How to publish and edit (resize) photographs
  • Understand basic HTML and CSS
  • Learn about analytics and tracking traffic
  • Understand how WordPress works and underlying technologies
  • Understand how to handle permissions and multiple users
  • Understand more about Open Source, licensing, and GPL
  • How to handle multiple contributors and authors
  • How to publish on the web
  • How to integrate social media
  • How to migrate from one site to another (import/export)
  • How to re-brand a site and make it fresh and new
  • How to handle spammers and nastiness on the web
  • How to create good content.
  • How to make the page and content easy to read
  • How to monetize my site.

As with everyone WordPress touches, it boils down to:

  • Web Design
  • User Experience
  • Content Management
  • Content Publishing
  • Social Media, Marketing and Advertising

Example of a Gallery Post in WordPress

Posted on by
Reply

This is an example of how to create a gallery in WordPress. There are a variety of options you have with the gallery shortcode on WordPress.com and self-hosted versions of WordPress.

The following images are from the morning of January 17, 2012, when a snow storm moved into the Pacific Northwest and dumped almost a foot or more on the 1000+ foot elevations, including us in North Plains, Oregon, in the Coastal Mountain foothills. Photographs are by Lorelle and Brent VanFossen.

This is a caption

Example of a Sandbox Post for Testing WordPress Themes

Posted on by
5

This is the H1 Heading

This is an example of a sandbox post for testing WordPress Themes and web page designs to ensure every design detail within the content area of a Theme meets with your design needs.

To use this sandbox post for your own testing, right click the following link and save the file as a text file. Open it within a text editor and select all of the text and paste it into your WordPress site with the HTML/TEXT editor – not visual editor. Save the post or publish it to view the post content designs.

This is the link to the sandbox post text file.

This sandbox post is available for free. Use as you wish.

At the top of this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.

If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.

Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.

This is the H2 Heading

Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.

However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.

This is the H3 Heading

Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog’s stylesheet.

For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.

Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.

This is the H4 Heading

In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.

Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.

Continue reading →