How I Made This Site

how I did it

When I set about making this site I had a design and functionality in mind for it. I had made a couple WordPress sites 2+ years ago but basically, had forgotten all I had learned. This post will round up all the techniques that I learned while making this site. So if you see anything in this site you want to copy, keep on reading!

Starting WordPress Theme

I didn’t want to start with a bulky theme that had a bunch of features I didn’t understand or need. I did some hunting and found Starkers theme. This theme is very bare. I really liked starting with a blank slate though. It made me delve into the WordPress codex to find everything I needed. Note: When going through the rest of this article, please know that if you aren’t using a blank theme, your theme might have these features already.

Adding Sidebar Widgets

I quickly found that the Starkers theme didn’t come with sidebars. I did some digging and found this snippet to put in my functions.php file. This code is making two sidebars. One called “Standard” and one called “Fronto”.

function arphabet_widgets_init() {

register_sidebar( array(
'name' => 'Standard',
'id' => 'standard',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );

register_sidebar( array(
'name' => 'Fronto',
'id' => 'fronto',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );

In order to get just my blog posts showing in my sidebar (as opposed to all of my posts), I used the TW Recent Posts Widget plugin.

Custom Primary Navigation Menu

I wanted to include only a certain selection of pages on my primary navigation. I didn’t want to have to exclude any future pages I might make so I chose to only include the pages I wanted to. I put the following below in my header.php file. The numbers in the array are the page numbers.

wp_page_menu('menu_class=main-menu&include=2,17,21,24,44');

In order to get my blog and portfolio showing up as actual WordPress pages (since they are category pages), I used the Page Links To plugin.

I then wanted my menu to appear context sensitive. When the user was viewing something in my portfolio, I wanted the portfolio link in my primary navigation to indicate they were in my portfolio. I did that using two techniques.

One was to add the category type into the body class, again in the functions.php file.

function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Then, a long selector of CSS to make tie it all together.

.home .page-item-2 a, .category-blog .page-item-17 a, .blog .page-item-17 a, .category-portfolio .page-item-21 a, .portfolio .page-item-21 a, .current_page_item a {
font-style: italic;
color: #4988c8;
}

Custom Image Sizes, Responsive Design and WordPress

I wanted to post different sizes of my pictures in different portions of my site. For example, the front page I have a huge slider and my tiny little portfolio pictures beneath it. I didn’t have to upload two images to do that. I added the following below to my functions.php. One caveat to this is that in order for WordPress to resize these for you, you have to have these settings in your functions.php before you upload them. In other words, if I wanted a new image preset to apply to all of my uploaded images, I would be helpless. If anyone has a better way to do this, please let me know.

Here is what you do to add different image presets in functions.php. Check out the codex for full details on the parameters.

add_image_size( 'thumby', 240, 81, true);
add_image_size( 'thumby2', 240, 167, true);
add_image_size( '8colwide', 793, 268, true);
add_image_size( '8colhigh', 793, 552, true);

Below is how I called the preset “thumby2” on my front page template. There is some extra code in there to make every third post have a class for layout reasons. See line 12 for the image code.

<ul>
<?php
$counter =0;
query_posts('cat=2&posts_per_page=6');
while (have_posts()) : the_post();
++$counter;
if($counter == 3) {
$postclass = 'class="third-post"';
$counter = 0;
} else { $postclass = ''; }?>
<li <?php echo $postclass;?>><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('thumby2'); ?><p><?php the_title(); ?></p></a></li>
<?php endwhile;?>
</ul>

Responsive Design Curveball

WordPress automatically adds the width and height to your images. In responsive design, it is standard to not include the width and height attributes in the img tag. I did some hunting and found this snippet to put in functions.php that removes the height and width attributes. I did not create this. Click below to expand and view, it’s a doozy.

/**
* This is a modification of image_downsize() function in wp-includes/media.php
* we will remove all the width and height references, therefore the img tag
* will not add width and height attributes to the image sent to the editor.
*
* @param bool false No height and width references.
* @param int $id Attachment ID for image.
* @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
* @return bool|array False on failure, array on success.
*/
function myprefix_image_downsize( $value = false, $id, $size ) {
if ( !wp_attachment_is_image($id) )
return false;

$img_url = wp_get_attachment_url($id);
$is_intermediate = false;
$img_url_basename = wp_basename($img_url);

// try for a new style intermediate size
if ( $intermediate = image_get_intermediate_size($id, $size) ) {
$img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
$is_intermediate = true;
}
elseif ( $size == 'thumbnail' ) {
// Fall back to the old thumbnail
if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
$img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
$is_intermediate = true;
}
}

// We have the actual image size, but might need to further constrain it if content_width is narrower
if ( $img_url) {
return array( $img_url, 0, 0, $is_intermediate );
}
return false;
}
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Title Tag

In order to make my title tag have the order and syntax mine has, I used the following snippet.

wp_title('|',true,'right'); ?><?php bloginfo('name');

That’s about it. If you have questions or a better way to do what I’m doing, please let me know, I’d love to hear about it!

Posted | 1 Comment

1 response to How I Made This Site

Leave a Reply

Your email address will not be published. Required fields are marked *

Search