All about SVG (+ a quick how-to on using SVG with WordPress)

I’ve recently started working with a lot of SVG files in my personal website, and I’m excited to use the format in projects with clients, too. Here you can find a quick overview of SVG: what it is (and what vector graphics in general are), when to use it, and how to use it with WordPress.

Skill level for this article

This is intended to be a very basic guide for those completely new to SVG. If you don’t know or aren’t sure what vector graphics are, this is probably a good starting point for you.

If you’re looking for more advanced articles on SVG usage, I recommend Sara Soueidan’s articles on SVG as an excellent starting point to really delving into the capabilities of SVG.

What is SVG?

SVG stands for Scalable Vector Graphics. We’re talking about vector graphics here, versus raster graphics (JPG and PNG are examples of raster graphics). Let’s step back a second and look at the difference between vector and raster graphics.

Continue reading “All about SVG (+ a quick how-to on using SVG with WordPress)”

Some WordPress updates

My WordPress theme, Heidi, has been approved by the Theme Review team, and is now available for download from the WP theme directory! The theme review process was pretty straightforward; the longest part was waiting for reviewers to be available to look at the theme. My theme was reviewed by two individuals, and each supplied some minor changes to make in the code. There was no request to change any of the aesthetics of the theme, and overall I found the process simple enough.

I’ve also updated the theme of this blog (previously running the pre-release version of Heidi). While the rest of the site is my own static HTML & CSS design, this blog is running a WordPress theme designed/coded by me that now fits in seamlessly with the other pages.

Following the success of my first public WordPress theme, I hope to have the opportunity to design some more themes for submission to the WP directory!

Finished WordPress Theme

My finished WordPress theme has been submitted to the Theme Directory and is awaiting review! It passed the initial automated check and will now be looked at by someone in the WordPress theme review team.

On my personal site, I’ve written up a quick description and intro to the theme. I also have uploaded the theme in a live preview.

When preparing my theme for submission, the following resources were exceptionally helpful in double checking things:

And of course, I also looked at the WordPress Theme Review Handbook.

Next week I’ll wrap up here with a summary of my experience working on this theme, and some overall thoughts on this semester’s work. (And hopefully by then I’ll have an update on the status of the theme’s acceptance into the WordPress Theme Directory, too!)

In addition to the work finishing up the theme this week, I also finished a complete re-design of my personal site. In particular, I updated the Portfolio section to include more detailed pages with descriptions of the work I’ve done in specific projects.

Looking at CSS Frameworks, WordPress and responsive design, and more JavaScript


This week I worked on building the “dynamic quiz” exercise from this JavaScript syllabus.

The instructions I followed for creating the quiz were the following:

  • It is a simple quiz that has radio button choices, and it will show the user her score upon completion.
  • The quiz can show any number of questions and any number of choices.
  • Tally the user’s score and display the final score on the last page. The last page will only show the score, so remove the last question.
  • Use an array to store all the questions. Each question, along with its choices and correct answer, should be stored in an object. The array of questions should look similar to this:
  • // Only one question is in this array, but you will add all the questions.var allQuestions = [{question: “Who is Prime Minister of the United Kingdom?”, choices: [“David Cameron”, “Gordon Brown”, “Winston Churchill”, “Tony Blair”], correctAnswer:0}];
  • Dynamically (with document.getElementById or jQuery) add the next question and remove the current question from the screen, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
  • You can ask for help in the comments below or preferably on Stack Overflow. You are likely to get a prompt and accurate answer on Stack Overflow.

I decided to make a vocab quiz for some German vocabulary I’ve been learning. A couple weeks back I mentioned the resources I created for myself (using PHP and JavaScript) to practice German vocab. I added a new page — a multiple choice vocab quiz — that follows the instructions listed above.

Continue reading “Looking at CSS Frameworks, WordPress and responsive design, and more JavaScript”

Theme 1: Design Plan

As discussed in my Needs analyses for my WordPress themes, the first theme I’m working on is intended to be useful for a small to medium-sized public library that is looking for the following things in a website:

  • an online space for community updates (more than likely through a blog format)
  • emphasis on a calendar of current events
  • a place for other current events/announcements
  • easy-to-find hours
  • incorporation of images into blog posts
  • clean and minimal (while still fun) design

Using the work I did last summer on the group project redesign of the Sutton Free Library’s website as a base for my mockup, I created some starting points for the design of my first WordPress theme.

Continue reading “Theme 1: Design Plan”