Add topbar to static html page

Spencer,

You can create a custom page template file for your theme which consists of your HTML page markup. You will need to include your topbar, hopefully it is in your header.php template file in which case you can use <?php get_header(); ?> to include it. Then when you add your page you will be able to select this custom template. There is no other easy way of doing this.

Take a look at the WordPress codex.

Your custom page will look like this:

<?php
/* 
Template Name: Fullscreen 
*/
get_header(); ?>  

<div id="map">
    ... Rest of html
</div>

<script src="http://maps.google.com/maps/api/js?v=3.2&amp;sensor=false"></script>
<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/15/main.js" type="text/javascript"></script>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

<script>
function init(){
  cartodb.createVis('map', 'http://justmytwospence.cartodb.com/api/v2/viz/e8fd87d0-78b3-11e3-a9e9-e7941b6e2df0/viz.json'); }
</script>

<?php get_footer(); ?>

You will also need to enqueue the stylesheet in your theme’s functions.php file.

wp_enqueue_style( 'carto-theme', 'http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css' ); ?>

Related Posts: