CSS, HTML

Bolt Book Club Exercise Explanation

To do the math for the layout for the exercise, there are two approaches you could use: with or without the use of box-sizing: border-box.

Depending on which you choose, the measurements would be as follows:

.book {
	margin: 1rem 1.75%;
	padding: 1.25%;
	box-sizing: border-box; /* optional */
}

@media screen and (min-width: 450px) {
	.book {
		float: left;
		width: 46.5%; /* if using border-box */
		width: 44%; /* if NOT using border-box */
	}
}

@media screen and (min-width: 1000px) {
	.book {
		width: 21.5%; /* if using border-box */
		width: 19%; /* if NOT using border-box */
	}
}

The logic is this:

If we want two boxes to sit side by side and to take the full width of their container, they need to occupy 50% each. If we want four boxes to do that, they need to occupy 25% each.

If we use box-sizing:border-box, then the width of the box INCLUDES the padding. Therefore we just need to subtract the left and right margin from the space we want the box to occupy:

25% – 1.75% – 1.75% = 21.5%
50% – 1.75% – 1.75% = 46.5%

In other words, we need to subtract 3.5% from our desired occupied space.

If we don’t use box-sizing:border-box, then the width of the box DOES NOT INCLUDE the padding. So we need to subtract the padding-left and padding-right, too.

25% – 1.75% – 1.75% – 1.25% – 1.25% = 19%
50% – 1.75% – 1.75% – 1.25% – 1.25% = 44%

In other words, we need to subtract 6% from our desired occupied space.

Standard
CSS, HTML

FlexBox Photo Blog Layout Exercise

In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files.

There are three sections to this page: a header, a main area, and a footer.

The font used thoughout is the Google font Old Standard TT.

Mark Distribution

Header / Footer: 20%
Small, Medium, Large: 50%
Extra-Large: 30%

Bonus Task: 20%

Header / Footer

The header and footer look and behave almost the same way: the only difference is that the footer does not have the site name (light). In the header, the site name box will take 1/3, while the nav element will take 2/3. It will look like this at full width:

menu full size

As the page width decreases, the header area will arrange itself like this:

menu small

In the footer, make the menu take the full width of the page (the screenshot is showing a small slice of the MAIN area, so you get a better idea of how the footer behaves in relation to it).

You do not have to make the items into actual links. Just focus on getting the layout correct.

Main Area

The main area consists of 30 articles. Each article has an h2, an image in a DIV, and a single paragraph.

There are four responsive states: small, medium, large, and extra-large. Click on any of the screenshots for a bigger view, or consult the screenshot files you downloaded from the top of this page.

Small

small layout

Medium

medium layout

Large

Extra Large

Extra Large Layout

 

Bonus Task

For a 20% bonus, figure out how to add light grey background to alternating rows of articles, starting with the second row, without using classes or adding to the HTML.

Do not add the striping in single column view. Add it once the articles have rows of two, three, or four articles each.

Obviously, the striping must change with the responsive breakpoints.

row striping

 

All images in this exercise are from Flickr, with creative commons licensing. Attributions are here.

 

 

Standard
WordPress Templates

Jazz Icons 2017

Please download the Duplicator archive for this exercise, then download the screenshots package. The Duplicator archive contains all the site content, including the menus.

It also includes an UNDERSCORES starter theme with two modifications. The first modification makes post thumbnails already have their associated links. The second wraps all YouTube videos in a DIV to make it easier for them to be styled responsively.

Any sans-serif fonts used are the helvetica, arial, sans-serif font stack. Any serif fonts are the Google font LORA.

No page in the site will have a sidebar.

You can use SASS if you want to, or not use it if you don’t want to.

Make sure that you are testing the site with Google Chrome, as that is the browser I will mark with.

How To Hand In The Exercise

When you are done the exam, please make a Duplicator archive of the site. Make sure that you do this in Chrome.

Then hand it into the class handin folder, in a folder called JazzIcons. Inside that folder there needs to be a file called installer.php and a zip archive with a long name. Make sure that you did not accidentally unzip the zip file.

Marks Breakdown

Header 10%
Menu 15%
Article Styling 20%
Home, Archive, Search Layout 40%
404 Page Text Change 5%
Search Page Heading 10%
Single Post Bonus 50%

Header Area

The header on all pages will look like this. The Underscores starter theme has a button that appears at smaller widths in the header. Remove it.

Header screenshot

Menu

The menu will have the following items: a link to home, category links, and a link to a Contact page.

With the menu, make sure that the user’s current location in the site is indicated. In the above screenshot, the user is on an archive listing all posts about Saxophone players.

