Categories
Tutorial WordPressaside

Attachment Image Snippet

This snippet for wp_get_attachment_image_src frequently appears in my theme development to select an image by its unique ID in the WordPress media library.

Handy for instances where logos, banners, or any other image frequently recurs on a website and you’d rather store that image in the media library where it can be replaced or modified dynamically.

// replace 7 with unique ID number of image
$image_attributes = wp_get_attachment_image_src( $attachment_id = 7, 'full' );

// retrieves alternative text from image information 
$alt = get_post_meta( $attachment_id , '_wp_attachment_image_alt', true );

if ( $image_attributes ) {
	echo '<img src="'. $image_attributes[0] .'" width="' . $image_attributes[1] . '" height="' . $image_attributes[2] . '" alt="' . $alt . '" />';
}

How it works

  • Set the unique id number in the snippet
  • Displays the image and relevant attributes

This code is based on the official Code References at WordPress.org for wp_get_attachment_image_src() and as get_post_meta().

Categories
WordPress

Sort Archive Posts Alphabetically

I recently worked on a documentation project that required posts to be sorted alphabetically by title. The process can be done by using pre_get_posts() and the is_archive() conditional tag.

/*
 * Order post archives by title in descending order
 */
add_action( 'pre_get_posts', 'jd_archive_sort_alpha_title'); 

function jd_archive_sort_alpha_title($query){

	if(is_archive()) {

		// Set the order to ascending order
		$query->set( 'order', 'ASC' );

		// set the orderby to title
		$query->set( 'orderby', 'title' );

	}

};

As always if you want to use this plugin on your website test it first in a safe environment to verify that it doesn’t create a conflict. Happy hacking. 🙂

Alphabetical Post OrderDownload Plugin
Categories
WordPress

Private Notes

The Post Editor of a Note
The Post Editor of a Note

The Private Notes WordPress plugin is in active development, I’m providing it here for the public to hack, tweak and learn from… Use at your own risk.

Private Notes allows users create and store notes on their personal website.

How Private Notes works

The Plugin creates a Notes section within the dashboard where you can create and maintain your notes.

A Custom Post Type is created to hold your content.

These notes are visible when logged into your website while the content remains hidden from a public guest who could be viewing the page.

What users can see when they’re logged in.
An example of what the public would see if they visit the post

Important

The post’s title, author, date and other data will remain visible to the public. Additionally any media files such as images, videos, audio, and documents will remain visible from their attachment pages. Private Notes does not secure any files attached to the post! It only hides the post’s content area.

Creating a Private Note

After activating the private Private Notes plugin a notebook icon will appear in your admin menu under Posts. Simply Add New, type out some notes, add media, links, embeds or whatever you like. Then hit publish.

The Post Editor of a Note
The Post Editor of a Note

Although self hosting notes in WordPress isn’t as convenient as a dedicated note taking app it does allows personal control and ownership of my thoughts.

jd-private-notesDownload Plugin
Categories
WordPress

2017 Campsite Theme CSS

While working on the website for WordCamp Riverside 2019 I came the theme originally used for WordCamp Europe 2017. However, the original uses SASS so I decided to convert it to standard CSS allowing me to edit the stylesheet directly.

The CSS

Campsite Theme Base StylesheetDownload
/**
 * Key
 *
 * Modified by: Joseph Dickson
 * Adapted from: https://github.com/2ndkauboy/campsite-2017
 * Created by: 2ndkauboy
 * Theme: campsite-2017
 * 
 *
 *
 * # Normalize
 *
 * # Base Theme 
 * 	## Comments
 * 	## Organizers
 * 	## Tickets / CampTix 
 *	## Schedule
 *	## Sessions
 *	## Sponsors
 *	## Widgets
 *	## Navigation
 *
 * # Customizations
 *
 */

/**
 * # Normalize
 * normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css 
 */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

progress {
    vertical-align: baseline
}

[hidden],
template {
    display: none
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

a:active,
a:hover {
    outline-width: 0
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit;
    font-weight: bolder
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button,
input,
select,
textarea {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: 700
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

* {
    box-sizing: border-box
}

body {
    font-size: 1em;
    line-height: 1.5625em;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    color: rgba(29, 36, 42, .75);
    background: #fff;
    -ms-font-feature-settings: "liga";
    font-feature-settings: "liga"
}

@media (min-width:37.5em) {
    body {
        font-size: 1.125em
    }
}

@media (min-width:48em) {
    body {
        font-size: 1.25em
    }
}

::-moz-selection {
    color: #fff;
    background-color: #e6aa50
}

::selection {
    color: #fff;
    background-color: #e6aa50
}

h1,
h2,
h3,
h4 {
    margin-bottom: 1.5rem;
    margin-top: 0;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase
}

h1 {
    font-size: 2.44141em;
    color: #c96
}

h2 {
    font-size: 1.95312em
}

h2,
h3 {
    color: rgba(29, 36, 42, .9)
}

h3 {
    font-size: 1.5625em
}

h4 {
    font-size: 1.25em;
    color: rgba(29, 36, 42, .9);
    letter-spacing: .025em
}

hr {
    margin: 1.5rem 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #e8e9ea
}

fieldset {
    border: none;
    margin: 0;
    padding: 0
}

input:not([type]),
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
textarea {
    display: block;
    width: 100%;
    padding: .4375rem 1rem;
    margin: 0;
    border: 1px solid #d5d4d5;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75);
    background-color: #fff;
    box-shadow: inset 0 .125rem 0 0 #fefbf6;
    border-radius: .1875rem;
    transition: all .1s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none
}

input:not([type]):focus,
input:not([type]):hover,
input[type=color]:focus,
input[type=color]:hover,
input[type=date]:focus,
input[type=date]:hover,
input[type=datetime-local]:focus,
input[type=datetime-local]:hover,
input[type=datetime]:focus,
input[type=datetime]:hover,
input[type=email]:focus,
input[type=email]:hover,
input[type=month]:focus,
input[type=month]:hover,
input[type=number]:focus,
input[type=number]:hover,
input[type=password]:focus,
input[type=password]:hover,
input[type=search]:focus,
input[type=search]:hover,
input[type=tel]:focus,
input[type=tel]:hover,
input[type=text]:focus,
input[type=text]:hover,
input[type=time]:focus,
input[type=time]:hover,
input[type=url]:focus,
input[type=url]:hover,
input[type=week]:focus,
input[type=week]:hover,
textarea:focus,
textarea:hover {
    outline: none;
    color: rgba(29, 36, 42, .9);
    border-color: #aba9ab
}

textarea {
    resize: vertical;
    min-height: 6.25rem;
    display: block
}

@media (min-width:48em) {
    textarea {
        min-height: 9.375rem
    }
}

select {
    display: block;
    height: 2.5rem;
    width: 100%;
    padding: .4375rem 1rem;
    border: 1px solid d5d4d5;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75);
    font-weight: 700;
    background-color: #fff;
    border-radius: .1875rem;
    cursor: pointer
}

a {
    color: #c96;
    text-decoration: none;
    transition: all .15s ease
}

a:focus,
a:hover {
    color: #e6aa50;
    text-decoration: underline
}

a:active {
    color: #e6aa50;
    text-decoration: none
}

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .75)
}

