Code Snippets

Here are a bunch of code snippets to help with your next design.  Feel free to use anything you like!
***
In style.css
***

#wrapper {
display: block;
max-width: 1040px; /* max-width makes frame responsive */
margin: 0 auto;
background: #fff;
}

***
At the bottom of style.css
***

/*

Media Queries Aplenty

*/

@media only screen
and (min-width : 720px ) and (max-width : 1039px) {

#wrapper {
max-width: 720px;
}

}
***
In style.css
***

@media only screen
and (max-width : 719px ) {

#wrapper {
width: 100%;
}

#pre-header {
padding: 0px 20px;
}

#header-search {
right: 20px;
}

#header-search #searchform input#s {
width: 175px;
}

#header_margin,
.page-header h1,
#related,
#footer-sidebar ul    {
padding: 20px;
}

#content {
margin: 20px;
}

h1#recent {
margin-left: 20px;
}

} /* END max-width : 719px */
***
In header.php
***

<!– Check device width for responsive media queries –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
.header-container {
margin-left: 34.04255319148936%;
}
#header-title {
margin-left: -51.61290322580645%;
width: 48.38709677419355%;
float: left;
}
***
In @media only screen and (max-width : 719)
***

.header-container {
margin-left: 0;
}

#header-title {
margin-left: 0;
width: 100%;
float: none;
}
#access {
display: block;
float: right;
margin-top: 10px;
}

#access li {
float: left;
position: relative;
margin: 0 0 0 2em;
}

***
In @media only screen and (max-width : 719)
***
#access {
float: left;
}

#access li {
margin: 0 2em 0 0;
}
***
In @media only screen and (max-width : 719)
***

Remove:
#access {
float: left;
}

#access li {
margin: 0 2em 0 0;
}

Add:

/* Jump main menu down */

#access {
background: #fff;
margin: 20px -20px -20px -20px;
float: left;
}

#access li {
float: left;
position: relative;
margin: 0;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}

#access a {
display: block;
padding: 10px 25px;
text-decoration: none;
color: #333;
text-transform: uppercase;
font-size: 0.8em;
}

#access li:hover > a,
#access li:focus > a {
color: #000;
}

#access ul ul {
top: 2.1em;
margin-left: 10px;
background-position: 30px 0px;
}

 

.post-container {
margin-left: 34.04255319148936%;
}
.entry-header {
margin-left: -51.61290322580645%;
width: 48.38709677419355%;
float: left;
word-wrap: break-word;
}

***
In @media only screen and (max-width : 719)
***

.post-container {
margin-left: 0;
}

.entry-header {
margin-left: 0;
width: 100%;
float: none;
}

 

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
#sidebar img,
.wp-caption {
max-width: 100%; /* When images are too wide for containing element, force them to fit. */
height: auto; /* Override height to match resized width for correct aspect ratio. */
}

img.aligncenter,
.wp-caption.aligncenter {
margin: 0 auto 1.5em auto;
max-width: 100%;
height: auto;
}
***
Add FitVids (http://fitvidsjs.com/):
In functions.php
***

// Add FitVids to allow for responsive sizing of videos
function anaximander_fitvids() {
if (!is_admin()) {

wp_register_script( ‘fitvids’, get_template_directory_uri() . ‘/js/jquery.fitvids.js’, array(‘jquery’), ‘1.0’, true);
wp_enqueue_script( ‘fitvids’);
add_action(‘wp_head’, ‘add_fitthem’);

function add_fitthem() { ?>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘.video’).fitVids();
});
</script><?php
}

}
}

add_action(‘init’, ‘anaximander_fitvids’);

// Automatically append .video class to oembed content (not a perfect solution, but close)
function anaximander_embed_filter( $html, $data, $url ) {

$return = ‘<div class=”video”>’.$html.'</div>’;
return $return;
}
add_filter(‘oembed_dataparse’, ‘anaximander_embed_filter’, 90, 3 );

***
In style.css (optional)
***

.video {
margin: 0 0 1em 0;
}

video {
width: 100%;
height: auto;
}

 

***
In (max-width : 719px )
***

#regular-index {
float: none;
margin: 0;
}

#regular-content {
margin: 0;
}

#sidebar {
float: none;
overflow: inherit;
width: 100%;
margin: 0;
}

/* Change widgets to stack one on top of the other */

#sidebar .widget {
width: inherit;
border: none;
background: #E3E3E3;
float: none;
padding: 0;
margin: 0 0 20px 0;
}

#sidebar .widget ul {
padding: 0 20px 20px 20px;
}

#sidebar .widget-title {
padding: 20px 20px 0 20px;
}

#sidebar ul li a:hover,
#sidebar ul li a:focus {
background-color: #fff;
}

 

***
In (max-width : 719px)
***

#related ul li {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 20px;
}

#footer-sidebar ul li {
width: 100%;
float: none;
margin-right: 0;
margin-bottom: 50px;
}

 

***
In footer.php
***

<p><a href=”#content”>You have reached the bottom. Click here to get back on top.</a></p>

 

***
Download Flexslider: http://www.woothemes.com/flexslider/
In functions.php
***

// FLEXSLIDER

