Add topbar to static html page

Question

I have a WordPress blog, but I am also hosting a standalone static HTML page on the same domain/server (LaughingSquid, if it makes a difference). I'm very new to WordPress and PHP, so I am wondering if there is a relatively simple way to use PHP to add the topbar that appears in my WordPress-based pages to the static HTML page. Is this possible and how would you go about doing it? Thanks.

Answer 1

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' ); ?>

Answer 2

You must require the WordPress Blog Header as per the Codex.

<?php
require('/the/path/to/your/wp-blog-header.php');
?>

Paste this at the top of your standalone page and then try querying your WPDB.

Answer 3

You can add a page directly from the wordpress admin. This page will have the same layout of the rest of your blog.

If you need more info, you can check here.

Hope it helps.