Is there a way to create a template that does not have the site styling associated with it?

Question

I recently completed a WP site for a client and they would like to be able have some static pages added to the site that do not have the header, footer and navigation on it. These pages would then be brought in to various other sites using an iFrame. Being fairly new to WP, I am not exactly sure how to make this happen, but I am thinking that if I create a page template that does not include header.php and footer.php, I may be going in the right direction. Is this correct? What recommendations are there for doing something like this?

Thanks.

Answer 1

Not including header.php and footer.php is a bad idea, as they usually contain the calls to wp_head() and wp_footer(), which are required by Plugins and Theme functionality (of course depending on what you do on your site).

The second thing is that you create invalid HTML.

Depending on your needs there are a variety of solutions for that.

If you just want to remove the styling, you could dequeue style.css at the beginning of your template (before calling get_header()):

wp_dequeue_style( 'style' ); // whatever slug you registered your style.css on

This way you do not deliver the style.css.

But I do not think that this is what you want. If you want to remove the header and the footer of your template (for example the menu on top and the footer links), the best way would be to have a look at the functinon get_header( $name ). As you can see, you can pass a string to it, and when you do, another php file is called.

get_header(); // results in header.php getting loaded
get_header( 'custom' ); // results in header-custom.php

It is the same thing with get_footer().

In your new header-custom.php you can just add the little content that you need, to ensure a correct display and functionality of your site.

To wrap things up, When creating the page in WordPress, you need to select your new page template, and everything else works automatically.

Answer 2

Yes, you're in the right direction. Have you looked into:

<?php get_template_part( $slug, $name ); ?> 

Codex: http://codex.wordpress.org/Function_Reference/get_template_part

It sounds exactly what you need.

Answer 3

The proper way to add styles to WordPress pages is to use wp_enqueue_style function inside a function that hooks into 'wp_enqueue_scripts' action hook.

Something like:

add_action( 'wp_enqueue_scripts', 'my_styles_function' );

function my_styles_function() {
  wp_enqueue_style( 'style1', get_template_directory_uri() . '/css/style1.css' );
  wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/style2.css' );
}

Doing so, all styles enqueued are properly inserted in templates when you call the function wp_head(). This function call is, normally, located inside the header.php file that is included by WordPress in the current template when you call get_header() function.

If you want that some pages have different styles, you can enqueue different styles for different pages. This can be easily done using conditional tags.

Let's assume you have a page template named 'special-page.php'.

Using the conditional tag is_page_template() you can easily add different styles for that custom page template. Example:

add_action( 'wp_enqueue_scripts', 'my_styles_function' );

function my_styles_function() {
  $uri = get_template_directory_uri();
  if ( is_page_template( 'special-page.php' ) ) {
    wp_enqueue_style( 'special-style', $uri . '/css/special-style.css' );
  } else {
    wp_enqueue_style( 'style1', $uri . '/css/style1.css' );
    wp_enqueue_style( 'style2', $uri . '/css/style2.css' );
  }
}

As alternative, instead of using the full url of the style inside wp_enqueue_style call is possible to register styles only once using wp_register_style, and then conditional enqueuing them based on current view. Example:

add_action( 'after_setup_theme', 'my_register_styles' );

function my_register_styles() {
  $uri = get_template_directory_uri();
  wp_register_style( 'bootstrap', $uri . '/css/bootstrap.css' );
  wp_register_style( 'common', $uri . '/css/common.css' );
  wp_register_style( 'single', $uri . '/css/single.css' );
  wp_register_style( 'page', $uri . '/css/page.css' );
  wp_register_style( 'contact', $uri . '/css/contact.css' );
  wp_register_style( 'special', $uri . '/css/special.css' );
}

add_action( 'wp_enqueue_scripts', 'my_styles_function' );

function my_styles_function() {
  wp_enqueue_style( 'bootstrap' );
  wp_enqueue_style( 'common' );
  if ( is_single() ) {
    wp_enqueue_style( 'single' );
  } elseif ( is_page() ) {
    wp_enqueue_style( 'page' );
    if ( is_page( 'Contact Page' ) ) {
     wp_enqueue_style( 'contact' );
    }
  } elseif ( is_page_template( 'special-page.php' ) ) {
    wp_enqueue_style( 'special' );
  }
}

As you can see, when the styles are already registered, to enqueue them you only need to use wp_enqueue_style with the id of the style, that is the 1st argument passed to wp_register_style.

What I said for css is doable in perfecly similar way for javascript files, where you need to use wp_register_script instead of wp_register_style and wp_enqueue_script instead of wp_enqueue_style.

Please note that even if separate css/js in small reusable parts can be useful, it ends up in having different css/js urls linked in your template, where every url need a separate http request to be loaded: so too many css/js in same page are not good for performance.

Sometimes, from page to page, you do not only want ot change the styles and/or the scripts, but you also want to change the header or footer html markup.

WordPress ease that by the use of an argument to get_header and / or get_footer functions. In fact, you can create a lot of different headers and footers, addind a suffix to the files. E.g. you can have: header.php, header-single.php, header-special.php...

After that, in single.php instead of calling get_header() you can call get_header('single') and load the header-single.php instead of header.php (that is still used as fallback if the header-single.php file is not found in theme or in child theme)^*****.

This technique in combination with the conditional asset loading gives the possibility to deeply customize the aspect from page to page in WordPress.

---

^***** Have a look to this question/answer for a more complex/dynamic loading of headers/footers files.