Tja, ik vond dit WordPress theme direct al mooi natuurlijk, met deze fixed (=vaststaand tijdens het scrollen) header. En sowieso omdat ik mijn eigen ontworpen logo erin kon zetten. Al kan ik vreselijk pietlutten over kleine ontberingen.

Zo zijn er stiekem altijd wat dingetjes waar ik tegenaan loop. Zowel op de voorpagina als in de individuele blogpost wordt er geen melding gemaakt van:

  1. De naam van de fotograaf en waar ik de foto vandaan heb geplukt;
  2. Hoeveel reacties ik kreeg op de blogpost;
  3. En op de voorpagina, die link (de Lees verder-link) naar de individuele blogpost.

Ik kan me zo voorstellen dat anderen daar ook mee worstelen. (Als je al wil worstelen in dit leven ;-).) Want deze bovenstaande opties ontbreken te vaak bij themes.

Dus geef ik hier de codes en styles mee voor jou om zelf een child theme in te richten. Een kinder theme (vrij vertaald) is een dochtertheme van het theme dat je graag wilt aanpassen, maar waarvan je vermoedt dat bij een update je mooie wijzigingen verloren zullen gaan. Ik gebruik hier heel simpel een plugin voor.

  1. Fotocredits toevoegen aan je foto’s

    Als je standaard het ‘onderschrift’ bij elke foto in je media toevoegt (naast de alt-tekst t.b.v. je SEO), zal die ‘excerpt’ worden toegevoegd aan je foto.

    Onderstaand de *.php code voor de foto excerpt:

    post_excerpt ) : ?>
    

    Onderstaand de styles voor deze class:

    .smr-photo-caption {
    	position: relative;
    	top: -78px;
    	right: 0;
    	background-color: rgba(0,0,0,0.4);
    	color: rgba(255,255,255,0.8);
    	padding: 8px 11px 9px;
    	font-size: 14px;
    	line-height: 20px;
    	z-index: 600;
    	max-width: 30%;
    	text-align: left;
    	min-width: 140px;
    	transition-delay: .4s;
    	-webkit-transition: all .2s ease-in-out;
    	-moz-transition: all .2s ease-in-out;
    	-ms-transition: all .2s ease-in-out;
    	-o-transition: all .2s ease-in-out;
    	transition: all .2s ease-in-out;
    }
    
    .post-thumbnail:hover .smr-photo-caption {
    	background: rgba(0,0,0,0.7);
    	color: #FFF;
    }
    
  2. Comment-bubbles galore

    Als je net zo’n leuk reactie-ballonnetje wilt als het Twenty Eleven theme, en wat ik hier nu ook gebruik zet je deze code ergens in de entry-header class van je content.php en/of content-single.php:

    
    

    Hieronder de styles.css voor die class: (Note: ik heb de comment-bubble in mijn media gezet, mag je gratis van me lenen. ;-))

    .entry-header .comments-link {
    	background: #eee url(http://jouweigenstedomeinnaam.nl/wp-content/uploads/2016/04/comment-bubble.png) no-repeat;
    	color: #666;
    	font-size: 13px;
    	font-weight: normal;
    	line-height: 35px;
    	overflow: hidden;
    	padding: 0;
    	position: relative;
    	top: -5.8em;
    	right: 0;
    	margin-left: 85%;
    	text-align: center;
    	text-decoration: none;
    	width: 43px;
    	height: 36px;
    	margin-bottom: -36px;
    }
    
    .entry-header .comments-link:hover,
    .entry-header .comments-link:focus,
    .entry-header .comments-link:active {
    	background-color: #1982d1;
    	color: #fff;
    	color: rgba(255,255,255,0.8);
    }
    
    .entry-header .comments-link .leave-reply {
    	visibility: hidden;
    }
    
  3. Hoe een Lees verder link toe te voegen aan je excerpt op de Homepagina

    Zoek in je content.php naar:

    
    

    en plak daaronder, nog voor de afsluitende div van de summary het volgende:

    Lees verder...

Als je onthoudt welke bestanden je hebt aangepast, kun je deze ook in de map van je child theme zetten, net zoals het moedertheme die bestanden weergeeft. Dan blijven je wijzigingen gehandhaafd bij een update van je moedertheme.

Welnu, ik hoop dat ik je met deze aanpassingen een eindje op weg heb geholpen. Mocht je nog vragen hebben, so shoot… 🙂