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

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
- 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
- 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

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.

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)


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

Type settings option page in dashboard for your theme:


Class on Thursday 4.4.13

Today we are going to talk briefly about Assignment 4 (everyone who turned one in should have a score and feedback) and we are going to introduce some new pages that are relatively straightforward.

New Pages

Review page.php

This is the page that shows a static page on the site. It’s like index.php but you don’t need the if(have_posts()), just the while(have_posts()) part.

To give us some flexibility we’ll pair that with content-page.php. This is like the way we paired

  • single.php
  • content-single.php

You will need to make sure you call

<?php get_template_part('content', 'page'); ?> 

inside of page.php. And then create content-page.php, which for simple purposes can be like content-single.php (pages can have comments too).


To do the search you need two things
1. The search form
2. The search results page

The Search Form

Showing the search form is pretty easy. There is a template tag for that.

<?php get_search_form(); ?> 

Put that were you want the search form to appear. If you want it on every page you’ll have to put it in header.php or sidebar.php or footer.php or else make sure it’s in all of the content pages ( which is more locations to remember).

The Search Results

This page shows the search results. Basically it’s a page that has the search results in it. You can copy page.php and rename it as search.php. Then you change the header of the page so it tells people they will see search results:

<header class="page-header"> 
    <h1 class ="page-title"> Search Results </ h1 > 
        You searched for < br / > 
        <span> <?php the_search_query(); ?> </span> 

This is sligly different from the book which just has what I put in the h2 inside of the h1

404 page

When someone requests a web page that doesn’t exist on the server it sends back a 404 result (for a normal page it sends back 200 to say the page is there). In WordPress you can have it show a custom page you design instead of some plain text in the browser.

It’s not difficult to do. Because the 404 page can be the same every time you can just put out some static content that says “This page is not found” or whatever you want. Add in the get_header(), get_sidebar(), get_footer() and you have a page. Many people also add in a link to search here so people can search the site for what they were looking for.

<?php get_header(); ?> 
<h1>404 Page Not Found</h1> 
<p>Sorry, we couldn't find the page you were looking for. Perhaps try searching &hellip; </p> 
<?php get_search_form() ?> 
<?php get_sidebar(); ?> 
<?php get_footer(); ?>