@media (min-width:37.5em) {
    p {
        line-height: 1.5625em
    }
}

@media (min-width:48em) {
    p {
        line-height: 1.5625em
    }
}

strong {
    font-weight: 700;
    color: rgba(0, 0, 0, .75)
}

em {
    font-stretch: italic
}

sup sub {
    font-size: 75%;
    line-height: 0;
    position: relative
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

dl,
ol,
ul {
    margin-bottom: 1.5rem
}

dl dl,
dl ol,
dl ul,
li,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    margin-bottom: 0
}

li {
    margin-top: .25rem
}

li:first-child {
    margin-top: 0
}

blockquote {
    margin: 0;
    margin-bottom: 1.5rem;
    padding: 2em;
    background-color: #e8e9ea
}

blockquote p {
    font-style: italic
}

blockquote p:last-child {
    margin-bottom: 0
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin-bottom: 1.5rem
}

caption {
    margin-bottom: .5rem
}

td,
th {
    padding: .5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5
}

@media (min-width:48em) {
    td,
    th {
        padding: 1rem
    }
}

figure,
img {
    display: block;
    margin: 0;
    margin-bottom: 1.5rem;
    max-width: 100%;
    height: auto
}

figcaption {
    margin-top: .5rem;
    margin-bottom: 0;
    color: rgba(29, 36, 42, .6)
}

code,
pre {
    border: 1px solid #f5ddb9;
    border-top-color: #e9b362;
    border-radius: .1875rem;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(29, 36, 42, .75);
    font-family: Bitstream Vera Sans Mono, Consolas, Courier, monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 2;
    tab-size: 2
}

pre {
    margin: 1.5rem 0;
    padding: 1.5rem;
    overflow: scroll
}

code {
    padding: .125rem .1875rem;
    background-color: #f5ebe0
}

pre code {
    border-radius: 0;
    border: 0;
    padding: 0;
    background: 0
}

/**
 * # Base Theme
 */

.site {
    overflow: hidden;
    position: relative
}

.nav {
    list-style: none;
    margin: 0;
    padding: 0
}

.nav__item {
    display: inline-block
}

.nav__link {
    display: block
}

.button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
    position: relative;
    display: inline-block;
    padding: .4375rem 1rem;
    border: 1px solid #c96;
    font-size: 1em;
    line-height: 1.5625em;
    text-align: center;
    color: rgba(29, 36, 42, .75);
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;
    background-color: #c96;
    border-radius: .1875rem;
    border-color: transparent;
    cursor: pointer;
    transition: all .1s ease
}

.button:active,
.button:focus,
.button:hover,
button:active,
button:focus,
button:hover,
input[type=button]:active,
input[type=button]:focus,
input[type=button]:hover,
input[type=reset]:active,
input[type=reset]:focus,
input[type=reset]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=submit]:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50;
    text-decoration: none
}

@media (min-width:48em) {
    .button,
    button,
    input[type=button],
    input[type=reset],
    input[type=submit] {
        font-size: 1em;
        line-height: 1.5625em
    }
}

.button.button--primary,
button.button--primary,
input[type=button].button--primary,
input[type=reset].button--primary,
input[type=submit].button--primary {
    color: rgba(29, 36, 42, .75);
    background-color: #c96
}

.button.button--primary:active,
.button.button--primary:focus,
.button.button--primary:hover,
button.button--primary:active,
button.button--primary:focus,
button.button--primary:hover,
input[type=button].button--primary:active,
input[type=button].button--primary:focus,
input[type=button].button--primary:hover,
input[type=reset].button--primary:active,
input[type=reset].button--primary:focus,
input[type=reset].button--primary:hover,
input[type=submit].button--primary:active,
input[type=submit].button--primary:focus,
input[type=submit].button--primary:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.button.button--secondary,
button.button--secondary,
input[type=button].button--secondary,
input[type=reset].button--secondary,
input[type=submit].button--secondary {
    color: hsla(0, 0%, 100%, .75);
    background-color: #575357
}

.button.button--secondary:active,
.button.button--secondary:focus,
.button.button--secondary:hover,
button.button--secondary:active,
button.button--secondary:focus,
button.button--secondary:hover,
input[type=button].button--secondary:active,
input[type=button].button--secondary:focus,
input[type=button].button--secondary:hover,
input[type=reset].button--secondary:active,
input[type=reset].button--secondary:focus,
input[type=reset].button--secondary:hover,
input[type=submit].button--secondary:active,
input[type=submit].button--secondary:focus,
input[type=submit].button--secondary:hover {
    color: hsla(0, 0%, 100%, .9);
    background-color: #4a474a
}

.button.button--invert,
button.button--invert,
input[type=button].button--invert,
input[type=reset].button--invert,
input[type=submit].button--invert {
    color: rgba(29, 36, 42, .75);
    background-color: #fff
}

.button.button--invert:active,
.button.button--invert:focus,
.button.button--invert:hover,
button.button--invert:active,
button.button--invert:focus,
button.button--invert:hover,
input[type=button].button--invert:active,
input[type=button].button--invert:focus,
input[type=button].button--invert:hover,
input[type=reset].button--invert:active,
input[type=reset].button--invert:focus,
input[type=reset].button--invert:hover,
input[type=submit].button--invert:active,
input[type=submit].button--invert:focus,
input[type=submit].button--invert:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6e6e6
}

.button.button--inactive,
.button.button--inactive:active,
.button.button--inactive:focus,
.button.button--inactive:hover,
button.button--inactive,
button.button--inactive:active,
button.button--inactive:focus,
button.button--inactive:hover,
input[type=button].button--inactive,
input[type=button].button--inactive:active,
input[type=button].button--inactive:focus,
input[type=button].button--inactive:hover,
input[type=reset].button--inactive,
input[type=reset].button--inactive:active,
input[type=reset].button--inactive:focus,
input[type=reset].button--inactive:hover,
input[type=submit].button--inactive,
input[type=submit].button--inactive:active,
input[type=submit].button--inactive:focus,
input[type=submit].button--inactive:hover {
    color: rgba(0, 0, 0, .3);
    background-color: #eee
}

.site-header {
    background-color: #2d282d
}

.site-header .site-branding {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1rem;
    text-align: center
}

@media (min-width:37.5em) {
    .site-header .site-branding {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    .site-header .site-branding {
        padding: 4.5rem 3rem
    }
}

.home .site-header .site-branding {
    padding: 3.5rem 1rem
}

@media (min-width:37.5em) {
    .home .site-header .site-branding {
        padding: 7rem 2rem
    }
}

@media (min-width:48em) {
    .home .site-header .site-branding {
        padding: 10.5rem 3rem
    }
}

.site-title {
    margin: 0;
    font-size: 1.5625em;
    line-height: 1;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, .9)
}

.site-title a {
    display: block;
    color: #e6aa50
}

.site-title a:active,
.site-title a:focus,
.site-title a:hover {
    color: #c96;
    text-decoration: none
}

