Skip to content

Instantly share code, notes, and snippets.

.container {
width: calc(100% + 20px) /* take the pixel value that you want to increase by*/
margin-left: -10px;
margin-rgiht: -10px;
}
// Magnific lightbox settings
$('.ign-popup').magnificPopup({
type: 'inline',
preloader: false,
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="Site Name">
<meta property="og:description" content="Site Descriptions">
<meta property="og:url" content="Site URL">
<meta property="og:site_name" content="Site Name">
<meta property="article:publisher" content="https://www.facebook.com/FB_Page_Slug">
<meta property="og:image" content="FB Share Photo URL">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="Site Description">
Headers
------------------
- splash
- banner
- hero
- feature
- leader
Containers
------------------
// Basic page with a sidebar
<article class="landing-blog-detail">
<header>
Headliner + post meta (date, author, category)
</header>
Your article copy
<aside>
Your sidebar
</aside>
</article>
// Page with multiple items called for as articles.
<article class="landing-blog">
<section class="blog-list">
<article>1st Blog Post</article>
<article>2nd Blog Post</article>
<article>3rd Blog Post</article>
</section>
</article>
// Page with multiple items called for as a list.
<body>
<header class="global-header">
<nav>
<ul>
<li><a href="#" title="">Nav Item</a></li>
<li><a href="#" title="">Nav Item</a></li>
<li><a href="#" title="">Nav Item</a></li>
</ul>
</nav>
</header>
/**
* Generate image markup through WP function.
*
* Requires ACF setting of ID.
* The crop can be custom, or one of WP default ones, or leave empty.
*
* This method does not work great with Media Query Sync. However, this method
* allows you to define custom settings, and the width, height, and alt tags will
* be auto generated for you. Which is great for semantics.
*
// Markup
<img src="<?php echo $src; ?>"
alt="<?php echo $alt; ?>"
width="<?php echo $width; ?>"
height="<?php echo $height; ?>" />