Heidi version 1.0.4

A new version of Heidi is now available! If you already have Heidi installed, you should be automatically notified about version 1.0.4 via your WordPress dashboard.

Changelog for Heidi 1.0.4:

* customizer.php
– New Customizer color options for Navigation Links – Hover, Entry Footer Text, Sidebar Links – Hover, Calendar Top Row, and Footer Text
– Updated to only display custom CSS in head when custom changes have been made
– Added translation support for labels
– Fixed issue where drop-down menus displayed incorrect background color when altered through Customizer
* style.css, function.php, content.php, content-single.php, content-page.php
– Featured Images now available on pages as well as posts
– ‘single-post-thumbnail’ class replaced with ‘attachment-post-thumbnail’ for standardizing between posts/pages
* screenshot.png – Updated to 1200×900 pixels for HiDPI displays
* style.css – Minor CSS updates for margin spacing issues & customizer edits
* Updated to Font Awesome 4.6.3

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”