Menu: Responsive Strategy

The screenshot above shows menu items when they fit into one row. At smaller browser widths, the menu items reflow. Both rows in the menu will always take the full width of their content area. The menu items, in other words, automatically take whatever space is available to them.

menu screenshot menu screenshot menu screenshot

Articles

On the home page, category archives, and search results, each article will look like the screenshot below.  Think about what this means for your templating.

On those pages, each article will have the post title, the posted-on date, the post excerpt, the feature image, and the post and category links. ( A logged in user might also see the EDIT link as well ).

Article Screenshot

Home Page, Archive Pages, Search Results Layout

These pages will all behave the same way:

  • at full screen width, the articles sit three in a row (if available)
  • at medium width, the articles site two in a row (if available)
  • at small width, the articles sit in a single column, but with the main text still beside the image
  • at small phone width, the articles sit in a single column, but with the main text now underneath the image

Consult the downloaded screenshots to get what I mean here. You determine the breakpoints needed.

404 Page

For the 404 page, change the phrase It looks like nothing was found at this location. The new line will be We’re sorry: there appears to be no content at this location. 

Search Page

On the Search Results page, make the heading that shows the search results stand out like this:

Search Results

 

Single Posts

This part is for a 50% bonus.

When a user clicks on the title of post or the thumbnail, they will be taken to the single view of the post.

It will look like this. Click it for a bigger view, or consult the downloaded screenshot file.

The text will be in the middle of the screen. It will be prevented from getting too wide. The thumbnail will not appear. The video, which is the first thing in the content window, will be responsive.

Standard
WordPress Templates

WordPress: Film Festival Site: Remaining Tasks

Hopefully this exercise has given you some ideas about how to build WordPress templates.

A number of things, of course, remain to do.

There is a social menu, so icon fonts would be nice.

Check that the site works on a phone.

A nice 404 page would be a good idea. With some research, you could add a more prominent search form, lists of recent posts or comments, another menu, etc.

Speaking of search, a more nicely-styled search box in the header should be on the agenda.

I did not do very much styling in this exercise. To get the design to look closer to what it does in the screenshots, you need to study the screenshots and then figure out how to implements what is done in them in CSS.

You should make major use of FLEX. Flex will be very helpful, for instance, in the sections where content has to appear in the page in a different order from the way it appears in the source. Places where that happens include the index loops, the header, the archives and the SINGLE view.

Check your PAGE template, since there are a couple pages in the site.

Test the search results page. Test the archives. Here are my search results from a sample search. (Click image for greater detail.)

Here I have specified a summary rather than the full content of the post, for example, and the order of content in each article is different from the order on other pages.

 

A nice feature to add would be some jQuery or JS to make the footer form collapse, but be “openable” with a (large) button click.

Be sure, also, to edit the list of font-weights coming from Google, once you have decided how many you are actually going to use.

Standard
WordPress Templates

WordPress Film Festival Site: template-parts (single)

For the SINGLE view, I am going to make another template-part. We could, of course, just use conditions within the template-part, but since we did not cover those in class, forgive the fact that this method involves some repetition of code.

Anyway, for the SINGLE view, I want to have the following features

  • No Feature Image, since the Video will appear
  • The full text of the post
  • The title
  • Some film-related meta data

The meta-data is attached to each post with the ADVANCED CUSTOM FIELDS plugin, which is one of the most used plugins in the WordPress world. If you look at one of the posts in the dashboard editing window, you will see the additional fields (for Country, Director, and Year).

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

	<header class="entry-header">
		<?php
			the_title( '<h1 class="entry-title">', '</h1>' );
                ?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php
			
               the_content( sprintf(
				/* translators: %s: Name of current post. */
				wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'untouched' ), array( 'span' => array( 'class' => array() ) ) ),
				the_title( '<span class="screen-reader-text">"', '"</span>', false )
			) );
                            
			wp_link_pages( array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'iff' ),
				'after'  => '</div>',
			) );
		?>
           
	</div><!-- .entry-content -->
   
        
        <div class="entry-meta-data">
                <ul>
                    <li><b>Country: </b><?php esc_html(the_field('country')); ?></li>
                    <li><b>Director: </b><?php esc_html(the_field('director')); ?></li>
                    <li><b>Year: </b><?php esc_html(the_field('year')); ?></li>                   
                </ul>    
         </div>
                
        
</article><!-- #post-## -->

To learn how to output data from Advanced Custom Fields, consult the developer’s Documentation.