.site-title a:before {
    display: block;
    width: 180px;
    height: 180px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    content: ""
}

.site-description {
    margin: 0;
    margin-top: .5rem;
    font-size: 1em;
    line-height: 1.25em;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-weight: 400;
    text-transform: none;
    color: hsla(0, 0%, 100%, .6)
}

.site-header {
    position: relative;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: fixed;
    transition: all .15s ease
}

@media (min-width:48em) {
    .site-header {
        background-position: 50% 50%;
        background-size: cover
    }
}

.site-header:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(45, 40, 45, .6);
    content: ""
}

.site-header>* {
    position: relative;
    z-index: 200
}

.home .site-header .site-branding:after,
.home .site-header .site-branding:before {
    position: absolute;
    z-index: -1;
    left: 60%;
    display: block;
    width: 0;
    height: 0;
    content: "";
    opacity: .1;
    transform-origin: 100% 100%;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px
}

.home .site-header .site-branding:before {
    transform: skewX(50deg);
    animation: a 5s infinite 5s
}

.home .site-header .site-branding:after {
    transform: skewX(-50deg);
    animation: b 5s infinite 5s
}

.menu-toggle {
    padding: 1rem;
    margin: 0;
    margin-top: .125rem;
    width: 100%;
    font-size: 0;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .05em;
    border-radius: 0;
    cursor: pointer
}

.menu-toggle,
.menu-toggle.focus,
.menu-toggle:active,
.menu-toggle:focus,
.menu-toggle:hover {
    color: #e6aa50;
    background-color: rgba(45, 40, 45, .9)
}

.menu-toggle:before {
    font-size: 16px;
    line-height: 24px;
    content: "Menu"
}

.menu-toggle:after,
.menu-toggle:before {
    display: inline-block;
    vertical-align: middle
}

.menu-toggle:after {
    position: relative;
    top: -.125rem;
    border: .375rem solid transparent;
    margin-left: .5rem;
    border-top-color: #e6aa50;
    content: ""
}

.menu-toggle[aria-expanded=true] {
    color: #c96
}

.menu-toggle[aria-expanded=true]:after {
    border-top-color: transparent;
    border-bottom-color: #e6aa50
}

@media (min-width:37.5em) {
    .menu-toggle {
        display: none
    }
}

.main-navigation {
    position: relative;
    background-color: rgba(0, 0, 0, .2)
}

.main-navigation:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: .125rem;
    background-color: #e6aa50;
    content: ""
}

@media (max-width:37.4375em) {
    .main-navigation {
        background-color: #2d282d
    }
    .main-navigation.toggled-on .menu {
        display: block
    }
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    *zoom: 1;
    text-align: center
}

.menu:after,
.menu:before {
    content: "";
    display: table
}

.menu:after {
    clear: both
}

@media (min-width:37.5em) {
    .menu {
        display: block
    }
}

@media (max-width:37.4375em) {
    .menu {
        border-top: 1px solid hsla(0, 0%, 100%, .2);
        display: none
    }
    .toggled-on .menu {
        display: block
    }
}

.menu-item {
    position: relative;
    margin: 0;
    display: block;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 700;
    text-align: left
}

@media (min-width:37.5em) {
    .menu-item {
        margin: 0 .0625rem;
        display: inline-block;
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 1.33333em;
        text-align: center
    }
}

.menu-item a {
    display: block;
    color: #e6aa50;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: all .1s ease
}

.menu-item a.focus,
.menu-item a:active,
.menu-item a:focus,
.menu-item a:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #c96
}

@media (min-width:48em) {
    .menu-item a {
        padding: 1rem 1.5rem
    }
}

@media (min-width:62em) {
    .menu-item a {
        padding: 1.5rem 2rem
    }
}

.current-menu-item>a {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.menu-item-has-children {
    background-color: rgba(45, 40, 45, .6)
}

.menu-item-has-children .dropdown-toggle {
    display: none
}

@media (min-width:37.5em) {
    .menu-item-has-children {
        background-color: transparent
    }
    .menu-item-has-children>a:after {
        position: relative;
        top: -.125rem;
        display: inline-block;
        border: .375rem solid transparent;
        margin-left: .5rem;
        vertical-align: middle;
        border-top-color: #e6aa50;
        content: ""
    }
    .menu-item-has-children>a .dropdown-toggle {
        display: inline-block;
        display: none
    }
    .menu-item-has-children.focus>a,
    .menu-item-has-children:hover>a {
        color: rgba(29, 36, 42, .9);
        background-color: #c96
    }
    .menu-item-has-children.focus>a:after,
    .menu-item-has-children:hover>a:after {
        border-top-color: rgba(29, 36, 42, .9)
    }
    .menu-item-has-children.focus>.sub-menu,
    .menu-item-has-children:hover>.sub-menu {
        left: 0
    }
    .menu-item-has-children.current-menu-item>a:after {
        border-top-color: rgba(29, 36, 42, .9)
    }
}

.sub-menu {
    list-style: none;
    margin: 0;
    padding: 0
}

.sub-menu .menu-item {
    text-transform: none;
    font-weight: 400;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif
}

@media (max-width:37.4375em) {
    .sub-menu a {
        padding-left: 2.5rem;
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: 1rem 50%
    }
    .sub-menu a.focus,
    .sub-menu a:focus,
    .sub-menu a:hover {
    }
}

@media (min-width:37.5em) {
    .sub-menu {
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 310;
        min-width: 16.25rem;
        background-color: #c96
    }
    .sub-menu .menu-item {
        width: 100%;
        margin: 0;
        border-top: 1px solid hsla(0, 0%, 100%, .2);
        text-align: left
    }
    .sub-menu a {
        padding: .625rem 1rem;
        color: rgba(29, 36, 42, .75)
    }
}

@media (min-width:48em) {
    .sub-menu a {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}

@media (min-width:62em) {
    .sub-menu a {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

#colophon {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    text-align: center
}

.site-info-generator {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.site-info-network {
    position: relative;
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    margin: 0 auto;
    margin-bottom: 1.5rem;
    color: #fff;
    text-indent: -9999px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: #614787;
    background-size: 40px;
    border-radius: 50%;
    transition: all .1s ease
}

.site-info-network:after {
    position: absolute;
    left: 50%;
    top: 1.875rem;
    z-index: -1;
    margin-left: -.9375rem;
    margin-bottom: -1.875rem;
    width: 1.875rem;
    height: 6.25rem;
    background: #614787;
    transition: all .1s ease;
    content: ""
}

.site-info-network:active,
.site-info-network:active:after,
.site-info-network:focus,
.site-info-network:focus:after,
.site-info-network:hover,
.site-info-network:hover:after {
    background-color: #57407a
}

#primary {
    text-align: left;
    padding: 1.5rem 1rem
}

@media (min-width:37.5em) {
    #primary {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    #primary {
        padding: 4.5rem 3rem
    }
}

#content {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto
}

#after-header-widgets,
#before-content-widgets,
#secondary {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    text-align: left
}

.post {
    *zoom: 1;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 6px double #f5ebe0
}

.post:after,
.post:before {
    content: "";
    display: table
}

