Class on 5.14.13

Today is going to be mostly me helping you all with your projects. We are going to wait until Thursday to do the group thing where you check to see if you have the requirements. However, you can work in pairs today if you like.

At the beginning of class I will quickly go over the following:

  1. Status on Server
  2. Enqueue Script
  3. WordPress Typography Baseline
  4. Styling Sub-Menu Items

1. Status of Server Accounts

Basically the status is that it is not complete. I had some issues with my host and allowing people FTP access into just the Themes folder. I’m hoping to resolve it by Thursday.

2. Enqueue Script

There will be times when you want to add in some custom JavaScript to WordPress. The correct way to do this is with the enqueue_script functionality in WordPress. This basically allows you to tell WP that you want to use certain scripts in your pages (you can point it to files in your theme folder or on the web) and also allows you to say that one script is dependent on another script being loaded first (like it need jQuery).

To help with this, I’m linking to a post by Susan Delgado, a former BMCC student who is now doing the CUNY BA.

From Susan Delgado
http://www.sdelgado.com/code/wordpress-registering-your-scripts-2/

You may also want to visit her code snippets page: http://www.sdelgado.com/codesnippets/
she has some links on helpful scripts.

You might use that to add the JavaScript for a basic slider script like this one: http://basic-slider.com/ You will also have to add the HTML for that to your loop and create a query to get the right posts for the loop (much like what we did in class with the hero just modify the HTML to match the slider and remove the limit of one post that is there).

3. WordPress Typography Baseline

When you’re creating a theme you need to add in some styles for elements that the users of your theme might put in. To help you cover your bases I’m adding links to some files that give a basic covering of the options from a typography perspective.

 

Stylesheet from Themeatic
https://code.google.com/p/thematic/source/browse/trunk/library/styles/typography.css
- include as a separate stylesheet. Add a comment at the top to say where you got it from
- I would recommend changing some of the px to em. In the body change 12px to 75%. Then change the line-height to 1.5. There are a number of 18px margin-bottoms. change those to 1.5em
- even if you change it totally it is a good example of the things you need to style in your typography.

Another WordPress typography boilerplate
http://wp-sitemakers.com/boiler-plate-typography-css/
- you will need to change the font-size and font-family to suit your design\
- it has the same font-family for body and headlines. It is usually good to make them different. To do that, set the font-family in the styles on line 21

4. Styling Sub-Menu Items

Here is a link to a site that has a bunch of menus you can customize and a link to a tutorial for how to incorporate them into WordPress

DROPDOWN MENU in WordPress
http://cssmenumaker.com/blog/wordpress-3-drop-down-menu-tutorial
Make sure that you remove any menu styling you have (or comment it out) before you add in one of the CSS menus from here
- again make sure to add the links to the tutorial and CSS theme you customized in your WP theme to give credit.

WEB FONTS
Three of the major players in web fonts are Google Fonts, Typekit and Fonts.com. Each has plugins to help you use the fonts from the sites:
** Note of caution, you will need to create accounts on the respective sites (free) to use these properly.
http://wordpress.org/extend/plugins/web-fonts/ (google and fonts.com)
http://wordpress.org/extend/plugins/wp-google-fonts/
http://wordpress.org/extend/plugins/typekit-fonts-for-wordpress/

 

Outside of scope of this class but may be interesting for you

Type settings option page in dashboard for your theme:

http://theme.fm/2011/08/providing-typography-options-in-your-wordpress-themes-1576/

Leave a Reply