Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #13975

    I’d like to create a new, but very simple template for my site. Basically, it will be just an empty page with a black background. I tried creating the template using elements of the header and footer I thought were important but it isn’t working. I’m getting a gray background with nothing in it.

    Here’s the new template’s code:

    <?php
    /*
    Template Name: Past
    */
    ?>

    <?php $style = 'boxed'; ?>

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="<?php echo avia_get_browser('class', true); echo " html_$style";?> ">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <?php
    global $avia_config;

    /*
    * outputs a rel=follow or nofollow tag to circumvent google duplicate content for archives
    * located in framework/php/function-set-avia-frontend.php
    */
    if (function_exists('avia_set_follow')) { echo avia_set_follow(); }

    /*
    * outputs a favicon if defined
    */
    if (function_exists('avia_favicon')) { echo avia_favicon(avia_get_option('favicon')); }

    ?>

    <!-- page title, displayed in your browser bar -->
    <title><?php bloginfo('name'); ?> | <?php is_home() ? bloginfo('description') : wp_title(''); ?></title>

    <!-- add feeds, pingback and stuff-->
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="alternate" type="application/rss+xml" title="<?php echo get_bloginfo('name'); ?> RSS2 Feed" href="<?php avia_option('feedburner',get_bloginfo('rss2_url')); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

    <!-- add css stylesheets -->
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/grid.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/base.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/layout.css?v=1" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/slideshow.css?v=1" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/shortcodes.css" type="text/css" media="screen"/>

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"/>
    <!--<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/js/projekktor/theme/style.css" type="text/css" media="screen"/>-->

    <!-- mobile setting -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <?php

    /* add javascript */

    wp_enqueue_script( 'jquery' );
    //wp_enqueue_script( 'avia-html5-video' );
    wp_enqueue_script( 'avia-default' );
    wp_enqueue_script( 'avia-social' );
    wp_enqueue_script( 'avia-prettyPhoto' );
    wp_enqueue_script( 'aviapoly-slider' );

    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); }

    ?>

    <!-- plugin and theme output with wp_head() -->
    <?php

    /* Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.
    */

    wp_head();
    ?>

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>

    </head>
    <body class="past_background">

    <?php
    /* Always have wp_footer() just before the closing </body>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to reference JavaScript files.
    */

    avia_option('analytics', false, true, true);
    wp_footer();

    ?>
    </body>
    </html>

    And here is the code for the new page I’d like to appear using this template:

    <div class="image_center">
    <img src="http://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past1.jpg" alt="Theda Barra" border="0" />
    </div>

    Here’s what I got when I created that page: http://www.outtacontext.com/wp2/test/

    Can you help me? I just want that image (past1.jpg) to be on a page with a black background. Oh, and I would love to be able to center it both vertically and horizontally. Can you tell me how to do that too?

    Thanks.

    #81541

    Hi outtacontext,

    Take a look at: http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

    You can just use:

    <?php get_header(); ?> to include the header.php and not have to create your own. Otherwise, you can just include your own html page completely.

    So if you don’t want to include any of the content from the template, don’t use the footer or get_header code and just put in your own plain html page below the temeplate info.

    Regards,

    Devin

    #81542

    Thanks for the quick response. I tried that to begin with. I went to the WP codex page and I created this template:

    <?php
    /*
    Template Name: Past
    */
    ?>

    <html>
    <style>
    #past_background {background: #000000;
    }
    </style>

    <body id="past_background">
    </body>
    </html>

    Then I created a new page, applied this template to it and in the page content box put this code:

    <div class="image_center">
    <img src="http://outtacontext.com/wp2/wp-content/themes/sentence/images/past/past1.jpg" alt="Theda Barra" border="0" />
    </div>

    When I published it, I got the black background but no image showed up at all (if I look at the “Visual” form of the content, the image shows so I know the link is correct). See this: http://www.outtacontext.com/wp2/test/

    Looking at the source code for that page, the only thing it’s showing is the code I put in the template, not the code I put in the page.

    #81543

    This is an updated template code:

    <?php
    /*
    Template Name: Past
    */
    ?>

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Untitled</title>

    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/layout.css?v=1" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>
    <style>
    #past_background {background: #000000;
    }
    </style>
    </head>
    <body id="past_background">
    </body>
    </html>

    It still isn’t showing the content I’ve created on a Page that uses this template.

    #81544

    You need to include the loop and the content for the template to show the information you add into the visual editor. So:

    <?php if (have_posts()) : while (have_posts()) : the_post();?>

    <?php the_content(); ?>

    <?php endwhile; endif; ?>

    #81545

    That worked! Thanks, Devin.

    #81546

    Hi outtacontext,

    Glad that Devin helped you. :)

    Cheers,

    Ismael

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Creating a New Template’ is closed to new replies.