.post:after {
    clear: both
}

.entry-content {
    *zoom: 1
}

.entry-content:after,
.entry-content:before {
    content: "";
    display: table
}

.entry-content:after {
    clear: both
}

.entry-title {
    font-size: 2.44141em;
    line-height: 1;
    margin-bottom: 1.5rem
}

.entry-title a:active,
.entry-title a:focus,
.entry-title a:hover {
    text-decoration: none
}

.entry-meta {
    margin-bottom: 1rem
}

.entry-meta a {
    color: #614787
}

.entry-meta a:active,
.entry-meta a:focus,
.entry-meta a:hover {
    color: #57407a
}

.entry-meta .updated {
    display: none
}

.entry-meta .published {
    display: inline
}

.entry-footer {
    margin-bottom: 1.5rem;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5em;
    color: rgba(29, 36, 42, .6)
}

.entry-footer>:after {
    content: " | "
}

.entry-footer>:last-child:after {
    content: ""
}

.entry-footer a {
    color: #614787
}

.entry-footer a:active,
.entry-footer a:focus,
.entry-footer a:hover {
    color: #57407a
}

/**
 * ## Comments
 */
.comments-area {
    margin-top: 2rem
}

.comments-title {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem
}

.comment-list>.comment {
    margin-top: 1.5rem
}

article.comment-body {
    position: relative;
    padding-left: 3.25rem
}

.comment-author {
    display: block;
    font-size: .8em;
    line-height: 1.5625em
}

.comment-author .avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.625rem
}

.comment-author .fn {
    font-style: normal;
    font-weight: 700
}

.comment-author .says {
    display: none
}

.comment-metadata {
    font-size: .64em;
    line-height: 1.5625em
}

.comment-content {
    margin-top: .5rem
}

.comment-content p {
    margin-bottom: .5rem;
    font-size: .8em
}

.comment-content p:last-child {
    margin-bottom: 0
}

.reply {
    margin-top: .5rem;
    font-size: .8em;
    line-height: 1.5625em
}

.pingback {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-respond {
    padding: 1.5rem;
    background-color: #fff;
    background-color: #e8e9ea;
    border-radius: .1875rem
}

.comment-form label {
    font-size: 1em;
    line-height: 1.5625em
}

.comment-form p {
    margin-bottom: 1rem
}

.comment-form p:last-child {
    margin-bottom: 0
}

.comment-reply-title {
    font-size: 1em;
    margin-bottom: 1rem
}

.comment-notes {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.comment-subscription-form {
    margin-bottom: .5rem
}

.comment-subscription-form label {
    font-size: .8em
}

/**
 * ## Posts
 */
.post-navigation,
.posts-navigation {
    *zoom: 1
}

.post-navigation:after,
.post-navigation:before,
.posts-navigation:after,
.posts-navigation:before {
    content: "";
    display: table
}

.post-navigation:after,
.posts-navigation:after {
    clear: both
}

.post-navigation .screen-reader-text,
.posts-navigation .screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.post-navigation a,
.posts-navigation a {
    display: block
}

.post-navigation .nav-previous,
.posts-navigation .nav-previous {
    float: left;
    text-align: left
}

.post-navigation .nav-previous a:before,
.posts-navigation .nav-previous a:before {
    margin-right: .5rem;
    display: inline-block;
    content: "\2190"
}

.post-navigation .nav-next,
.posts-navigation .nav-next {
    float: right;
    text-align: right
}

.post-navigation .nav-next a:after,
.posts-navigation .nav-next a:after {
    margin-left: .5rem;
    display: inline-block;
    content: "\2192"
}
/**
 * ## Organizers 
 * Custom Post Type
 */
.wcorg-organizers {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 6px double #f5ebe0
}

.wcorg-organizer {
    max-width: 40em;
    margin-bottom: 2rem
}

.wcorg-organizer:last-child {
    margin-bottom: 0
}

.wcorg-organizer h2 {
    margin-bottom: 1rem;
    font-size: 1.25em;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    letter-spacing: .1em
}

.wcorg-organizer .wcorg-organizer-description {
    padding-left: 4rem;
    min-height: 3rem
}

@media (min-width:37.5em) {
    .wcorg-organizer .wcorg-organizer-description {
        padding-left: 6rem;
        min-height: 5rem
    }
}

.wcorg-organizer p {
    margin: 0;
    font-size: 16px
}

.wcorg-organizer .avatar {
    float: left;
    margin-left: -4rem;
    width: 3rem;
    clip-path: polygon(50% 0px, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)
}

@media (min-width:37.5em) {
    .wcorg-organizer .avatar {
        margin-left: -6rem;
        width: 5rem
    }
}

/**
 * ## Tickets / CampTix 
 * Custom Post Type
 */
.tix-attendee-list {
    list-style: none;
    margin: 0;
    padding: 0
}

#tix-attendees .tix-columns-3 li {
    width: 100%
}

@media (min-width:37.5em) {
    #tix-attendees .tix-columns-3 li {
        width: 50%
    }
    #tix-attendees .tix-columns-3 li:nth-child(odd) {
        clear: left
    }
}

@media (min-width:62em) {
    #tix-attendees .tix-columns-3 li {
        width: 33.33333%
    }
    #tix-attendees .tix-columns-3 li:nth-child(odd) {
        clear: none
    }
    #tix-attendees .tix-columns-3 li:nth-child(3n+1) {
        clear: left
    }
}

#tix-attendees {
    *zoom: 1
}

#tix-attendees:after,
#tix-attendees:before {
    content: "";
    display: table
}

#tix-attendees:after {
    clear: both
}

#tix-attendees li {
    position: relative;
    margin-top: 0;
    margin-bottom: 1.5rem;
    height: auto;
    min-height: 3rem;
    padding-left: 4rem;
    padding-right: .5rem;
    font-size: .8em;
    line-height: 1.25em;
    text-align: left
}

#tix-attendees .avatar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    margin: 0;
    width: 3rem;
    height: 3rem;
    border: .125rem solid #e6aa50;
    background-color: #fff;
    transition: all .15s ease
}

#tix-attendees a {
    display: block
}

#tix-attendees .tix-field {
    display: inline-block;
    margin: 0;
    margin-right: .5rem;
    font-size: 14px;
    line-height: 1.5625em;
    vertical-align: middle
}

#tix-attendees .tix-attendee-name {
    display: block;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: .125rem;
    color: rgba(29, 36, 42, .9);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25em;
    background: none
}

#tix-attendees li:hover .avatar {
    transform: scale(1.1)
}

#tix-attendees .tix-attendee-url {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 11.25rem
}

#tix-attendees .tix-attendee-twitter:after {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    margin-left: .5rem;
    vertical-align: middle;
    background: no-repeat url(https://2017.europe.wordcamp.org/files/2017/01/decoration-bullet-dark.png) 100% 50%;
    background-size: 14px;
    opacity: .5;
    content: ""
}

#tix-attendees .tix-attendee-twitter:last-child:after {
    display: none
}


#tix {
    *zoom: 1
}

#tix:after,
#tix:before {
    content: "";
    display: table
}

