Cleanup: changing the favicon

The favicon is the tiny image that appears in your firefox or chrome tabs when you’re browsing on a site – it’s a little visual reminder of where you are, that helps you scroll through your tab.

Right now, your favicons are all the same – they’re the default favicon of the required+ theme. To change them, all you have to do is:

  • in Photoshop or whatever, create a tiny (16x16px or 32x32px) image that represents your site somehow (it could be a K for kensington, or maybe the MHSO has one already on its main site, etc.).
  • save it in .png format and name it favicon.png.
  • upload it to your child theme directory (required-starter).
  • ta-da! you’re done!

This is another little thing that would be worth tidying up before you hand the sites over.

Customizing the Footer

Hi everyone,

I think it would be nice if everyone could change the footer code in a way that still gives props to the upsteream developers, but also allows folks to take some credit for what you’ve done.

To do this, you will have to write a small amount of php and put it in your “functions.php” file.

the current footer is generated by this function:

add_action( 'required_credits', 'required_sample_credits' );

function required_sample_credits() {
        _e( '<p>This site runs on the <a href="http://themes.required.ch/" title="required+ Themes">required+ Foundation</a> Theme. Based on the awesome <a href="http://foundation.zurb.com/" title="Rapid prototyping and building library from ZURB.">Foundation</a> Framework by the humble folks at <a href="http://www.zurb.com/" title="Design for people">ZURB</a>.</p>', 'requiredfoundation' );
}

To change it to something else, you can try something like this:

function my_credits() {
        _e( '<p>This site was designed by [INSERT YOUR NAMES] as a final project in <a href="http://2012.hackinghistory.ca">Hacking History</a> at <a href="http://history.utoronto.ca">U of T</a>.  Special thanks to <a href="http://themes.required.ch/" title="required+ Themes">required+ </a> and  <a href="http://foundation.zurb.com/" title="Rapid prototyping and building library from ZURB.">ZURB</a>for the tools that made it possible!</p>', 'requiredfoundation' );
}


remove_action( 'required_credits', 'required_sample_credits' );
add_action( 'required_credits', 'my_credits' );

I haven’t checked the code, but this should work. To change the layout, so the footer isn’t quite so big and obtrusive, you’ll have to change footer.php itself by copying required-foundation/footer.php to required-starter/footer.php and making your changes there. The main thing would be to switch the “four columns” to “eight columns” (you’ll see it if you look).

Front Page Slider in Required+ Theme

OK, we talked about this last week but I’m not sure you guys were paying attention. The folks at Required+ very generously responded to my request for help in making a front-page slider using their starter theme & the underlying capabilities of the Foundation framework. This turns out to be entirely doable! As Silvan says in the issue I link to above (and which I recommend you all read), several things need to be done:

Create a new template, and call it from the front page only

This has several steps:

  • copy the full text of page.php from themes/required-foundation into themes/required-starter/front-page.php – now you have a separate front page template that will only run on the front page.
  • Now add a line like the middle one below into front-page.php:
<div id="main" class="twelve columns" role="main">
  <?php get_template_part ('content', 'slider-img' ); ?>
        <div class="post-box">

(this fetches the contents of the file content-slider-img.php and inserts it into this part of the web page).

Write your slider template

We need to generate some simple html that contains all of the slides we will want presented in our slider. The Foundation Orbit Slider javascript will then find this HTMl and manipulate it to create the slider dynamically (see below).

This is the most complicated step of the process, and in fact there are a couple of options for doing it. The best option is to generate the “slides” as individual <img /> tags. The thing about this is, you will need to do a little more work to make sure the slider looks good if this is the option you choose. In particular, you need to make sure that all the images being shown in the slider are the same size and shape, or they will end up off-center and weird-looking. Fortunately, there is a solution to that issue (see “Tweaks”, below). Here’s the code you will need if you want to do things this way:

<?php
/* a short template to generate the front-page slider from content */
/* Creates individual <img /> tags for each slide.  Requires the
   "fluid" attribute to be set to "true" rather than, say, "16x9"
   in javascripts/child-theme.js.
 ,*/

