Lab Notes
Out and about in Pasadena
Website Cheat Sheet
We use a little cheat sheet while building websites to help us keep track of color, test site info, and any notes that come up during development. You can download the PDF if you wish below.
Keeping Tabs on PCC’s Journey to the HACU Conference
Recently, Pasadena City College sent 6 students to the HACU Conference in Washington DC. So, we wanted to do something that would empower the students, allow them to reflect on their trip, and show the world how PCC, eSTEM and the HACU conference is helping the future of tomorrow (yea, sounds cliche, but true).
Our first step was to make sure all the students were on board, then we decided to set up the students with their own tumblr accounts each with their own unique email address. The email address was used for posting to their tumblr account from their phones. We then took the each tumblr blog and pulled the RSS feed to populate posts with PCC eSTEM’s WordPress site, assigning each to the appropriate category and author. So basically student >> send email >> posts to tumblr >> posts to WordPress.
All in all, it was a grand experiment to see if this is a process we could emulate in the future, so no grand expectations! It worked like a charm though and the students did a fantastic job.
I’d say it’s worth a look! Check it out at https://pccstem.org/category/hacu/
I bought a premium WordPress theme and now I’m stuck!
Far too often we hear, “I bought a premium WordPress theme, but I just can’t get the darn thing to work. I tried installing it, but I can’t find it. I want these colors, the logo on the right, the sidebar on the left, but every time I try nothing works and I can’t access my website! I thought WordPress was suppose to be easy!”
Our first response is that yes, WordPress is simple as far as Content Management Systems go, but as with anything there is a learning curve. The issues usually are two fold. One, not being able to install WordPress on their server. Two, not being able to set up the theme or running into problems because they are not familiar with the WordPress terminology and interface.
The WordPress Install
First, we’ll tackle the WordPress install, which for most instances is fairly straight forward, but again if you have not worked with shared hosting, or databases, or servers in general it all may seem like a foreign language. In most instances, if you are using shared hosting, installation should be “one-click install” using Fantastico or some other application installation service. It should only take a matter of minutes (so if you’ve spent 4 hours trying to install and talking on the phone with the hosting company it might be worth a few bucks to let someone with a little knowledge set you up). If you are having trouble installing and are not using Shared Hosting, (i.e. you are using a dedicated server, command line, virtual, etc.,), then you have bigger fish to fry than worrying about installing WordPress. For most people trying to tackle their own install of WordPress, there is a “one-click install” that should get you up and running in no time.
Things to be aware of when doing “one-click install”
- If you want the WordPress site to be at your root domain do NOT enter anything for directory or after the “/” — the root domain for instance is www.yourdomain.com
- Choose a username and password you’ll remember
- Site Name, Description, Email can all be changed later
- Once installed navigate to www.yourdomain.com/wp-admin if you installed in the root, or if installed in a directory follow the directory with “/wp-admin” — this will get you to the login screen where you’ll enter your username and password
WordPress Setup and Premium Theme
So you’ve purchased your premium theme and got your WordPress site installed, now what? Well, first thing to do is find out if you can muddle through setting up your own WordPress site or if it’s time to hire a helping hand. Usually, you can find out pretty quickly by first changing a few settings in WordPress, then installing your theme and determining whether the options and settings for your theme make sense.
Changing Basic Settings
The first thing we always do after installing WordPress are:
- Let’s first start by installing our theme! Log into your dashboard (the www.yourdomain.com/wp-admin link) and click on Appearance > Themes. Make sure you’ve got your theme on you harddrive and that it is a zip file. Next, click on “Install Themes” towards the top. A new page will load and click on Upload. Now find your zipped theme file and begin the upload. Once uploaded click Activate. Woohoo we got ourselves a theme installed!
- Go to Settings within the Dashboard and change the Permalink structure. Settings > Permalinks. We usually select Month and Name and then click Save Changes. Basically what we are doing here is making “pretty URLs.” So instead of www.yourdomain.com/?p=44 the URL would read www.yourdomain.com/about-us — better for search engines and people too!
- Next we want to determine whether we want our homepage to be a listing of our recent blog posts or a stand alone page. If you’re not sure what we’re talking about here, might be good time to dive into the WordPress documentation or hire that helping hand. If we want our homepage to be our recent posts then DO NOTHING. If you want it to be a stand alone page, then click on Pages > Add New and title it something for reference, ie. Homepage and click Publish. Then again click on Pages > Add new and enter a title of Blog or something relevant to your posts and click Publish. Lastly, we’ll go back into Settings > Reading (click on Reading) and find Front Page Displays. Select the radio button next to Static Page and from the drop down select Homepage as your “Front page:” and Blog as your “Posts are:.”
If you’ve made it this far you’re nearly half way home and probably got a pretty good handle on WordPress and setting up your own site with a Premium Theme. If none of this makes sense, or is taking more than a couple hours, or you get stuck on any of the steps you should probably look for help or hire a helping hand.
We can get your blog/ website setup (ie installed, modified settings, page structure, etc.) in around 2 hours, so if you’re having trouble and need a helping hand email us at info@maxwellrowe.com and we can get you back on track and up and running in less than a day.
Add Class to Anchor Link for Scrolled To Element – jQuery
We were looking for a way to highlight navigation elements using scrollto.js, a jQuery snippet. We have 5 anchor links and as a user either clicks on one of the anchor links or scrolls to that particular section we’d like to highlight the current anchor link by adding a class. See below for a fairly simple and straight forward script to achieve this.
[cc lang=”js”]
$(function(){
var sections = {},
_height = $(window).height(),
i = 0;
// Grab positions of our sections
$(‘.section’).each(function(){
sections[this.name] = $(this).offset().top;
});
$(document).scroll(function(){
var pos = $(this).scrollTop();
// Look in the sections object and see if any section is viewable on the screen.
// If two are viewable, the lower one will be the active one.
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$(‘a’).removeClass(‘active’);
$(‘#nav_’ + i).addClass(‘active’);
}
}
});
});
[/cc]