function anaximander_flexslider() {
if (!is_admin()) {

// Enqueue FlexSlider JavaScript
wp_register_script(‘jquery_flexslider’, get_template_directory_uri(). ‘/js/jquery.flexslider-min.js’, array(‘jquery’) );
wp_enqueue_script(‘jquery_flexslider’);

// Enqueue FlexSlider Stylesheet
wp_register_style( ‘flexslider-style’, get_template_directory_uri() . ‘/CSS/flexslider.css’, ‘all’ );
wp_enqueue_style( ‘flexslider-style’ );

// FlexSlider custom settings
add_action(‘wp_footer’, ‘anaximander_flexslider_settings’);

function anaximander_flexslider_settings() { ?>
<script>
jQuery(document).ready(function($){

$(‘.flexslider’).flexslider();
});
</script>
<?php
}

}
}

add_action(‘init’, ‘anaximander_flexslider’);

***
Add demo content in index.php
***

<!– Flexslider demo content –>

<div class=”flexslider”>
<ul class=”slides”>
<li>
<img src=”http://farm7.staticflickr.com/6213/6256961398_a484813abe_b.jpg” />
<p class=”flex-caption”>Caption goes here</p>
</li>
<li>
<img src=”http://farm7.staticflickr.com/6025/6012928351_d643e5a404_b.jpg” />
<p class=”flex-caption”>Caption goes here</p>
</li>
<li>
<img src=”http://farm7.staticflickr.com/6126/6007110789_bd7faaaa79_b.jpg” />
<p class=”flex-caption”>Caption goes here</p>
</li>
<li>
<img src=”http://farm6.staticflickr.com/5159/5874760659_de4c00d585_b.jpg” />
<p class=”flex-caption”>Caption goes here</p>
</li>
</ul>
</div>

<!– END Flexslider demo content –>

***
Add to style.css (optional)
***

/* FLEXSLIDER CUSTOM STYLES */

.flexslider {
border: 1px solid #ccc!important;
padding: 10px!important;
margin-bottom: 60px!important;
border-radius: 0!important;
-webkit-border-radius: 0!important;
-o-border-radius: 0!important;
-moz-border-radius: 0!important;
-webkit-box-shadow: none!important;
}

.flex-direction-nav li .next {
right: -16px!important;
}

.flex-direction-nav li .prev {
left: -17px!important;
}

/* END FLEXSLIDER CUSTOM STYLES */

 

***
Create file featureflexslider.php
***

<?php

// Custom loop for featured items in the slider on the front page.
// Slider will show up to 6 posts marked as “sticky”

?>

<div class=”flexslider”>
<ul class=”slides”>

<?php
// Get all sticky posts, but only sticky posts
$sticky = get_option( ‘sticky_posts’ );
$args = array(
‘numberposts’ => 6, // Display up to 6 posts. Change at will
‘post__in’  => $sticky
);
$postQuery = get_posts($args);

foreach( $postQuery as $post ) : setup_postdata($post);

if ( has_post_thumbnail() ) { ?>
<li>
<a href=”<?php echo get_permalink(); ?>” title=”Go to <?php echo the_title(); ?>” rel=”bookmark”>
<?php the_post_thumbnail(‘feature-slider’); ?>
<p class=”flex-caption”><?php the_title(); ?></p>
</a>
</li>
<?php
}
endforeach; ?>

</ul>
</div>

***
In index.php
***

<!– Flexslider featured content –>

<?php
// Check if this is the front page and that it is not page 2 or higher
if ( is_front_page() && !is_paged() ) {
// Add featured content slider
get_template_part( ‘featureflexslider’ );
}
?>

<!– END Flexslider featured –>

 

***
Get jQuery Masonry at http://masonry.desandro.com/
Add to functions.php
***

// MASONRY

function anaximander_masonry() {
if (!is_admin()) {
wp_register_script(‘jquery_masonry’, get_template_directory_uri(). ‘/js/jquery.masonry.min.js’, array(‘jquery’), ‘2.0.110526’ );
wp_enqueue_script(‘jquery_masonry’);
add_action(‘wp_footer’, ‘anaximander_add_masonry’);

function anaximander_add_masonry() { ?>
<script>
jQuery(document).ready(function($){
$(‘#masonry-index’).masonry({
itemSelector: ‘.index-post-container’,
});
});
</script>
<?php
}
}
}

add_action(‘init’, ‘anaximander_masonry’);

 

***
In index.php
***

Change
<section id=”regular-index” class=”group”>
to
<section id=”masonry-index” class=”group”>

Comment out/remove
<div id=”regular-content”>
and corresponding
</div> <!– #regular-content –>

Move
<div class=”paginationBox group”>
<?php kriesi_pagination($pages = ”, $range = 3); ?>
</div>

Comment out/remove
<?php get_sidebar(); ?>
***
In style.css
***

/*

Index – Masonry

*/

#masonry-index {
width: 105%;
}

#masonry-index .textwidget {
padding:0;
}

#masonry-index .index-post-container {
width: 298px;
border: 1px #e3e3e3 solid;
float: left;
margin: 0 20px 20px 0;
}

#masonry-index .index-title,
#masonry-index .index-name-date,
#masonry-index .index-content {
margin: 20px;
}
***
In style.css
***

@media only screen
and (max-width : 320px ) {

#pre-header {
padding: 0px 10px;
}

#header-search {
right: 10px;
}

#header_margin,
.page-header h1,
#related,
#footer-sidebar ul    {
padding: 10px;
}

.page-header h1 {
padding: 20px 10px;
}

#content {
margin: 20px 10px;
}

h1#recent {
margin-left: 10px;
}

#related {
padding: 20px 10px;
}

#footer-sidebar ul {
padding: 20px 10px;
}

} /* END max-width : 320px */