// Prepare the args for the query
$args = array(
    'post_type' => array( 'post', 'page' ),
    'meta_key' => 'req_slider_checkbox',
    'meta_value' => '1',
    'orderby' => 'date',
    'order' => 'DESC',
    'posts_per_page' => 3
);
// Fire the query
$slider_query = new WP_Query( $args );

// Check for posts in the query
if ( $slider_query->have_posts() ) :
?>
<div id="slider-home" class="row"><!-- Slider -->
    <div class="twelve columns">
        <div id="slider">
            <?php while ( $slider_query->have_posts() ) : $slider_query->the_post();

                if ( has_post_thumbnail() ) { // Check for an post thumbnail
                  $this_id = get_the_ID(); // we use this value so many times might as well not run the funtion each time
                    $source = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-16x9' ); // Change the size according to the registered image sizes you have 'thumbnail|medium|large|full' and any custom sizes you have created in functions.php.
                    $tiny_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-thumb' ); // if we use thumbnails, which are broken right now

                }
            ?>
   <div data-thumb="<?php echo $tiny_thumb[0]; ?>" data-caption="#caption-<?php echo $this_id; ?>" id="slide-<?php echo $this_id; ?>"  >
                <?php the_post_thumbnail('slider16x9'); ?>
              </div> <!-- /slide-ID --> 
              <span class="orbit-caption" id="caption-<?php echo $this_id; ?>">
                 <a href="<?php the_permalink(); ?>"> 
                   <h3><?php the_title(); ?></h3> 
                   <?php the_excerpt(); ?> 
                 </a>
              </span> <!-- /orbit-caption span -->

            <?php endwhile; ?>
        </div>  <!-- /slider -->

   </div> <!-- twelve columns div -->
</div><!-- / slider-home -->
<?php endif; wp_reset_postdata(); ?>

If the tweaks I discuss below seem too complicated, you can create the slider in a somewhat more roundabout way, using empty divs with custom background images! This is a dirty hack and leads to some complications, but it is still legitimate. Here’s how you would do it that way:

<?php
/* a short template to generate the front-page slider from content */
/* puts images in the BACKGROUND of the slider element rather than 
   generating <img /> tags for each image.  Requires the use fluid: attribute
   to be set to (say) 16x9 in javascripts/child-theme.js, rather than 
   "true".  
*/

// Prepare the args for the query
$args = array(
    'post_type' => array( 'post', 'page' ),
    'meta_key' => 'req_slider_checkbox',
    'meta_value' => '1',
    'orderby' => 'date',
    'order' => 'DESC',
    'posts_per_page' => 3
);
// Fire the query
$slider_query = new WP_Query( $args );

// Check for posts in the query
if ( $slider_query->have_posts() ) :
?>
<div id="slider-home" class="row"><!-- Slider -->
        <div id="slider">
            <?php while ( $slider_query->have_posts() ) : $slider_query->the_post();

                $slide_bg_css = ''; // We need this later, if we have a background image

                if ( has_post_thumbnail() ) { // Check for a post thumbnail
                  $this_id = get_the_ID(); // we use this value so many times might as well not run the funtion each time
                    $source = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'full' ); // Change the size according to the registered image sizes you have 'thumbnail|medium|large|full'
                    $tiny_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $this_id ), 'slider-thumb' ); // if we use thumbnails, which are broken right now
                    $slide_bg_url = $source[0]; // The URI is always the first argument here
                    // this css uses the image as a background.  
                    $slide_bg_css = ' style="background-image: url(' . $slide_bg_url . '); background-position:center; background-repeat:no-repeat"';

                }
            ?>
   <div data-thumb="<?php echo $tiny_thumb[0]; ?>" data-caption="#caption-<?php echo $this_id; ?>" id="slide-<?php echo $this_id; ?>" <?php echo $slide_bg_css; ?> onclick="location.href='<?php the_permalink(); ?>';"  >
              </div> <!-- /slide-ID --> 
              <span class="orbit-caption" id="caption-<?php echo $this_id; ?>">
                 <a href="<?php the_permalink(); ?>"> 
                   <h3><?php the_title(); ?></h3> 
                   <?php the_excerpt(); ?> 
                 </a>
              </span> <!-- /orbit-caption span -->

            <?php endwhile; ?>
        </div>  <!-- /slider -->


