I’m currently working on a custom built wordpress template for a customer. I’ve finished the homepage (http://www.spotutrecht.com/) and was about to add a new page (http://www.spotutrecht.com/spot-map/).
Now I have the following issue: The style.css only succesfully applies the styles to my homepage, but not to the “spot-map” page. I’ve referenced the stylesheet in the header.php and it a functioning link to the stylesheet apears in the head tag. I’ve clicked on it and it shows my stylesheet. Still, it does not apply the styles to my “spot-map” page.
I’m still new to template building, so maybe (and I hope) I am doing something very obvious wrong, but I can’t figure out what it is.
My header.php:
<?php
/**
* The header for our theme.
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Spot_Utrecht
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome Icons -->
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>
<!-- Stylehsheet.css -->
<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">
<?php wp_head(); ?>
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'spotutrecht' ); ?></a>
<div class="page-wrap">
<!-- HEADER
================================================== -->
<header class="site-header" role="banner">
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="social-buttons">
<a href="https://www.facebook.com/spotutrecht030" class="badge social facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/spot_utrecht" class="badge social instagram" target="_blank"><i class="fa fa-instagram"></i></a>
</div>
</div>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav navbar-right'
) );
?>
</div><!-- container -->
</div>
</div>
</header>
My spot-map/crowdfunding page
<?php
/*
Template Name: Crowdfunding
*/
get_header(); ?>
<section id="spotbanner-otherpages">
<article>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6 logo_container">
<img src="<?php bloginfo('stylesheet_directory') ?>/assets/img/spot_square.png" alt="SPOT Logo">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</article>
</section>
<section class="frontpage white">
<article>
<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<h1>SPOT kaart van Utrecht in de maak door Rood Gras</h1>
<p class="lead">Samen met Utrechtse illustrator Rob van Barneveld is SPOT bezig om een alternatieve kaart van Utrecht te ontwerpen. Hierbij wordt de toerist tips gegeven voor koffiezaken en die anders wellicht onontdekt zouden blijven. En hierbij hebben ze jullie hulp hard nodig!</p>
<p>Het idee ontstond doordat de Utrechters vinden dat hun stad meer te bieden heeft dan de gebruikelijke toeristische hotspots. Utrecht barst van de leuke kleine zaakjes en met een getekende kaart hopen ze hiervoor meer reclame te kunnen maken. </p>
<p>Het uiteindelijke doel is een reeks plattegronden samen te stellen met behulp van diverse lokale vormgevers, elk met een eigen thema. De kaarten wordt uiteindelijk in gelimiteerde oplage gezeefdrukt op A0-formaat en als poster geprint met RISO op A3-formaat bij Kapitaal. Ook wordt er samen gewerkt met hostels en zal de plattegrond in kaartvorm worden verkocht om de bekendheid te vergroten</p>
<h2>Wie is Rob van Barneveld?</h2>
<p>Rob van Barneveld is een Utrechtse illustrator met kenmerkende stijl die werkt onder de naam Rood Gras. Momenteel bekend van zijn kopjes en strips, maar binnenkort van de plattegrond! Hij werkt voor o.a. De Correspondent en VPRO en heeft een succesvolle webshop. </p>
<h2>Waarom deze plattegrond?</h2>
<p>Met deze plattegrond brengt SPOT je op andere plekken. SPOT kan op deze manier in de behoeftes van de toeristen en nieuwe utrechters voorzien. Velen worden op dit moment naar de standaard plekken gestuurd, maar âact like a localâ en ga van de gebaande paden af. SPOT vindt het belangrijk dat Utrecht niet alleen herkend en bekend wordt door haar grachten en domtoren maar ook herkend en bekend wordt door haar initiatieven, koffie, kroegen en etc en te voorzien in een beleving. Door deze overzichtelijke plattegrond brengt SPOT de mensen daar. Daarnaast wordt het ook nog eens een super souvenir van de stad Utrecht. </p>
<h2>Waarom het thema koffie?</h2>
<p>Het aantal koffiezaken in Utrecht is in 10 jaar geëxplodeerd en stuk voor stuk zijn ze razend populair. Maar wat maakt ze onderscheidend? En hoe komen toeristen er terecht? Rob van Barneveld maakt (in opdracht) kopjes en ander servies met een grappige afbeelding; een plattegrond over koffie sluit hier natuurlijk perfect bij aan! </p>
<h2>Waarom financieel bijdragen?</h2>
<p>Momenteel is deze crowdfundingpagina erzodat mensen geld kunnen bijdragen om het project te realiseren. Afhankelijk van het bedrag dat in wordt gelegd kunnen verschillende bedankjes worden verkregen. Waarom zou je dit doen? Omdat je zo lokale vormgevers steunt, je nieuwe Utrechters en bezoekers helpt te ontdekken wat deze stad zo ontzettend tof maakt en je er een bijzondere beloning voor terug krijgt. En vooral: omdat wij jou dan ontzettend dankbaar zullen zijn!</p>
<h2>Maar wat is die beloning dan?</h2>
<p>Wanneer je een bepaald bedrag doneert, krijg je daar het volgende voor terug:
<table class="crowdfunding">
<tr><td class="price">â¬10</td> <td class="reward">een plattegrond</td></tr>
<tr><td class="price">â¬25</td> <td class="reward">een Rood Gras ansichtkaartenset en een plattegrond</td></tr>
<tr><td class="price">â¬50</td> <td class="reward">een Rood Gras koffiekopje en een plattegrond</td></tr>
<tr><td class="price">â¬100</td> <td class="reward">een Rood Gras gepersonaliseerd koffiekopje en een RISO poster</td></tr>
<tr><td class="price">â¬150</td> <td class="reward">een Rood Gras ansichtkaartenset, twee koffiekopjes en een RISO poster</td></tr>
<tr><td class="price">â¬175+</td> <td class="reward">een zeefdruk van de plattegrond</td></tr>
</table>
</p>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
</article>
</section>
<section class="frontpage blue">
<article>
<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<div class="icon-container">
<i class="fa fa-clock-o" name="Clock Icon"></i>
</div>
<h1>Opening Hours</h1>
<p class="center">
Wednesday: 10:00 - 18:00 <br>
Thursday: 10:00 - 18:00 <br>
Friday: 10:00 - 18:00 <br>
Saturday: 11:00 - 18:00
</p>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
</article>
</section>
</div><!-- page wrap div -->
<?php get_footer(); ?>
You have missed one closing braces for span.reward class.
Close that selector and the styles will get applied.