Independent Study – Final Review

Overview of the Semester

My work this semester has been invaluable in adding to my knowledge of web design and development. I feel that I have gained a lot of knowledge in WordPress and JavaScript in particular. I believe I have accomplished my goals laid out in my initial proposal and syllabus for this Independent Study. I have a much better understanding of languages like PHP and JavaScript, which will serve me well in future projects. I’ve looked at some examples of current trends for library websites, particularly in the week of June 10th when I looked at WordPress and libraries. These observations were carried over into my needs analysis and design plan for my theme. Finally, I synthesized these skills together in the creation of my own WordPress theme which has been submitted to the Theme Review process.

A large issue this semester was making sure I had a good outline of activities to follow week to week. Without this overarching structure, I think it would have been much harder for me to tackle all the different aspects of web design I hoped to. I think having a detailed syllabus to guide myself through the semester — while also leaving that syllabus open to alterations, which I made, especially in regards to JavaScript — was a successful approach for me. I like having the freedom to change and shift my focus in projects, but I really appreciate having a structure or schedule to follow, so I think this set up worked well for me personally.

Continue reading “Independent Study – Final Review”

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

 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”

jQuery & other updates

This week in terms of my JavaScript studies, I focused primarily on jQuery. It was nice to be able to look at jQuery again after the past couple weeks, and find that my understanding of the library feels much more secure now that I have a better foundation in JavaScript overall.

In particular, I used Code School’s Try jQuery course, which included a combination of video mini-lectures and interactive exercises after each video to reinforce the concepts. It focused on the syntax of jQuery as well as some common features and practices that will be useful in future jQuery projects.

I also got the chance to implement some jQuery in my WordPress theme as I continued work on that this week. I wanted one line of code that would target all of the td elements in a widget calendar that were followed by an a element — basically I wanted to be able to select any date on the calendar that was also a link, but I wanted to style the parent element (the td), not the child (the a), so CSS selectors could only get me the opposite of what I was trying to do. This ended up being a bit more of a headache than it probably needed to be — mainly because I discovered that I was using the jQuery method prev() when I should have been using closest(). prev() finds the previous sibling elements, and as mentioned, I was trying to select the closest parent. In the end, this was my code:

$(document).ready( function() {
	$('.widget_calendar').find('td > a').closest('td').addClass('date_with_link');
});

Even then, I had some difficulty getting it to implement correctly into my WordPress theme. I discovered two things about WordPress themes and jQuery:

  1. When enqueing a script that uses jQuery into functions.php, you need to be sure to pass ‘jQuery’ into the array() part of the enqueuing code
  2. WordPress by default doesn’t recognize the shorthand use of $ for jQuery; therefore you need to either use the long version of ‘jQuery’ substituted for all dollar-signs, or, as I ended up opting to do (based off of a suggestion on StackExchange), you can wrap your jQuery code in a function that accepts the $ sign as it’s parameter, and ends with (jQuery)

So in the ACTUAL end (for real this time), my code looked like this:

( function( $ ) {

$(document).ready( function() {
	$('.widget_calendar').find('td > a').closest('td').addClass('date_with_link');
});

} ( jQuery ));

Besides this one tiny example (that took up a really disproportionate amount of time for what I was trying to accomplish, but did at least teach me some things along the way!), I also looked through some more chapters in Beginning JavaScript, read an article on JavaScript Objects in Detail, watched chapter 11 on JavaScript Libraries (focusing on the jQuery discussion) in JavaScript Essential Training at Lynda.com, and watched some more videos from jQuery Essential Training.

I haven’t gotten to look at the Codecademy 5 Basic projects exercises yet, mostly because I opted to spend some more time working on my WordPress theme. This week I focused on cleaning up the styling of the sidebar and footer areas, in particular. I’ve also started some work on a re-design of my personal website so that I’ll hopefully be able to add in sections to better describe and outline the projects in my portfolio (including this custom WordPress theme, once it’s completed).

JavaScript – Week 3

More JavaScript this week! I don’t have any concrete examples of code to show, as most of what I’ve covered has been focused on working through textbook examples and exercises. Below I summarize some of the concepts/big ideas I looked at this week.

Besides looking at JavaScript, I’ve also been working on my WordPress theme. Right now I have the bones of my design implemented in the CSS, and am making some tweaks to small things in the design here and there as I go. I’m starting with the mobile layout first, and once I have that to an acceptable point, I’ll be moving along to the appropriate breaks for tablet-sized screens.

Continue reading “JavaScript – Week 3”