</div><!-- / Slider -->
<?php endif; wp_reset_postdata(); ?>

In fact you, can even try both out at once. Simply create two files in your child theme directory, “content-slider-bkgrnd.php” and “content-slider-img.php” and modify front.php to call one or the other, and see which you like better.

Make Orbit aware of your slider

We add a tiny piece of javascript code to required-starter/javascripts/child-theme.js:

$('#slider').orbit({
    // fluid: '16x6',
    fluid:true,
    timer: true,
    directionalNav: true,
    bullets: true,
    // captions: false,
    captions: true,
    animation: 'fade',
    advanceSpeed: 6000,          // if timer is enabled, time between transitions
    pauseOnHover: true,        // if you hover pauses the slider
    startClockOnMouseOut: true,    // if clock should start on MouseOut
    startClockOnMouseOutAfter: 1000,
    bulletThumbs: false,
    bulletThumbsLocation: ""
});
//$('#slider-home .timer').hide();

This code simply says, “look in the web page for the HTML element named ‘slider’. Then, apply the orbit slider code to that element. And while you’re at it, here are some more specific instructions for you: resize the slider dynamically depending on the size of the screen we’re viewing form; put a timer & arrow-based navigation on the slider; use bullets and captions; etc.” You can learn more about the options and what they mean from the Foundation Orbit docs.

Tweaks

To get this to look really good, we still have to do a couple of little things.

Add new image sizes.

