Creating a New Template « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Sentence

Creating a New Template

7 posts from 3 voices

Started 10 months ago by outtacontext
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

template

outtacontext
Member

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.

Posted 10 months ago #

Devin
Moderator

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

Posted 10 months ago #
outtacontext
Member
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.
Posted 10 months ago #

outtacontext
Member

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.

Posted 10 months ago #

Devin
Moderator
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; ?>
```
Posted 10 months ago #
outtacontext
Member

That worked! Thanks, Devin.

Posted 10 months ago #
Ismael
Moderator

Hi outtacontext,

Glad that Devin helped you. :)

Cheers,
Ismael

Posted 10 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Creating a New Template

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…