{"id":14955,"date":"2016-02-29T12:00:34","date_gmt":"2016-02-29T12:00:34","guid":{"rendered":"http:\/\/www.designbombs.com\/?p=14955"},"modified":"2016-12-27T03:08:43","modified_gmt":"2016-12-27T03:08:43","slug":"master-twenty-sixteen-wordpress-theme","status":"publish","type":"post","link":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/","title":{"rendered":"How To Master Twenty Sixteen (Or Any WordPress Theme)"},"content":{"rendered":"<p><strong><em>Update: We just published an comprehensive guide on <a href=\"https:\/\/www.designbombs.com\/master-twenty-seventeen-wordpress-theme\/\">How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)<\/a>.<\/em><\/strong><\/p>\n<p>In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.<\/p>\n<p>If you&#8217;re new to WordPress, working with a well documented theme like Twenty Sixteen or any of the other official WordPress themes, can really help your learning curve.<\/p>\n<p>In this tutorial, we will cover three different areas to learn to master, and we&#8217;ll separate them into three different difficulty categories.<\/p>\n<ul>\n<li>Learning to use the WP customizer and some of the options of the theme. &#8211; Beginner<\/li>\n<li>Changing a few design things with basic CSS using a custom CSS plugin. &#8211; Intermediate\/Savvy beginner<\/li>\n<li>Making a child theme and adding some useful functionality. &#8211; Savvy Intermediate<\/li>\n<\/ul>\n<h2>Beginner<\/h2>\n<p>Let&#8217;s start from the beginner level. We will make some changes to the look of the site, and make use of some of the cool functionality that comes with the twenty sixteen theme.<\/p>\n<h3>Setting Up A Social Menu<\/h3>\n<p>The Twenty Sixteen comes with a sleek social menu included, that automatically shows icons for each social network instead of text.<\/p>\n<p>To make use of this menu, head over to appearance &gt; menus, and create a new menu called &#8216;Social Menu&#8217; or whatever other name you might want it to have.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14987\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenu.png\" alt=\"creating a social menu in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenu.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenu-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Then fill it with custom links to your different social media pages. Make sure that you write the social network names out correctly, because if you don&#8217;t, the link will be shown as just a general icon, not the specific icon for that particular social network. If you write &#8216;Google plus&#8217; instead of &#8216;Google+&#8217;, that also happens.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14977\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenusettings.png\" alt=\"Social menu settings Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenusettings.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/socialmenusettings-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Once you&#8217;ve finished adding your custom links, and written in the text correctly, set the location of your menu to &#8216;Social Menu&#8217; and it will show up in the footer of the page.<\/p>\n<p>Make Twenty Sixteen Your Own With Customizer + A Few Lines Of Basic CSS<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14963\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/sociallinks.png\" alt=\"social links menu in footer Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/sociallinks.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/sociallinks-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3>Using The Customizer<\/h3>\n<p>Now that our social menu is up and running, it&#8217;s time to familiarize us with the customizer. The WordPress customizer is where you can change things in the design of different themes. Some themes allow you to customize everything, some themes just allow the bare minimum. Twenty Sixteen is not the most customizable theme ever, but you do have some nice options that you might want to explore. Head over to appearance -&gt; customize.<\/p>\n<p>If we want to set up a background image we can.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14967\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgimagecustomizer.png\" alt=\"setting up a background image in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"328\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgimagecustomizer.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgimagecustomizer-300x137.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>We can set our color scheme to dark, that looks like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14968 size-full\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/colorschemedark.png\" alt=\"changing the color scheme image in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"328\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/colorschemedark.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/colorschemedark-300x137.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Or you might want to set a header image instead, that would look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14964\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/withheaderimage.jpg\" alt=\"header image in image in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/withheaderimage.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/withheaderimage-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2>Intermediate\/Savvy Beginner: Changes With CSS<\/h2>\n<p>This is where we start to really gain a lot of control over how our website looks. Don&#8217;t worry. Even if you know nothing about CSS or HTML, I&#8217;ll show you how to use a Custom CSS plugin to make easy changes without having to mess with child themes or the source code of the theme.<\/p>\n<h3>How To Make Twenty Sixteen Opaque\/Transparent\u00a0On Top Of A Beautiful Background Image<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14975\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque.jpg\" alt=\"opaque background on image image in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>I&#8217;m sure you&#8217;ve seen websites that are made from transparent elements on top of a background image. With Twenty Sixteen, we can do most of the &#8216;hard work&#8217; easily from within the customizer, and we only need to add one single line of custom CSS to complete the design.<\/p>\n<p>Let&#8217;s start by adding a suitable background image for this. (A good place to find large, high resolution images perfect for this kind of thing, for free, is Unsplash.com. I used <a href=\"https:\/\/unsplash.com\/photos\/B6yDtYs2IgY\" target=\"_blank\">this image<\/a> for this tutorial.)<\/p>\n<p>Once you&#8217;ve decided on a picture and uploaded it, make sure you set the &#8216;Background Attachment&#8217; setting to fixed. This gives the image a fixed position, meaning that it doesn&#8217;t move when you scroll, the page content will scroll on top of the fixed image.<\/p>\n<p>Note that this will stretch the image to fit the screen, so you should\u00a0use a high resolution image for this.<\/p>\n<p>After you&#8217;ve done this, head over to the colors section of the customizer, and select the Scheme &#8216;dark&#8217;. Dark elements usually look better when made opaque on top of a background image, in my opinion. (Although it depends on the image you choose and your preference.) I&#8217;ve shown how to do this above in the beginner section on the customizer.<\/p>\n<p>Right now it still doesn&#8217;t look like much right? But that&#8217;s about to change with one single line of CSS. If you already have Jetpack, then go to appearance -&gt; CSS. If you don&#8217;t have Jetpack and don&#8217;t want to use it, you can install the <a href=\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\" target=\"_blank\">simple custom css plugin<\/a>.<\/p>\n<p>Head over to appearance &gt; CSS\/Custom CSS and then add this tiny css snippet to make the main part of your site opaque.<\/p>\n<p><code>.site {<br \/>\nopacity: 0.8;<br \/>\n}<\/code><\/p>\n<p>That makes the site look like this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14981 size-full\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/opaque.jpg\" alt=\"Opaque Twenty Sixteen\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/opaque.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/opaque-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Around 0.8 is enough, because it makes the text opaque too, and any more than that makes it hard to read. 0.2 looks like this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14978\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/veryopaque.jpg\" alt=\"too opaque Twenty Sixteen\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/veryopaque.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/veryopaque-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>If you want a more opaque container, but you want to maintain readability you can instead make only the background opaque by using this snippet.<\/p>\n<p><code>.site {<br \/>\nbackground-color: rgba(38, 38, 38, 0.3);<br \/>\n}<\/code><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14975\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque.jpg\" alt=\"opaque background on image image in the Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/backgroundopaque-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>This targets only the background color of the main site element, so you can go all the way down to 0.3 and 0.2 without making the text unreadable. If you choose a picture with very few colors in the content area, you can even set the opacity to 0, which makes the background 100% transparent.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14989\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgtransparent.jpg\" alt=\"transparent background Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgtransparent.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/bgtransparent-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>If you want to go for this kind of design, one thing to note is that, as you can see, the background image is what really carries the look. So, spending some time on finding the right one for your website\/topic is well worth it in the long run. If you want to go with completely transparent, finding an image with few colors (at least in the areas where text is placed) is important.<\/p>\n<h3>Moving The Sidebar To The Left<\/h3>\n<p>Because the sidebar and main content elements are positioned using CSS, we can easily move the sidebar to the right.<\/p>\n<p>A tool that comes in extremely handy if we want to change the CSS of a website, is the google chrome inspect functionality. If we inspect the sidebar and content elements we see that their classes are sidebar and content-area.<\/p>\n<p>This is what the content area should look like when inspected:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14991\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectcontentarea.jpg\" alt=\"inspecting content area of Twenty sixteen\" width=\"720\" height=\"352\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectcontentarea.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectcontentarea-300x147.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>This is what the sidebar should look like when inspected:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14990\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectsidebar.jpg\" alt=\"inspecting sidebar of Twenty Sixteen\" width=\"720\" height=\"352\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectsidebar.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/inspectsidebar-300x147.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>(If this confuses you, you should read more about using Chrome developer tools with WordPress <a href=\"https:\/\/premium.wpmudev.org\/blog\/chrome-developer-tools\/\" target=\"_blank\">here<\/a>.<\/p>\n<p>We also see that there are multiple styles applied in different media queries. (If you don&#8217;t know what a media query is, it&#8217;s basically a way to tell the browser to only apply certain styles depending on how big the screen\/browser window is.)<\/p>\n<p>In this case, we can see that the positioning styles are applied at the 56.875em minimum width breakpoint.<\/p>\n<p>The code that we need to change is this:<\/p>\n<p><code>@media screen and (min-width: 56.875em)<br \/>\n.sidebar {<br \/>\nfloat: left;<br \/>\nmargin-left: 75%;<br \/>\npadding: 0;<br \/>\nwidth: 25%;<br \/>\n}<br \/>\n.content-area {<br \/>\nfloat: left;<br \/>\nmargin-right: -100%;<br \/>\nwidth: 70%;<br \/>\n}<\/code><\/p>\n<p>We just need to switch the lefts with rights, and overrule existing margins, and we have moved the content to the right, and the sidebar to the left.<\/p>\n<p><code>@media screen and (min-width: 56.875em) {<br \/>\n.sidebar {<br \/>\nfloat: left;<br \/>\nmargin-right: 75%;<br \/>\nmargin-left: 0;<br \/>\n}<\/code><\/p>\n<p><code>.content-area {<br \/>\nfloat: right;<br \/>\nmargin-right: 0;<br \/>\nmargin-left: -100%;<\/code><\/p>\n<p>}<br \/>\n}<br \/>\nEnter this piece of code into the Custom CSS under appearance, save it, then update your site, and you should see the sidebar on the left, and content area on the right, like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14983 size-full\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebaropaque.jpg\" alt=\"opaque left sidebar Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebaropaque.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebaropaque-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>If you don&#8217;t overrule the existing margins, WordPress will still pull them from the original style file, and it will mess up the positioning of your content and sidebar.<\/p>\n<p>Also, if you don&#8217;t include the @media query, you will overrule location placement for other screen sizes, and will mess up what the page looks like on phones\/tablets.<\/p>\n<p>If you don&#8217;t add the media query, the page will look like this on small screens:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14992\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarunresponsive.jpg\" alt=\"left sidebar unresponsive Twenty sixteen\" width=\"685\" height=\"635\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarunresponsive.jpg 685w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarunresponsive-300x278.jpg 300w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/p>\n<p>Instead of like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-14993\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarresponsive.jpg\" alt=\"left sidebar responsive Twenty Sixteen\" width=\"685\" height=\"635\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarresponsive.jpg 685w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/leftsidebarresponsive-300x278.jpg 300w\" sizes=\"auto, (max-width: 685px) 100vw, 685px\" \/><\/p>\n<h3>Styling The Sidebar<\/h3>\n<p>If you want to style the sidebar, you have a few different areas to target. Again, the Chrome developer tool inspect is our best friend. If we inspect the different things in the sidebar area, we find a few different elements that we can target.<\/p>\n<p><code>.sidebar {<\/code><\/p>\n<p>}<\/p>\n<p>If we want, we can set a unique background color for the sidebar to make it stand out, although it doesn&#8217;t go that well with the default theme design.<\/p>\n<p><code>background-color: #ccc;<\/code><\/p>\n<p><code>.widget {<\/code><\/p>\n<p>}<\/p>\n<p>Here we can change margins\/padding or fonts for the widget.<\/p>\n<p><code>.widget-title {<\/code><\/p>\n<p>}<\/p>\n<p>In the widget title, one of the things we can do, is set a background color and change the alignment of the text to center.<\/p>\n<p><code>background-color: #ccc;<br \/>\nline-height: 2em;<br \/>\ntext-align: center;<\/code><\/p>\n<p>That will look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14970 alignnone\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlesidebar.png\" alt=\"styling widget titles Twenty Sixteen\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlesidebar.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlesidebar-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>We might want to remove the border above each title and let the title with the new background color be act as the separator. We can do this by adding:<\/p>\n<p><code>border-top: 0;<\/code><\/p>\n<p>To the .widget selector, to override the default style. Which will look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14969 alignnone\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlenoborder.png\" alt=\"styling widget titles with no top border for widgets in Twenty Sixteen\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlenoborder.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/widgettitlenoborder-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>I&#8217;ll be the first to admit that this doesn&#8217;t look much different\/better from the original in this instance, but depending on the color scheme you go with, it is\u00a0a nice option to be aware of.<\/p>\n<h2>Intermediate: Some Ideas For Things To Do With A Twenty Sixteen Child Theme<\/h2>\n<p>A child theme is something that we can use to not only create a design that&#8217;s completely our own, but we can add extra functionality that we might need for our particular website. Here I&#8217;ll cover quickly how to set up a child theme for twenty sixteen, and a few options you have for customizing.<\/p>\n<h3>How To Set Up And Use A Child Theme For Twenty Sixteen<\/h3>\n<p>Setting up a child theme is super easy, and a better way to make significant changes than to simply edit files through the editor.<\/p>\n<p>Create a folder called twentysixteen-child.<\/p>\n<p>Then you just need to create a style.css file with this code (or you can copy paste this from the Twentysixteen style.css file, and add this line: &#8220;Template: twentysixteen&#8221;):<\/p>\n<p><code>\/*<br \/>\nTheme Name: Twenty Sixteen Child Theme<br \/>\nTheme URI: https:\/\/yourwebsite.com<br \/>\nAuthor: Your Name<br \/>\nAuthor URI: https:\/\/yourwebsite.com<br \/>\nTemplate: twentysixteen<br \/>\nDescription: Child theme for Twenty Sixteen. Twenty Sixteen is a modernized take on an ever-popular WordPress layout \u2014 the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.<br \/>\nVersion: 0.1<br \/>\nLicense: GNU General Public License v2 or later<br \/>\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html<br \/>\nTags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready<br \/>\nText Domain: twentysixteen-child<\/code><\/p>\n<p>This theme, like WordPress, is licensed under the GPL.<br \/>\nUse it to make something cool, have fun, and share what you&#8217;ve learned with others.<br \/>\n*\/<\/p>\n<p>And a functions.php file with this code.<\/p>\n<p><code>&lt;?php<br \/>\nadd_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );<br \/>\nfunction theme_enqueue_styles() {<br \/>\nwp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );<br \/>\n}<\/code><\/p>\n<p>After adding these two files to a folder, you can zip the file, upload it and unzip the folder to wp-content\/themes\/ with ftp. (I wholeheartedly recommend <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/setting-up-a-development-environment\/\" target=\"_blank\">setting up a local development environment though<\/a>.) After you do this (or if you&#8217;ve put it inside the theme folder of your local WordPress\u00a0install), head over to appearance -&gt; themes, and you should see the Twenty Sixteen Child Theme\u00a0pop up as an option:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14966\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childtheme.png\" alt=\"twenty sixteen child theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childtheme.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childtheme-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>When using a child theme, it&#8217;s always a good idea to keep the styles in the child theme, as you have full control over it anyway, rather than keeping it in a custom css plugin. So take the styles from the appearance -&gt; custom css section and copy them into the style.css file in your child theme. Then delete the custom css styles from the plugin.<\/p>\n<p>A thing to note is that if you want to transfer over your styles, the customizer will override the changes you make to the background colors or fonts in the theme if you set your color scheme to anything other than default. For example, we set it to dark before when we were using the Custom CSS plugin for our styles right. If you did that, if you take a look at your site now it should just look like the color scheme dark, without transparency at all.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14985\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentbroken.jpg\" alt=\"broken transparency child theme Twenty Sixteen\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentbroken.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentbroken-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>This means that if we want the opaque background, we need to head over to the customizer again, and set the color scheme to default. This lets us set our rgba colors for our site, but it makes our site look like this because all the font colors are back to default.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14974\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentproblems.jpg\" alt=\"Twenty Sixteen Child Theme transparency problems\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentproblems.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentproblems-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>So now we need to get to work using the chrome inspect tool, and writing some simple css. For example if we want the opaque or transparent background and white text, we need to change the font colors to white or lighter colors manually in our child theme&#8217;s style.css file. Once you&#8217;re finished (depending on your color choices), your site might look like this.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14973\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentfixed.jpg\" alt=\"childthemetransparentfixed\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentfixed.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/childthemetransparentfixed-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>To achieve this look, I styled these elements:<br \/>\n<code>body, button, input, select, textarea {<br \/>\ncolor: #fff;<br \/>\n}<\/code><\/p>\n<p><code>a {<br \/>\ncolor: #b3ffff;<br \/>\n}<br \/>\n<\/code><br \/>\n<code>.site-branding .site-title a {<br \/>\ncolor: #66b2ff;<br \/>\n}<\/code><\/p>\n<p><code>.site-description {<br \/>\ncolor: #ccc;<br \/>\n}<\/code><\/p>\n<p><code>.entry-footer a {<br \/>\ncolor: #ccc;<br \/>\n}<\/code><\/p>\n<p><code>.entry-title a{<br \/>\ncolor: #66b2ff;<\/code><br \/>\n}<\/p>\n<p><code>.main-navigation .primary-menu &gt; li a{<br \/>\ncolor: #b3ffff;<br \/>\n}<\/code><\/p>\n<p><code>.widget {<br \/>\nborder-color: #fff;<br \/>\n}<\/code><\/p>\n<h3>Using The Header Image To Send Visitors To A Landing Page<\/h3>\n<p>Back inside the customizer, we can set a header image for our site.\u00a0Because the header image links to the home url by default, we can easily set up the header image to, for example, lead to <a href=\"http:\/\/www.designbombs.com\/top-landing-page-plugins-wordpress\/\" target=\"_blank\">a landing page<\/a> instead.<\/p>\n<p>You might for example set your header image to a banner with a special offer, like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14988 alignnone\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/specialofferheading.jpg\" alt=\"header image with special offer Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/specialofferheading.jpg 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/specialofferheading-300x148.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Then we can copy the header.php file into our child theme folder.<\/p>\n<p>Then we open it up, and all we need to do is to add &#8216;landing'(or whatever slug your landing page has) to this line of code after the \/, inside the single quote.<\/p>\n<p><code>&lt;a href=\"&lt;?php echo esc_url( home_url( '\/landing' ) ); ?&gt;\" rel=\"home\"&gt;<\/code><\/p>\n<p>If you want to link to an external url, then you can change the line of code\u00a0to:<\/p>\n<p><code>&lt;a href=\"http:\/\/othersite.com\/landingpage\"&gt;<\/code><\/p>\n<p>However, if you want to use a landing page on your own site, there is one issue. If we click through to the landing page, the ad\/special offer header is still there.<\/p>\n<p>You might not want this, so we will wrap the whole header section with an if !is_page(&#8216;landing&#8217;) : statement. (The ! means not. So basically you are telling WordPress, if it&#8217;s not the landing page, display the header image.) The whole block should look like this:<\/p>\n<p><code>&lt;?php if ( !is_page('landing') ) : ?&gt;<br \/>\n&lt;?php if ( get_header_image() ) : ?&gt;<br \/>\n&lt;?php<br \/>\n\/**<br \/>\n* Filter the default twentysixteen custom header sizes attribute.<br \/>\n*<br \/>\n* @since Twenty Sixteen 1.0<br \/>\n*<br \/>\n* @param string $custom_header_sizes sizes attribute<br \/>\n* for Custom Header. Default '(max-width: 709px) 85vw,<br \/>\n* (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.<br \/>\n*\/<br \/>\n$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );<br \/>\n?&gt;<br \/>\n&lt;div class=\"header-image\"&gt;<br \/>\n&lt;a href=\"&lt;?php echo esc_url( home_url( '\/landing' ) ); ?&gt;\" rel=\"home\"&gt;<br \/>\n&lt;img src=\"&lt;?php header_image(); ?&gt;\" srcset=\"&lt;?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()-&gt;attachment_id ) ); ?&gt;\" sizes=\"&lt;?php echo esc_attr( $custom_header_sizes ); ?&gt;\" width=\"&lt;?php echo esc_attr( get_custom_header()-&gt;width ); ?&gt;\" height=\"&lt;?php echo esc_attr( get_custom_header()-&gt;height ); ?&gt;\" alt=\"&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;\"&gt;<br \/>\n&lt;\/a&gt;<br \/>\n&lt;\/div&gt;&lt;!-- .header-image --&gt;<br \/>\n&lt;?php endif; \/\/ End header image check. ?&gt;<br \/>\n&lt;?php endif; \/\/ End page exclusion ?&gt;<br \/>\n<\/code><br \/>\nAfter you&#8217;ve done this, if you click through to your landing page, you should\u00a0no longer see the header image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-14979 alignnone\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/landingpagenoheader.png\" alt=\"landing page with no header in Twenty Sixteen WordPress Theme\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/landingpagenoheader.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/landingpagenoheader-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3>Making A Full Width Landing Page Template<\/h3>\n<p>First we&#8217;re going to copy over the page.php file into our child theme, and rename it page-landing.php.<\/p>\n<p>The first thing we&#8217;re going to do, is replace the comment that says &#8220;This is the template for all pages&#8221; with a line that says &#8220;Template Name: Landing&#8221; then we remove the<code> &lt;?php get_sidebar(); ?&gt;<\/code> function.<\/p>\n<p>Now if you go to your landing page you should see that there is no sidebar showing, but your content is still only filling up 70% of the space. (If your slug is something other than yoursite.com\/landing you might need to set the page template to landing.)<\/p>\n<p>There are two ways to set the width to full, either we can inspect the landing page and find the page id in the body class (or see the id in the url when we edit the page), and use that to qualify our content-area element, or we can make our own special class for the element.<\/p>\n<p>You can see that in my case, the page id is 82. So to change the width of the content area only on my landing page, I can write this:<\/p>\n<p><code>.page-id-82 .content-area {<br \/>\nwidth: 100%;<br \/>\n}<\/code><\/p>\n<p>Or you can set an extra class for the content-area element in the page-landing.php file like this:<\/p>\n<p><code>&lt;div id=\"primary\" class=\"landing-content content-area\"&gt;<\/code><\/p>\n<p>And target it like this:<\/p>\n<p><code>.landing-content {<br \/>\nwidth: 100%;<br \/>\n}<\/code><\/p>\n<p>Either of these approaches should lead to\u00a0a full-width content container, making it a truly full-width page.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14976\" src=\"http:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/fullwidthlandingpage.png\" alt=\"fullwidthlandingpage\" width=\"720\" height=\"355\" srcset=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/fullwidthlandingpage.png 720w, https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/fullwidthlandingpage-300x148.png 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<h3>Further Learning:<\/h3>\n<p>There are a lot of things you can do with child themes, way too much to cover in just one post. So below I&#8217;ve listed some good resources that will help you get going in the right direction.<\/p>\n<ul>\n<li><a href=\"http:\/\/www.wpkube.com\/introduction-custom-post-types-wordpress\/\" target=\"_blank\">Introduction to Custom Post Types<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Post_Type_Templates\" target=\"_blank\">Custom Post Type Templates<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/\" target=\"_blank\">WordPress Codex<\/a><\/li>\n<li><a href=\"https:\/\/code.tutsplus.com\/categories\/theme-development\" target=\"_blank\">Tuts+ Tutorials on WordPress Theme Development<\/a><\/li>\n<li><a href=\"http:\/\/www.designbombs.com\/team-treehouse-vs-code-academy-vs-tuts-aspiring-wordpress-developers\/\" target=\"_blank\">Treehouse\/Tuts+ Video Courses<\/a><\/li>\n<\/ul>\n<h2>Conclusion<\/h2>\n<p>Even if you knew nothing about code or editing themes before reading this tutorial, I hope you&#8217;ve gotten more familiar with the Twenty Sixteen Theme, and hopefully have learned some skills that you can use to work with\u00a0other themes in the future.<\/p>\n<p>Is there anything related to theme development you&#8217;d like to learn more about? Let us know in the comments!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: We just published an comprehensive guide on How To Master Twenty Seventeen (Or Any WordPress Theme in 2017). In&#8230;<\/p>\n","protected":false},"author":15,"featured_media":15068,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[70],"tags":[],"class_list":{"0":"post-14955","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress-themes","8":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.1 (Yoast SEO v26.4) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Master Twenty Sixteen (Or Any WordPress Theme)<\/title>\n<meta name=\"description\" content=\"In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Master Twenty Sixteen (Or Any WordPress Theme)\" \/>\n<meta property=\"og:description\" content=\"Update: We just published an comprehensive guide on How To Master Twenty Seventeen (Or Any WordPress Theme in 2017). In this post we look at how to bend\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Design Bombs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/designbombs\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-29T12:00:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-27T03:08:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"425\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ragnar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Ragnar_TM\" \/>\n<meta name=\"twitter:site\" content=\"@designbombs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ragnar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\"},\"author\":{\"name\":\"Ragnar\",\"@id\":\"https:\/\/www.designbombs.com\/#\/schema\/person\/ffac12a7ae9d0dbdd6e65e312a476032\"},\"headline\":\"How To Master Twenty Sixteen (Or Any WordPress Theme)\",\"datePublished\":\"2016-02-29T12:00:34+00:00\",\"dateModified\":\"2016-12-27T03:08:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\"},\"wordCount\":2669,\"commentCount\":109,\"publisher\":{\"@id\":\"https:\/\/www.designbombs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg\",\"articleSection\":[\"WordPress Themes\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\",\"url\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\",\"name\":\"How To Master Twenty Sixteen (Or Any WordPress Theme)\",\"isPartOf\":{\"@id\":\"https:\/\/www.designbombs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg\",\"datePublished\":\"2016-02-29T12:00:34+00:00\",\"dateModified\":\"2016-12-27T03:08:43+00:00\",\"description\":\"In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage\",\"url\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg\",\"contentUrl\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg\",\"width\":1024,\"height\":425},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.designbombs.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Themes\",\"item\":\"https:\/\/www.designbombs.com\/category\/wordpress-themes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How To Master Twenty Sixteen (Or Any WordPress Theme)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.designbombs.com\/#website\",\"url\":\"https:\/\/www.designbombs.com\/\",\"name\":\"Design Bombs\",\"description\":\"Droppin&#039; design bombs everyday!\",\"publisher\":{\"@id\":\"https:\/\/www.designbombs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.designbombs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.designbombs.com\/#organization\",\"name\":\"DesignBombs\",\"url\":\"https:\/\/www.designbombs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.designbombs.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2019\/04\/db-logo.png\",\"contentUrl\":\"https:\/\/www.designbombs.com\/wp-content\/uploads\/2019\/04\/db-logo.png\",\"width\":219,\"height\":92,\"caption\":\"DesignBombs\"},\"image\":{\"@id\":\"https:\/\/www.designbombs.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/designbombs\/\",\"https:\/\/x.com\/designbombs\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.designbombs.com\/#\/schema\/person\/ffac12a7ae9d0dbdd6e65e312a476032\",\"name\":\"Ragnar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.designbombs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7255a303e809365a19e2d06aada8d4933c94e9d13e26935b2742ff9940c415a2?s=96&d=https%3A%2F%2Fwww.designbombs.com%2Fwp-content%2Fthemes%2FDesignBombs%2Fimages%2Fgravatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7255a303e809365a19e2d06aada8d4933c94e9d13e26935b2742ff9940c415a2?s=96&d=https%3A%2F%2Fwww.designbombs.com%2Fwp-content%2Fthemes%2FDesignBombs%2Fimages%2Fgravatar.jpg&r=g\",\"caption\":\"Ragnar\"},\"description\":\"Ragnar is a WordPress enthusiast, aspiring developer, and freelance writer. When he's not staring at his laptop, you could find him teaching English to rowdy kids, or practicing his not-great martial arts skills.\",\"sameAs\":[\"http:\/\/ragnarmiljeteig.com\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/Ragnar_TM\"],\"url\":\"https:\/\/www.designbombs.com\/author\/ragnar\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Master Twenty Sixteen (Or Any WordPress Theme)","description":"In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/","og_locale":"en_US","og_type":"article","og_title":"How To Master Twenty Sixteen (Or Any WordPress Theme)","og_description":"Update: We just published an comprehensive guide on How To Master Twenty Seventeen (Or Any WordPress Theme in 2017). In this post we look at how to bend","og_url":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/","og_site_name":"Design Bombs","article_publisher":"https:\/\/www.facebook.com\/designbombs\/","article_published_time":"2016-02-29T12:00:34+00:00","article_modified_time":"2016-12-27T03:08:43+00:00","og_image":[{"width":1024,"height":425,"url":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","type":"image\/jpeg"}],"author":"Ragnar","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Ragnar_TM","twitter_site":"@designbombs","twitter_misc":{"Written by":"Ragnar","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#article","isPartOf":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/"},"author":{"name":"Ragnar","@id":"https:\/\/www.designbombs.com\/#\/schema\/person\/ffac12a7ae9d0dbdd6e65e312a476032"},"headline":"How To Master Twenty Sixteen (Or Any WordPress Theme)","datePublished":"2016-02-29T12:00:34+00:00","dateModified":"2016-12-27T03:08:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/"},"wordCount":2669,"commentCount":109,"publisher":{"@id":"https:\/\/www.designbombs.com\/#organization"},"image":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","articleSection":["WordPress Themes"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/","url":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/","name":"How To Master Twenty Sixteen (Or Any WordPress Theme)","isPartOf":{"@id":"https:\/\/www.designbombs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage"},"image":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage"},"thumbnailUrl":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","datePublished":"2016-02-29T12:00:34+00:00","dateModified":"2016-12-27T03:08:43+00:00","description":"In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.","breadcrumb":{"@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#primaryimage","url":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","contentUrl":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","width":1024,"height":425},{"@type":"BreadcrumbList","@id":"https:\/\/www.designbombs.com\/master-twenty-sixteen-wordpress-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.designbombs.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Themes","item":"https:\/\/www.designbombs.com\/category\/wordpress-themes\/"},{"@type":"ListItem","position":3,"name":"How To Master Twenty Sixteen (Or Any WordPress Theme)"}]},{"@type":"WebSite","@id":"https:\/\/www.designbombs.com\/#website","url":"https:\/\/www.designbombs.com\/","name":"Design Bombs","description":"Droppin&#039; design bombs everyday!","publisher":{"@id":"https:\/\/www.designbombs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.designbombs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.designbombs.com\/#organization","name":"DesignBombs","url":"https:\/\/www.designbombs.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designbombs.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2019\/04\/db-logo.png","contentUrl":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2019\/04\/db-logo.png","width":219,"height":92,"caption":"DesignBombs"},"image":{"@id":"https:\/\/www.designbombs.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/designbombs\/","https:\/\/x.com\/designbombs"]},{"@type":"Person","@id":"https:\/\/www.designbombs.com\/#\/schema\/person\/ffac12a7ae9d0dbdd6e65e312a476032","name":"Ragnar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.designbombs.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7255a303e809365a19e2d06aada8d4933c94e9d13e26935b2742ff9940c415a2?s=96&d=https%3A%2F%2Fwww.designbombs.com%2Fwp-content%2Fthemes%2FDesignBombs%2Fimages%2Fgravatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7255a303e809365a19e2d06aada8d4933c94e9d13e26935b2742ff9940c415a2?s=96&d=https%3A%2F%2Fwww.designbombs.com%2Fwp-content%2Fthemes%2FDesignBombs%2Fimages%2Fgravatar.jpg&r=g","caption":"Ragnar"},"description":"Ragnar is a WordPress enthusiast, aspiring developer, and freelance writer. When he's not staring at his laptop, you could find him teaching English to rowdy kids, or practicing his not-great martial arts skills.","sameAs":["http:\/\/ragnarmiljeteig.com\/","https:\/\/x.com\/https:\/\/twitter.com\/Ragnar_TM"],"url":"https:\/\/www.designbombs.com\/author\/ragnar\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.designbombs.com\/wp-content\/uploads\/2016\/02\/master-wordpress-theme.jpg","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/posts\/14955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/comments?post=14955"}],"version-history":[{"count":12,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/posts\/14955\/revisions"}],"predecessor-version":[{"id":20931,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/posts\/14955\/revisions\/20931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/media\/15068"}],"wp:attachment":[{"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/media?parent=14955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/categories?post=14955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.designbombs.com\/wp-json\/wp\/v2\/tags?post=14955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}