When you upload an image to wordpress, it automatically creates a whole set of “thumbnail” images of different sizes, to use in different contexts. So, you have the “full” image, and then (by default, “thumbnail”, “Medium”, and “large” sizes. However, you can create your own sizes if you want! And if you’re using the <img /> tag method described above, it’s a really good idea to do so. You might want to think about the dimensions for this – do you want a really long, skinny picture – so that it looks almost like a website banner? Or would you like something almost squarish, suitable perhaps for a slider that is placed to the left or the right of some explanatory text? The dimensions I’ve chosen is sort of middling, but you can modify it easily. All we do is add one little line to the section “function required_theme_setup” in “functions.php” file in themes/required-starter:

*/
function required_starter_themesetup() {

        load_child_theme_textdomain( 'requiredstarter', get_template_directory() . '/languages' );

        // Register an additional Menu Location
        register_nav_menus( array(
                'meta' => __( 'Meta Menu', 'requiredstarter' )
        ) );

        // Add support for custom backgrounds and overwrite the parent backgorund color
        add_theme_support( 'custom-background', array( 'default-color' => 'f7f7f7' ) );

        // add an image size for slider
        add_image_size( 'slider-16x9', 960, 540, true ); // Hard Crop Mode
        add_image_size( 'slider-thumb', 32, 18, false ); // Soft Crop Mode
}

You can see I actually have two “add_image_size lines here – one for the main image, and one intended to be used for tiny slider thumbnails (that isn ‘t working right now though!).

Regenerate image Thumbs

These new thumbnails will be applied to all NEW images uploaded to the site. The old ones, though, won’t have them. If you already have a bnuch of images on your site, you can install the “regenerate Thumbnails” plugin, which will regenerate all your thumbnails for you. You can deactivate and then delete it after you’re done with the development of your site, so your lcients don’t have to think about it.

CSS

You may want some CSS to make the captions look nice & perhaps add a border or something to the slider div. This is what I’ve put in my own style.css file to prettify my slider:

/* Slider Tweaks  */
div.orbit-caption h3, div.orbit-caption p {
    color:white;
}

Can you tell what that does? Try to figure it out, it’s trivially simple.

OK, that’s all for now! Keep on trucking!

Favicons

This is a very small issue you will want to deal with near the end of your project. Load your website in a new tab. Notice that there is a small picture – an “icon” – displayed in the tab.

This picutre is called, for obscure reasons, a “favicon”. Its main use it to help you navigate visually between tabs – so you just look up at your tab bar and know immediately which tab is the one with your site loaded. The favicon has to be a file that is somewhere accessible on the web, usually in the root directory of the site.

Our starter theme uses the following line in header.php to find the favicon:

<link rel="shortcut icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png">

Try to read this and understand it. This is a pretty simple HTML tag, using the link tag and the icon relation to tell the browser where the favicon is located. However, there is one tiny php command hidden inside:

<?php echo get_stylesheet_directory_uri(); ?>

This command just says to wordpress: “first, check to see if this is a child theme; if it is, look for the file there; if not, look for the file in the parent theme”. So then, back to the original html:

<link rel="shortcut icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png">

and you can see WordPress will try to find a file called “favicon.png” in the directory themes/required-starter/, and if it can’t find it, will try to find the file themes/required-foundation/favicon.png. So: right now your favicon.png is the company logo for the developer firm “required”. You will eventually want to replace that with the logo of your client. The standard favicon format is a PNG file of 32×32 pixels. So you will want to generate that somehow, eventually.

OK, tutorial #1 for today.

WordPress Plugin Needs

I’m trying to collect a list of technical problems we know will be faced by projects this term. I’m going to try to help implementing some of the solutions, though I likely won’t be able to do everything. So I will definitely need feeback/buy in/testing/coding help from some of you at some point. Anyway, here is a partial list, can you use the comments list to expand/correct?

Maps

Projects: Kensington & Regent Park, at least; MHSO, maybe.

Functionality: Geotag some or all posts. Generate map markers from those posts. Enable filtering of markers e.g. by category.

Starting Points: Geo Tag Plugin, and some others on WP plugins site.

Sliders

Projects: Probably everyone?

Functionality: Create & style sliders. Have them generated automtially form post content. Make it easy for end-users to edit/modify.

Starting Points: zillions of them. Most require jQuery.

Popcorn Oral History Interface

Projects: MHSO at least

Functionality: An internal interface to the popcornmaker editing framework that saves the popcorn data in custom fields of a custom content type. Uses WordPress’s own internal user authentication & returns the data in some bits, perhaps. Ned to figure out the relationship btwn the popcorn template & the wordpress templating system. ugh.

Starting Points: the popcorn list…

Timelines

Projects: Kensington, probably (cf. proposal)

Functionality: Display a selection of posts on a timeline. Would be nice to be able to filter 7 control the timeline…

Starting Points: VéritéCo Timeline now exists! awesome! Cf. support threads here. Other options may be good too, but this looks pretty functional, pretty good-looking, & customizable (at first glance).

Your turn

OK, that’s what I’ve got. Comments, questions, additions? Please install the starting-point plugins on your sites & see whether they seem like good beginnings.

Resources

Apostrophes and Plurals!

Just a quick note to everyone – The blogs have been great & I appreciate the range of tones I’m seeing in the writing but CAN EVERYONE PLEASE PAY ATTENTION TO THEIR APOSTROPHES and e.g. the use of a plural when the possessive is intended. If only because those errors are going to make me bleed through my eyes if I keep seeing them.

WordPress Sites Live!

Hey folks! Your personal websites are now live! These are your own personal ‘sandboxes’ – think of them as you do the Wikipedia sandboxes, as places to experiment and learn how to use a tool you’re going to put to more serious use later on.

Introducing WordPress

You can find your site at http:yourfirstname.hackinghistory.ca, where ‘yourfirstname’ is, that’s right, your first name, as you spell it in the class or on the website (if you’re using a strange alias I just chose your actual first name). You’ll need to complete the registration process; this will take a few moments as the database is initialized and a bunch of new plugins are installed.

Please take some time this weekend to familiarize yourself with this software. You’ve been using it this term to write your blog posts, but now that you have admin access to a site you’ll start to understand it much better. I want you to notice a couple of things in particular. When you log in you’ll see the familiar WordPress dashboard, but there are a few new additions:

  • “Appearance” gives you control over all aspects of the site’s appearance. Try to fool around a little with the themes and menus so that you come to understand them better.
  • “Plugins” lists the additional funtionality that has been installed along with WordPress. Pretty much anything you want to with WordPress, there’s a plugin for it. Probably 5 or 10, in fact. Feel free to instal some new ones.
  • “Custom Content Types” controls the custom content types available on your site. More about that in a sec.
  • Almost all of this stuff (except the last bit) is discussed in the documentation (“First steps with WordPress”). You really, really should check it out. The web is your friend on this one.

Here’s a screenshot to help you out:

http://2012.hackinghistory.ca/wp-content/uploads/2012/10/wpid-wp_dashboard_markedup.jpg

Your Mission Should You Choose To Accept It

Over the course of the year you will be taking a blank slate like this one and turning it into a vehicle to express our views & create a community around the issue you work on. Take some time this weekend to turn your empty WordPress installation into a website with purpose. Maybe you want to commemorate the 50th anniversary of the Martian invasion? Or perhaps you will work to build a website for a community of Etruscan philologues. Whatever the topic, think about how the subject matter should structure the presentation of your material. Do you need just one menu, or do you need sidebar navigation (think about how retronaut works)? How can you invite the community to contribute? How much instruction does your site need? And so forth. The point, really, is to get you thinking about design issues and how deeply they intrude into the creative process in a project like this.

Next Week

Next Week we will be learning about WordPress themes. You may want to give yourself a headstart by reading some of the documentation, as well as more advanced topics.

Custom Content Types

We use the awe-inpiring Custom Content Type Manager, which vastly enhances WP’s native capabilities. To activate it you’re going to have to go to the “Tools” tab of the Custom Content Types options screen:

http://2012.hackinghistory.ca/wp-content/uploads/2012/10/wpid-Screenshot-from-2012-10-04-222841.png

You want to Import a CCT definitions file – in this case, the one called “historicalimagesoct2012.cctm.json”. This will allow you to use the historical images content type you’ve seen in action on the ‘microscope’ website – though, actually, not quite, but you’ll at least be able to see how you would create such images. Check it out, if you have time, and familiarize yourself with the interface. Maybe you want to create your own CCT’s? If so feel free – remember, this site is your playground

Final Note

One unusual customization – I’ve given myself backdoor access to all your sitesThis way, if you somehow lose all access to your site (that shouldn’t be possible!) I can at least get into the site and help you out.

OK – have fun, and happy Thanksgiving!

Oops, wrong link

Hi guys, I accidentally linked to the wrong Dan Cohen link for Spider & the Web. I’ve fixed it in the syllabus but if you want to check it out, the results of the game are here and links to the 2 initial posts are buried in the article.

Lab 03: Understanding Wikipedia

These are some notes about what we’ll be doing in class during the lab period. I’ll post these whenever I have a chance, both to give you a chance to get ahead and to give you an opportunity to look back on what we’ve done afterwards.

We’ve read a lot about how Wikipedia works, but it’s worth looking more closely at the process. Let’s go through a few steps:

Sign up for an account

To edit Wikipedia you need to be logged in. Create an account here. Edit your basic user preferences. Then under “Watchlist”, check the box labelled “Add pages and files I edit to my watchlist” (near the bottom).

Pick some very active pages to follow (just for now)

e.g., iPhone 5, Syrian civial War, United States presidential election, 2012. Now go back to your watchlist and subscribe to the RSS feed. Consider using Google Reader to start managing your RSS feeds.

Experiment with the syntax in the sandbox

Click on the “My Sandbox” link near the top of the page. This will take you to a kind of practice room where you can get used to Wikipedia syntax before heading off into the real world. Hmm, what should you write about?

Check out history & discussion on some interesting pages

For us (writing local history) one area of interest is the History of Toronto series. Make sure you look at the ‘Talk” pages. Also look at the Toronto Project which has a number of important links.

Try a few edits

Scrolling down the Toronto Project you will find that the pages have been rated for quality. Using the Wikipedia Quality Scale you can see what pages need the kind of help you might be able to give. Now feel free to dive in; then see what happens!