You have likely noticed in the metadata section that I have wrapped the ACF calls ( the_field() ) inside the WordPress esc_html() function. This function, and others that are similar, is used throughout underscores. This is called SANITIZING. The reason for using it is that if either malicious code ( small example: <script>alert(‘this site sucks!’)</script> ) or badly formed HTML is entered into a field, it can have embarrassing (or worse) consequences.

A couple tests make me suspect that ACF sanitizes user input anyway, but it is never a bad idea to sanitize on output as well as input.

Anyway, with some styling, the page looks like this (click image for larger, detailed, view):

( I should style the comment form so that it doesn’t take the full width of the page, but it’s late and I’m sure you get the idea anyway).

NEXT: remaining tasks

Standard
Uncategorized

WordPress Film Festival Site: template-parts (home)

So we have constructed a front-page template that outputs our content in two defined loops rather than one “reverse-chronological” default loop.

But when we test, we see that too much content is being output. If we look at the screenshot on the page about the front-page template, we will see that we need the following in each article on the home page:

  • Category
  • Feature Image
  • Post Title

To do this we will now edit the content-home.php file we created earlier in the template-parts folder.

When we open it, we are confronted by the following code:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_single() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		endif;

		if ( 'post' === get_post_type() ) : ?>
		<div class="entry-meta">
			<?php iff_posted_on(); ?>
		</div><!-- .entry-meta -->
		<?php
		endif; ?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php
			the_content( sprintf(
				/* translators: %s: Name of current post. */
				wp_kses( __( 'Continue reading %s <span class="meta-nav">&rarr;</span>', 'iff' ), array( 'span' => array( 'class' => array() ) ) ),
				the_title( '<span class="screen-reader-text">"', '"</span>', false )
			) );

			wp_link_pages( array(
				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'iff' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
		<?php iff_entry_footer(); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

That might seem like a lot of code. However, there are a bunch of conditions that are not relevant to our situation here: this template_part was intended to be used in a number of contexts, but our site does not need that level of complexity. In other words, we are making a much simpler article, so we can remove a big chunk of this.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<?php
		if ( is_single() ) :
			the_title( '<h1 class="entry-title">', '</h1>' );
		else :
			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
		endif;
             
		?>
	</header><!-- .entry-header -->

	<div class="entry-content">
		<?php

                    the_post_thumbnail();
		?>
	</div><!-- .entry-content -->

	<footer class="entry-footer">
               <?php the_category(' &bull; '); ?>
	</footer><!-- .entry-footer -->
</article><!-- #post-## -->

So what is happening here?

We are outputting an ARTICLE with the following content, in order:

  • The Title
  • The Feature Image
  • The Categories (separated with a bullet)

Even though the order is different from that in the screenshot, it makes sense to do it this way: having the header ahead of the category makes sense from the perspective of SEO and accessibility.

Test the page. You will see that the link is clickable, taking the user to the SINGLE view of the article. As well, the categories are clickable, taking the user to an archive view.

You have, however, most likely noticed that the feature images are not clickable.

We could take the element from the ELSE condition in the entry-header, wrapping it around the permalink. That is a common technique:

   <a href="<?php esc_url( get_permalink() ); ?>">
		<?php the_post_thumbnail();?>
  </a>

However, another way is revealed in the WordPress Codex page about feature images.

The disadvantage of the code above is that we would need to do it on any template-part that had the feature image. The code below, when added to FUNCTIONS.PHP, will make all post thumbnails regardless of template file link to the SINGLE full view of a post (the permalink, in other words):

/**
 * Link all post thumbnails to the post permalink. 
 *
 * @param string $html          Post thumbnail HTML.
 * @param int    $post_id       Post ID.
 * @param int    $post_image_id Post image ID.
 * @return string Filtered post image HTML.
 */
function iff_post_image_html( $html, $post_id, $post_image_id ) {
    $html = '<a href="' . get_permalink( $post_id ) . '" alt="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
    return $html;
}
add_filter( 'post_thumbnail_html', 'iff_post_image_html', 10, 3 );

I changed the function name (in two places) to keep the standard best-practice naming conventions described earlier.

NEXT: do_shortcode();

Standard
WordPress Templates

WordPress: Film Festival Site: do_shortcode()

Now let’s turn to the complex footer we have in the screenshot.

This is actually quite easy.

I have installed a highly-regarded FORMS plugin called Ninja Forms. That is why you see a FORMS section in the Dashboard (just below the COMMENTS menu item in the dashboard).

Using a WordPress feature called Shortcodes, we will insert a Ninja Form in our FOOTER.

If you have ever made a WordPress Gallery, you have used Shortcodes. If you look in the TEXT view of a gallery you will see a few words and numbers enclosed in square brackets.

Similarly, if you look in the Ninja Forms ALL FORMS area, you will see the shortcodes listed:

If you put a shortcode into a post or page (text mode only, not visual mode), the functionality triggered by the shortcode will appear there.

However, we can also use a WP function do_shortcode() to add functionality to template files.

Go to the NINJA FORMS area in the site you have setup. Copy the SHORTCODE for the REGISTRATION FORM.

Now open up the footer.php file.

Just beyond after the opening of the FOOTER tag, put in the following:

<?php echo do_shortcode( '[ninja_form id=3]' ); ?>

Test your page. Is that cool? Yah, that’s cool.

NEXT: another template-part

Standard
WordPress Templates

WordPress: Film Festival Site Home Page

Look at your home page. You will see the header and footer and sidebar area, hopefully well styled.

Look at the rest of the content on the page. The default home page loop outputs the title, the posting date, all the content, the categories and the tags, etc. Each article is essentially unstyled, so the content is taking up 100% of the browser width.

We will change that. Duplicate your index.php template file and rename the new one front-page.php then open it up in Netbeans:

Here is a screenshot of what we will build. Click the image for a much larger, more detailed, view:

 

In brief, here is what we will put in the front-page template file

  1. An h2: “Showing This Year”
  2. A number of articles, each with only the category, the feature image, and the title. These posts are tagged with high definition. 
  3. Another h2: “Hall of Fame”
  4. Another collection of articles, with category, feature image, and title. These posts are tagged with regular definition. 

The additional content on the page will output via edits to other template pages.

Creating the Custom Loops

If you need a review of wp_query, read my post on multiple loops in WordPress.

To begin this edit, go after the <main> element in the front-page.php file.

Add an H2. You are still in HTML right now, so you do not need to close a PHP tag.

  <h2 class="section-heading"><span>Showing This Year</span></h2>

If you are wondering why I have included the SPAN tag, it is because I might do the positioned-broken-border trick on this element.

Now add new WP Query object after the H2 you have just added


<?php
/* HIGH RES MOVIES QUERY */
  $movies_query = new WP_Query( array(
                        'tag' => 'high-definition',
                        'posts_per_page' => '40',
                        'orderby' => 'rand',
                    ) );

Then modify your loop so that you are using this new WP_Query object instead of the default global WP_Query object. I removed the conditional part at the start of the loop: it is not needed here. I also removed a comment section.

One additional change is that I am going to want to customize the display of articles for this page. So amend the get_template_parts function, replacing the get_post_format() like this (only in the IF part: leave the ELSE part with the ‘none’):

     get_template_part( 'template-parts/content', 'home' );

This is the code I am left with for my first loop:

if ( $movies_query->have_posts() ) :
         /* Start the Loop */
	while ( $movies_query->have_posts() ) : $movies_query->the_post();

               get_template_part( 'template-parts/content', 'home' );

       endwhile;

	the_posts_navigation();

	else :

	get_template_part( 'template-parts/content', 'none' );

endif; 
wp_reset_postdata();
                      
/* ============================================== */   
?>

Before testing your page, go into the template-parts folder and duplicate content.php, renaming it content-home.php.

If the first section loop works, copy it and change a few words to get your second loop section. Here is my second section:

<h2 class="section-heading"><span>Hall of Fame</span></h2>  
   <?php
    
/* LOW RES MOVIES QUERY ========================================== */   
        $low_res_movies_query = new WP_Query( array(
                        'tag' => 'regular-definition', 
                        'posts_per_page' => '6',
                        'orderby' => 'rand',
                    ) );
                     
	if ( $low_res_movies_query->have_posts() ) :
		/* Start the Loop */
		while ( $low_res_movies_query->have_posts() ) : $low_res_movies_query->the_post();

			get_template_part( 'template-parts/content', 'home' );

		endwhile;

			the_posts_navigation();

	 else :
		get_template_part( 'template-parts/content', 'none' );
          endif; 
          
         wp_reset_postdata();
                      
 /* ============================================== */   
 ?>
      

Be sure at the end of each loop to call wp_reset_postdata() in order that the main WP_Query object is not affected by your custom loops.

For additional information on the various Methods and Properties of the WP_Query object, consult the WordPress Codex.

Once you do that, test the front page of your site. Hopefully, you are getting both sections output to the page, with the correct content. If you are not getting it to work, compare the code you have written to the loop that is in the index.php file: there may be something obvious. If that does not help and we’re in a lab, ask me to take a look at it.

NEXT: template-parts 1

Standard