#tix:after {
    clear: both
}

.tix_tickets_table {
    border-top: 3px double #c96;
    border-bottom: 3px double #c96;
    margin-bottom: 1.5rem
}

.tix_tickets_table thead th {
    color: rgba(29, 36, 42, .75)
}

.tix_tickets_table td,
.tix_tickets_table th {
    border-color: #f5ebe0
}

.tix_tickets_table td:first-child,
.tix_tickets_table th:first-child {
    padding-left: 0
}

.tix_tickets_table td:last-child,
.tix_tickets_table th:last-child {
    padding-right: 0
}

.tix_tickets_table .tix-ticket-title {
    display: block;
    font-size: 1.25em;
    color: rgba(29, 36, 42, .9)
}

.tix_tickets_table .tix-ticket-title+br {
    display: none
}

.tix_tickets_table .tix-ticket-excerpt {
    display: block;
    margin-top: .25rem;
    color: rgba(29, 36, 42, .75)
}

.tix_tickets_table .tix-column-price,
.tix_tickets_table .tix-column-quantity,
.tix_tickets_table .tix-column-remaining {
    font-weight: 700
}

#tix-coupon-container {
    position: relative;
    padding-right: 10rem
}

#tix-coupon-container input[type=text] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

#tix-coupon-container input[type=submit] {
    position: absolute;
    top: 0;
    right: 0;
    width: 10rem;
    padding: .4375rem .625rem;
    color: hsla(0, 0%, 100%, .9);
    background-color: #575357;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

@media (max-width:47.9375em) {
    .tix_tickets_table thead tr {
        display: none
    }
    .tix_tickets_table tbody .tix-column-description {
        display: block;
        width: 100%
    }
    .tix_tickets_table tbody .tix-column-price,
    .tix_tickets_table tbody .tix-column-quantity,
    .tix_tickets_table tbody .tix-column-remaining {
        display: block;
        float: left
    }
    .tix_tickets_table tbody .tix-column-price {
        padding-left: 0
    }
    .tix_tickets_table tbody .tix-column-price,
    .tix_tickets_table tbody .tix-column-remaining {
        padding-top: 1rem;
        padding-bottom: 1rem;
        line-height: 1.5em;
        width: 30%
    }
    .tix_tickets_table tbody .tix-column-quantity {
        width: 40%
    }
}

div.googlemaps {
    margin-bottom: 1.5rem
}

div.googlemaps iframe {
    max-width: 100%
}

/**
 * ## Schedule
 * Custom Post Type
 */

.wcpt-schedule {
    border: .25rem solid #c96;
    margin-bottom: 1.5rem;
    background-color: #fff
}

.wcpt-schedule td,
.wcpt-schedule th {
    vertical-align: top;
    border-color: #e0c2a3
}

.wcpt-schedule .wcpt-col-time,
.wcpt-schedule .wcpt-col-track {
    border-top: none;
    background-color: #2d282d;
    color: hsla(0, 0%, 100%, .9)
}

.wcpt-schedule .global-session td {
    vertical-align: middle
}

.wcpt-schedule .wcpt-col-time {
    width: 10%
}

.wcpt-schedule .wcpt-col-track {
    width: 30%
}

.wcpt-schedule .wcpt-time {
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 700;
    font-family: ingra, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    color: rgba(29, 36, 42, .9)
}

.wcpt-schedule .wcpt-session-title {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.25em;
    line-height: 1.25em;
    font-weight: 700
}

.wcpt-schedule .global-session.afternoon-break .wcpt-session-title,
.wcpt-schedule .global-session.break .wcpt-session-title,
.wcpt-schedule .global-session.lunch .wcpt-session-title,
.wcpt-schedule .global-session.morning-break .wcpt-session-title,
.wcpt-schedule .global-session.registration .wcpt-session-title {
    margin-bottom: 0;
    font-size: 1.5625em;
    line-height: 1.25em;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    color: rgba(29, 36, 42, .9)
}

.wcpt-schedule .wcpt-session-speakers {
    display: block
}

.wcpt-schedule .wcpt-session-speakers a {
    color: rgba(29, 36, 42, .75)
}

.wcpt-schedule .global-session.afternoon-break,
.wcpt-schedule .global-session.break,
.wcpt-schedule .global-session.lunch,
.wcpt-schedule .global-session.morning-break,
.wcpt-schedule .global-session.registration {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-position: 50% 0
}

@media (max-width:47.9375em) {
    .wcpt-schedule {
        border: none
    }
    .wcpt-schedule td,
    .wcpt-schedule th {
        display: block;
        border-top: none;
        margin: 0
    }
    .wcpt-schedule thead {
        display: none
    }
    .wcpt-schedule tr {
        margin-bottom: 1rem;
        display: block;
        border: .25rem solid #c96
    }
    .wcpt-schedule .wcb-track-track-1:before,
    .wcpt-schedule .wcb-track-track-2:before,
    .wcpt-schedule .wcb-track-track-3:before {
        display: block;
        padding: .5rem 1rem;
        margin: -.5rem -1rem .5rem;
        border: none;
        color: rgba(29, 36, 42, .9);
        font-weight: 700;
        background-color: #f5ebe0!important
    }
    .wcpt-schedule .wcb-track-track-1:before {
        content: "Track 1"
    }
    .wcpt-schedule .wcb-track-track-2:before {
        content: "Track 2"
    }
    .wcpt-schedule .wcb-track-track-3:before {
        content: "Track 3"
    }
    .wcpt-schedule .wcpt-session-type-custom:before {
        display: none;
        content: ""
    }
    .wcpt-schedule .wcpt-session-empty {
        display: none;
        height: 0
    }
    .wcpt-schedule .wcpt-time {
        padding-top: 1rem;
        padding-bottom: 1rem;
        color: hsla(0, 0%, 100%, .9);
        background-color: #2d282d
    }
    .wcpt-schedule .wcpt-session-title {
        padding: 0
    }
    .wcpt-schedule .wcpt-session-speakers {
        padding-left: 0
    }
}

/**
 * ## Sessions
 * Custom Post Type
 */

.wcorg-session {
    border-top: 6px double #f5ebe0;
    padding: 1.5rem 0
}

.wcorg-session .wcorg-session-description {
    *zoom: 1
}

.wcorg-session .wcorg-session-description:after,
.wcorg-session .wcorg-session-description:before {
    content: "";
    display: table
}

.wcorg-session .wcorg-session-description:after {
    clear: both
}

.wcorg-session .avatar {
    float: left;
    margin: .5rem 1rem .5rem 0
}

.wcorg-session p {
    margin-bottom: .5rem
}

.wcorg-session p:last-child {
    margin-bottom: 0
}

.wcorg-session h3 {
    text-transform: none
}

.wcorg-speaker {
    border-top: 6px double #f5ebe0;
    padding: 1.5rem 0
}

.wcorg-speaker .wcorg-speaker-description {
    *zoom: 1
}

.wcorg-speaker .wcorg-speaker-description:after,
.wcorg-speaker .wcorg-speaker-description:before {
    content: "";
    display: table
}

