Creating a Blog Like This One

Interested in a fancy blog like this one? Just follow this guide and you’ll get an awesome lookalike! Okay, maybe it’s just a reminder for myself what I’ve got to do when I’ve finally broken my WordPress installation

Install WordPress

  • Download a fresh copy of WordPress from its download site
  • Upload and unpack it to a directory on your webserver
  • Let a subdomain point to that directory
  • Go to that subdomain and follow installation steps (creating database and stuff)

Install and activate plugins

Install features

Change settings

In admin panel go to Settings.

  • General
    • Adjust Tagline
    • Adjust Timezone
    • Set Date Format to F jS, Y
  • Writing
    • Remove Update Services
  • Discussion
    • Uncheck all Default article settings
  • Media
    • Set Thumbnail size to 256 x 256 px
    • Set Medium size to 512 x 512 px
  • Permalinks
    • Activate Month and name
  • PhotoSwipe
    • Set Thumbnail Width and Height to 256 px
    • Check Don’t use Masonry
  • External Links
    • Check Apply Globally, Apply to Text Widgets, Treat Subdomains as Local, Add Icons, Open in New Windows and Exclude HTML Code Blocks
    • Uncheck Auto Convert Text Urls and Add No Follow

Install and activate theme

Customize appearance

In admin panel go to Appearance > Customize.

  • Avatar
    • Upload an image > Upload logo (don’t use Logo option because other than Avatar it won’t resize)
  • Blog
    • Show full posts on blog > Yes
  • Comment display
    • Show comments on > Comments not displaying
  • Widgets > Primary Sidebar
    • Remove widgets except Search and Categories
    • Add text widget with title “About” and about text
  • Custom CSS
    • Set following

Custom CSS 

.site-avatar {
    border-radius: 0;
}

.entry {
    margin-bottom: 3em;
}

@media (max-width: 34.375em) {
    .main {
        padding-top: 0em;
        margin-top: 1.5em;
    }
}

@media (min-width: 34.375em) {
    .main {
        padding-top: 3em;
    }
}

a.external_icon {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

Customize theme files

In admin panel go to Appearance > Editor > Author (preselected).

Edit Search Form (searchform.php)

Replace title="<?php esc_attr_e( 'Search for:', 'author' ); ?>" by placeholder="<?php esc_attr_e( 'Search', 'author' ); ?>"

Edit Theme Footer (footer.php)

Insert before echo wp_kses_post( $footer_text ); 

$footer_text = 'by <a href="https://www.bellhaeuser.it/" target="_blank">Niels Alexander Bellh&auml;user</a>';
if (is_single()) {
    $footer_text.= ' &middot; <a href="/wp-admin/post.php?post=' . get_the_ID() . '&action=edit" rel="nofollow">Edit</a>';
    }
$footer_text.= ' &middot; <a href="https://www.bellhaeuser.it/contact" target="_blank">Contact</a>';
$footer_text.= ' &middot; <a href="https://www.bellhaeuser.it/imprint" target="_blank">Imprint</a>';

Edit Theme Functions (functions.php)

Insert anywhere 

function protected_shortcode($atts, $content = null) {
    if (is_user_logged_in() && !is_null($content) && !is_feed()) {
        return $content;
    }
    return preg_replace('/\S/', '*', $content);
}
add_shortcode('protected', 'protected_shortcode');

Customize plugin files

In admin panel go to Plugins > Editor > PhotoSwipe Masonry.

Edit photoswipe-masonry/photoswipe-masonry.php

Comment <button class="pswp__button pswp__button--share" title="Share"></button> out.