.wcorg-speaker .wcorg-speaker-description:after {
    clear: both
}

.wcorg-speaker .avatar {
    float: left;
    margin: .5rem 1rem .5rem 0
}

.wcorg-speaker p {
    margin-bottom: .5rem;
    font-size: 16px
}

.wcorg-speaker p:last-child {
    margin-bottom: 0
}

.wcorg-speaker h3 {
    text-transform: none
}

.single-wcb_speaker .entry-content {
    font-size: 18px
}

#session-speaker-names,
#speaker-session-names {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem
}

#session-speaker-names li,
#speaker-session-names li {
    padding-left: 2rem;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: .5rem .5rem;
    font-size: 1em;
    line-height: 1.5625em
}

/**
 * ## Sponsors
 * Custom Post Type
 */

.wcorg-sponsors>div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.wcorg-sponsors>div h2 {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f5ebe0;
    font-size: 1em;
    line-height: 1.5625em;
    text-align: center;
    position: relative;
    z-index: 100
}

@media (min-width:48em) {
    .wcorg-sponsors>div h2 {
        padding-top: 0;
        border-top: none
    }
    .wcorg-sponsors>div h2:after,
    .wcorg-sponsors>div h2:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        border-top: 1px solid #f5ebe0;
        content: "";
        z-index: -1
    }
    .wcorg-sponsors>div h2:after {
        border-color: #fff;
        width: 16em;
        z-index: -1
    }
}

.wcorg-sponsor {
    margin-bottom: 0;
    padding: .5rem
}

.wcorg-sponsor img {
    display: block;
    margin: 0 auto;
    max-height: 8.75rem
}

.wcorg-sponsor .wcorg-sponsor-description p,
.wcorg-sponsor h3 {
    display: none
}

.wcorg-sponsor a {
    background-color: #fff
}

.wcorg-sponsor a img {
    transition: all .15s ease
}

.wcorg-sponsor a:active img,
.wcorg-sponsor a:focus img,
.wcorg-sponsor a:hover img {
    filter: grayscale(100%);
    opacity: .75
}

@media (min-width:48em) {
    .wcorg-sponsor {
        padding: 1rem
    }
    .wcorg-sponsor img {
        max-height: 12.5rem
    }
}

.wcorg-sponsor-level-administrator,
.wcorg-sponsor-level-event-after-party,
.wcorg-sponsor-level-event-speakers-dinner,
.wcorg-sponsor-level-super-admin {
    *zoom: 1
}

.wcorg-sponsor-level-administrator:after,
.wcorg-sponsor-level-administrator:before,
.wcorg-sponsor-level-event-after-party:after,
.wcorg-sponsor-level-event-after-party:before,
.wcorg-sponsor-level-event-speakers-dinner:after,
.wcorg-sponsor-level-event-speakers-dinner:before,
.wcorg-sponsor-level-super-admin:after,
.wcorg-sponsor-level-super-admin:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-administrator:after,
.wcorg-sponsor-level-event-after-party:after,
.wcorg-sponsor-level-event-speakers-dinner:after,
.wcorg-sponsor-level-super-admin:after {
    clear: both
}

.wcorg-sponsor-level-administrator .wcorg-sponsor,
.wcorg-sponsor-level-event-after-party .wcorg-sponsor,
.wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
.wcorg-sponsor-level-super-admin .wcorg-sponsor {
    width: 100%
}

@media (min-width:37.5em) {
    .wcorg-sponsor-level-administrator .wcorg-sponsor,
    .wcorg-sponsor-level-event-after-party .wcorg-sponsor,
    .wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
    .wcorg-sponsor-level-super-admin .wcorg-sponsor {
        width: 50%
    }
}

@media (min-width:48em) {
    .wcorg-sponsor-level-administrator .wcorg-sponsor,
    .wcorg-sponsor-level-event-after-party .wcorg-sponsor,
    .wcorg-sponsor-level-event-speakers-dinner .wcorg-sponsor,
    .wcorg-sponsor-level-super-admin .wcorg-sponsor {
        width: 33.33333%
    }
}

.wcorg-sponsor-level-author,
.wcorg-sponsor-level-editor,
.wcorg-sponsor-level-speakers-dinner {
    *zoom: 1
}

.wcorg-sponsor-level-author:after,
.wcorg-sponsor-level-author:before,
.wcorg-sponsor-level-editor:after,
.wcorg-sponsor-level-editor:before,
.wcorg-sponsor-level-speakers-dinner:after,
.wcorg-sponsor-level-speakers-dinner:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-author:after,
.wcorg-sponsor-level-editor:after,
.wcorg-sponsor-level-speakers-dinner:after {
    clear: both
}

.wcorg-sponsor-level-author .wcorg-sponsor,
.wcorg-sponsor-level-editor .wcorg-sponsor,
.wcorg-sponsor-level-speakers-dinner .wcorg-sponsor {
    width: 50%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-author .wcorg-sponsor,
    .wcorg-sponsor-level-editor .wcorg-sponsor,
    .wcorg-sponsor-level-speakers-dinner .wcorg-sponsor {
        width: 25%
    }
}

.wcorg-sponsor-level-small-business,
.wcorg-sponsor-level-subscriber {
    *zoom: 1
}

.wcorg-sponsor-level-small-business:after,
.wcorg-sponsor-level-small-business:before,
.wcorg-sponsor-level-subscriber:after,
.wcorg-sponsor-level-subscriber:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-small-business:after,
.wcorg-sponsor-level-subscriber:after {
    clear: both
}

.wcorg-sponsor-level-small-business .wcorg-sponsor,
.wcorg-sponsor-level-subscriber .wcorg-sponsor {
    width: 33.33333%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-small-business .wcorg-sponsor,
    .wcorg-sponsor-level-subscriber .wcorg-sponsor {
        width: 20%
    }
}

.wcorg-sponsor-level-microsponsor {
    *zoom: 1
}

.wcorg-sponsor-level-microsponsor:after,
.wcorg-sponsor-level-microsponsor:before {
    content: "";
    display: table
}

.wcorg-sponsor-level-microsponsor:after {
    clear: both
}

.wcorg-sponsor-level-microsponsor .wcorg-sponsor {
    width: 33.33333%
}

@media (min-width:48em) {
    .wcorg-sponsor-level-microsponsor .wcorg-sponsor {
        width: 16.66667%
    }
}

.wcorg-sponsor-level-community-summit-bronze,
.wcorg-sponsor-level-community-summit-gold,
.wcorg-sponsor-level-community-summit-individual,
.wcorg-sponsor-level-community-summit-silver {
    display: none!important
}
/**
 * ## Widgets
 */
.widget {
    padding: 1.5rem 1rem;
    position: relative;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto
}

@media (min-width:37.5em) {
    .widget {
        padding: 3rem 2rem
    }
}

@media (min-width:48em) {
    .widget {
        padding: 4.5rem 3rem
    }
}

.widget-title {
    font-size: 1.25em;
    line-height: 1.25em
}

.widget hr {
    width: 10rem;
    padding: 0;
    margin: 1.5rem auto;
    border-top: 2px solid #c96
}

@media (min-width:48em) {
    .widget hr {
        margin-top: 2rem;
        margin-bottom: 2rem
    }
}

#after-header-widgets .widget,
#before-content-widgets .widget,
#content-widgets .widget,
#secondary .widget {
    text-align: center
}

#after-header-widgets .widget>*,
#before-content-widgets .widget>*,
#content-widgets .widget>*,
#secondary .widget>* {
    position: relative
}

#after-header-widgets .widget:before,
#before-content-widgets .widget:before,
#content-widgets .widget:before,
#secondary .widget:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1000px;
    right: -1000px;
    background-color: #f5ebe0;
    content: ""
}

.widget_text {
    background-color: #fff
}

.widget_text:before {
    background-color: #fff!important
}

/**
 * ### Jetpack
 */

.jetpack_subscription_widget {
    text-align: center
}

.jetpack_subscription_widget:before {
    background-color: #2d282d!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

.jetpack_subscription_widget .widget-title {
    color: #c96
}

.jetpack_subscription_widget p {
    margin: 0;
    color: hsla(0, 0%, 100%, .8)
}

.jetpack_subscription_widget input[type=email] {
    width: 100%!important
}

.jetpack_subscription_widget input[type=submit] {
    width: 100%;
    color: rgba(29, 36, 42, .75);
    text-transform: uppercase;
    background-color: #c96
}

.jetpack_subscription_widget input[type=submit]:active,
.jetpack_subscription_widget input[type=submit]:focus,
.jetpack_subscription_widget input[type=submit]:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.jetpack_subscription_widget #subscribe-text {
    margin-bottom: 1.5rem
}

.jetpack_subscription_widget #subscribe-email,
.jetpack_subscription_widget #subscribe-submit {
    display: inline-block;
    width: 12.5rem;
    margin: .25rem;
    vertical-align: top
}

@media (min-width:37.5em) {
    .jetpack_subscription_widget #subscribe-email {
        width: 25rem
    }
}
/**
 * ## Social Media
 */
.list-social {
    *zoom: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}

.list-social:after,
.list-social:before {
    content: "";
    display: table
}

.list-social:after {
    clear: both
}

.list-social li {
    font-size: 1em;
    line-height: 1.25em;
    display: block;
    margin-top: 1rem;
    text-align: center
}

@media (min-width:24em) {
    .list-social li {
        width: 46%;
        display: inline-block
    }
}

@media (min-width:37.5em) {
    .list-social li {
        width: 30%;
        min-width: 12.5rem
    }
}

.list-social strong {
    display: block;
    color: inherit
}

.list-social a {
    position: relative;
    display: block;
    padding: 1rem 1.5rem;
    padding-top: 4.25rem;
    color: rgba(0, 0, 0, .8);
    border-radius: .1875rem;
    text-decoration: none
}

.list-social a:empty {
    display: none
}

.list-social a:before {
    transform: translateX(-50%) rotate(45deg);
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    border: 6px double #614787;
    transition: all .1s ease
}

.list-social a:after,
.list-social a:before {
    position: absolute;
    top: 0;
    left: 50%;
    content: ""
}

.list-social a:after {
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 36px
}

.list-social a:active,
.list-social a:focus,
.list-social a:hover {
    text-decoration: none;
    color: hsla(0, 0%, 100%, .9);
    background-color: #614787
}

.list-social a:active:before,
.list-social a:focus:before,
.list-social a:hover:before {
    background-color: #c0b5cf;
    border-color: #c0b5cf
}

.list-social .social-twitter a:after {
}

.list-social .social-facebook a:after {
}

.list-social .social-instagram a:after {
}
/*
 * ## Text
 * 
 */
#text-5 {
    background-color: #fff
}

#text-3:before,
#text-4:before {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

@media (min-width:48em) {
    #text-3,
    #text-4 {
        position: relative
    }
    #text-3 .widget-title,
    #text-4 .widget-title {
        text-align: left
    }
    #text-3 p,
    #text-4 p {
        margin-bottom: 0;
        margin-right: 20rem;
        text-align: left
    }
    #text-3 .realistic-ticket,
    #text-4 .realistic-ticket {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: -20px
    }
}

.realistic-ticket {
    display: inline-block;
    min-width: 280px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 20px;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    transform: rotate(-5deg)
}

@media (min-width:48em) {
    .realistic-ticket {
        transform: rotate(-15deg)
    }
}

.realistic-ticket .realistic-ticket__part-left,
.realistic-ticket .realistic-ticket__part-right {
    position: relative;
    float: left;
    padding: 10px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: 460px 140px;
    transition: all .15s ease
}

.realistic-ticket .realistic-ticket__part-left {
    width: 180px;
    background-position: 0 0;
    transform-origin: 100% 100%;
    border-right: 2px dotted #2d282d
}

.realistic-ticket .realistic-ticket__part-right {
    width: 100px;
    border-left: 2px dotted #2d282d;
    margin-left: -2px;
    background-position: 100% 0;
    transform-origin: 0 100%
}

.realistic-ticket .realistic-ticket__info-action,
.realistic-ticket .realistic-ticket__info-event,
.realistic-ticket .realistic-ticket__info-label {
    padding: 10px 15px;
    transition: all .15s ease
}

.realistic-ticket .realistic-ticket__info-label {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 0;
    bottom: 50%;
    color: rgba(29, 36, 42, .9)
}

.realistic-ticket .realistic-ticket__info-action {
    position: absolute;
    top: 50%;
    left: 10px;
    bottom: 10px;
    right: 0;
    color: #e6aa50;
    color: #c96
}

.realistic-ticket .realistic-ticket__info-event {
    position: absolute;
    top: 100%;
    left: 0;
    width: 140px;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    color: rgba(29, 36, 42, .9)
}

@media (min-width:48em) {
    .realistic-ticket:focus,
    .realistic-ticket:hover {
        transform: scale(1.1) rotate(-16deg)
    }
}

.realistic-ticket:focus .realistic-ticket__part-left,
.realistic-ticket:hover .realistic-ticket__part-left {
    transform: rotate(-2deg)
}

.realistic-ticket:focus .realistic-ticket__part-right,
.realistic-ticket:hover .realistic-ticket__part-right {
    transform: rotate(10deg)
}

.realistic-ticket:focus .realistic-ticket__info-action,
.realistic-ticket:hover .realistic-ticket__info-action {
    color: #e6aa50
}

/**
 * ## Page
 * ### Sponsors
 */
.page-slug-sponsors #content {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto
}

.page-slug-sponsors .entry-title {
    position: relative;
    margin-bottom: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    text-align: center
}

.page-slug-sponsors .entry-title:before {
    width: 10rem;
    height: .125rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c96;
    content: ""
}

.page-slug-attendees #content {
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto
}

.page-slug-attendees .entry-title {
    position: relative;
    margin-bottom: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    text-align: center
}

.page-slug-attendees .entry-title:before {
    width: 10rem;
    height: .125rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c96;
    content: ""
}

.page-template-page-day-of #primary {
    display: none
}

.page-template-page-day-of #content-widgets .widget {
    border-top: 1px solid #f5ebe0;
    background: none!important
}

.page-template-page-day-of #content-widgets .widget:first-child {
    border-top: none
}

.page-template-page-day-of #content-widgets .widget:before {
    display: none
}

.page-template-page-day-of #content-widgets .widget .widget-title {
    font-size: 1.95312em
}

.page-template-page-day-of #content-widgets .widget .widget h2 {
    font-size: 1.5625em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widgets .widget .widget h3 {
    font-size: 1.25em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widgets .widget .widget h4 {
    font-size: 1em;
    line-height: 1.5625em
}

.page-template-page-day-of #content-widget-1 .widget:first-child {
    padding: 2rem 1rem
}

@media (min-width:37.5em) {
    .page-template-page-day-of #content-widget-1 .widget:first-child {
        padding: 4rem 2rem
    }
}

@media (min-width:48em) {
    .page-template-page-day-of #content-widget-1 .widget:first-child {
        padding: 6rem 3rem
    }
}

.page-template-page-day-of #content-widget-1 .widget:first-child .widget-title {
    font-size: 1.95312em
}

.page-template-page-day-of #content-widget-1 .widget:first-child p {
    font-size: 1.25em
}

.content-widgets-block {
    position: relative;
    background-color: #fff
}

.content-widgets-block:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1000px;
    right: -1000px;
    background-color: inherit;
    content: ""
}

#content-widget-1:before {
    background-color: #f5ebe0!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

#content-widget-2:before,
#content-widget-3:before,
#content-widget-4:before {
    border-top: 1px solid #f5ebe0
}

#content-widget-5 {
    text-align: center
}

#content-widget-5:before {
    background-color: #2d282d!important;
    background-size: 120px;
    background-attachment: fixed;
    background-position: 50% 0
}

#content-widget-5 .widget-title {
    color: #c96
}

#content-widget-5 p {
    color: hsla(0, 0%, 100%, .75)
}

#content-widget-5 strong {
    color: hsla(0, 0%, 100%, .9)
}
/**
 * ## Navigation
 */
.nav-anchor {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 1.5rem;
    text-align: center
}

.nav-anchor li {
    display: inline-block;
    margin: .125rem;
    font-family: mostra-nuova-alt-d, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
    line-height: 1.25em;
    font-weight: 700;
    text-transform: uppercase
}

.nav-anchor a {
    display: block;
    padding: 1rem;
    min-width: 13.75rem;
    background-color: #c96;
    text-decoration: none;
    border-radius: .1875rem
}

.nav-anchor a,
.nav-anchor a:active {
    color: rgba(29, 36, 42, .9)
}

.nav-anchor a:focus,
.nav-anchor a:hover {
    color: rgba(29, 36, 42, .9);
    background-color: #e6aa50
}

.u-text-center {
    text-align: center
}

.u-text-left {
    text-align: left
}

.u-text-right {
    text-align: right
}

.assistive-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

img.emoji,
img.wp-smiley {
    display: inline!important;
    border: none!important;
    box-shadow: none!important;
    height: 1em!important;
    width: 1em!important;
    margin: 0 .07em!important;
    vertical-align: -.1em!important;
    background: none!important;
    padding: 0!important
}

.skip-link {
    padding: .25em .5em;
    color: rgba(29, 36, 42, .9);
    background-color: #fff;
    border-radius: .1875rem;
    box-shadow: 0 .0625rem .1875rem 0 rgba(0, 0, 0, .2);
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.skip-link:focus {
    position: relative;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
    position: absolute;
    z-index: 1;
    top: 1em;
    left: 1em;
    text-decoration: none
}

.alignleft,
.alignright {
    position: relative;
    max-width: none;
    width: 100%
}

@media (min-width:24em) {
    .alignleft,
    .alignright {
        top: .375rem;
        margin-bottom: 1.5rem;
        width: 36%
    }
}

@media (min-width:48em) {
    .alignleft,
    .alignright {
        top: .625rem;
        width: 44%
    }
}

@media (min-width:24em) {
    .alignleft {
        float: left;
        margin-right: 1.5rem
    }
}

@media (min-width:24em) {
    .alignright {
        float: right;
        margin-left: 1.5rem
    }
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem
}

.wp-caption img {
    margin-bottom: 0;
    max-width: none;
    width: 100%
}

.wp-caption p {
    margin-top: .5rem;
    margin-bottom: 0;
    font-size: .8em;
    line-height: 1.5625em;
    color: rgba(29, 36, 42, .6)
}

.secondary-navigation {
    display: none
}

/**
 * # Customizations
 */
Categories
Tutorial WordPress

Restrict post to WordPress user

Over the that weekend I had been using WordPress to take notes at WordCamp Orange County and realized that WordPress’ block editor is useful as a note taking environment. But what If I don’t want these notes to be public?

Using a template to restrict access

I duplicated TwentyNineteen’s single.php template and wrapped the loop in a conditional tag is_user_logged_in().

The code

<?php
/**
 * Single post and page template for restricting the title and content unless the user is logged in
 * Sources: 
 * https://www.wpbeginner.com/wp-themes/create-custom-single-post-templates-for-specific-posts-or-sections-in-wordpress/
 * https://codex.wordpress.org/Conditional_Tags
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 *
 * License: GPL 2 or later
 *
 * Template Name: Log in Required
 * Template Post Type: post, page
 *
 */

get_header();
?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main">

<?php
	if ( is_user_logged_in() ) {  // check if user is logged in

/* * 
 * Start the Loop 
 * This example  uses TwentyNineteen for the loop, if using a different theme subsitute that loop here.
 * */
		while ( have_posts() ) :
			the_post();

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

			if ( is_singular( 'attachment' ) ) {
				// Parent post navigation.
				the_post_navigation(
					array(
						/* translators: %s: parent post link */
						'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentynineteen' ), '%title' ),
					)
				);
			} elseif ( is_singular( 'post' ) ) {
				// Previous/next post navigation.
				the_post_navigation(
					array(
						'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next Post', 'twentynineteen' ) . '</span> ' .
							'<span class="screen-reader-text">' . __( 'Next post:', 'twentynineteen' ) . '</span> <br/>' .
							'<span class="post-title">%title</span>',
						'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous Post', 'twentynineteen' ) . '</span> ' .
							'<span class="screen-reader-text">' . __( 'Previous post:', 'twentynineteen' ) . '</span> <br/>' .
							'<span class="post-title">%title</span>',
					)
				);
			}

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

		endwhile; // End of the TwentyNineteen  loop.
    
	} else { // If not logged in present a link to log into the site
		echo '<p style="text-align: center;"><a href="' .  wp_login_url( get_permalink() ) . '" title="Login">Log in to view this post</a></p>';
	}
		?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_footer();

View this code in my GitHub gist.

How does this code work?

Simply put, is_user_logged in() will check if the user is logged before it displays the post. If not they’re presented with a link to log in.

Left, the user is logged in. Right, post content and title will not display.

What it doesn’t do?

Using this post and page template will only restrict the post page. The excerpt or content will still display on archive pages unless those loops run a similar conditional check.