and thanks for you guys all being so awesome.

Hello and thanks for you guys all being so awesome.

I am in the process of building my site and I have a theme which I love and hope to keep using. However I need to have 2 more templates which do not exist in the theme.

What is the best way for me to create a template (One being actually fullscreen) and the other being somewhat wider which will allow me to use the nav bar from the current theme and the new custom pages (destiny.gg/bigscreen - for an example of the design I'm trying to make)

Are there any resources/quick ways to make simple themes? (literally the one I really need just spans the entire page and I would like to add the site's navbar to it)

Thanks!

  • Ivan

    Hey Stewart,

    Hope you are having great weekend so far and thanks for the question!

    That really depends on the theme you are using.
    Usually it is fairly easy things to do, but then there is themes that might require a little bit more work. For example if the theme uses some kind of visual editor.

    Usually what should work is copy some of the existing templates and add styles to the header and the body/page something like

    .site-content{
        width:100%;
    }

    We also have a blog article on how to easily create theme templates. You can take a look at it.

    You can also tell us what is the theme and we will help you to create the templates, or even make them if you need so. :slight_smile:

    Thanks,
    Ivan

  • Stewart

    Thanks so much for those links! I will definitely take a look in to it - I think I was doing the wrong thing in making a child theme and stuff like that.

    I might be okay to do that but if I could work with someone or have you help create a template (as mentioned) that would be even more incredible!

    My theme is here: http://www.themehorse.com/theme-instruction/ultimate/
    I have enabled support access to my site (http://abraxas.pw)

    The desired page-type/design type can be found here: http://www.destiny.gg/bigscreen (essentially a full width page and menu/nav bar (preferably using bootstrap which I don't think my current theme is using)

    For bonus points/even more respect I the second template I'm looking for is essentially a blogpost format which is a bit wider and which would allow the embeds (video / chat) from this page which I hardcoded to work properly: http://theabraxas.us/

    So grateful or all of your help!

  • Michelle Shull

    Hey there, Stewart!

    Ultimate isn't our theme, and it's not one we have access to test with, but we're more than happy to help you create a new template. Have you checked out the links Ivan shared? Is there a part you're getting stuck on?

    I've got a few more links here on creating a custom template, but it basically boils down to copying the content of an existing template from your theme, renaming it to reflect the content, and making any changes you need to the file itself so it displays how you want.

    After that, you may need to do a little polishing with CSS, but all in all it's a fairly simple task to take on. : )

    http://line25.com/tutorials/how-to-create-a-wordpress-custom-page-template
    http://www.wpbeginner.com/wp-themes/how-to-create-a-custom-page-in-wordpress/

    Hope this helps!

    • Stewart

      Thanks for the reply. I did look at the link Ivan shared, right now I'm actually sitting down to work on this and the first step I am confused with is that I want to import bootstrap in to this page. I added the files to the css folder in the theme but I need to call it for the page template.

      The second issue is that I have the sample template from a previous page - as the article suggested - but I am uncertain how to _just_ import the menu.

      The existing template looks like this:
      <?php get_header(); ?>

      <?php

      /**

      * ultimate_before_main_container hook

      */

      do_action( 'ultimate_before_main_container' );

      ?>

      And so on, so I'm not sure how to _just_ get the menu portion from the existing templates - I'm sure there is some thing like do_action ('menu') or whatever, I just don't know how to find it/where to start looking.

      Essentially I just want the following:

      1) bootstrap added so I can use it for design.
      2) the nav-bar / menu which is being used for the rest of the site at the absolute top of the page (see: http://destiny.gg/bigscreen for an example of what I mean. I want my menu on the top like that page)
      3) 100% width and height (which I have done by adding the css to the top of the php file (I think that's the right place?))
      4) The ability to have the content I add (after selecting 'new page' -> selected template -> be able to type in the content (using bootstrap css stuff) to create the video and chat embeds.

      I am looking at your two links now but if there's anything from the above list you have suggestions on, that would be great.

      Again, I'm not looking to really do anything with the theme itself, this is pretty much going to be a standalone template which has the menu as the _only_ pre-existing thing.

      Thanks!

    • Stewart

      Here's an update on that:

      http://belsaas.abraxas.pw/herpderp/ - as you can see I got the menu working but I now need the contents of the page editor screen to fill in beneath it - any idea how to accomplish that?

      Here is the code I've written: http://pastebin.com/DF2nJDPk

      Here is my current code (as you can see I've hardcoded all of the menu items...so another way to do that would be preferable.

  • Michelle Shull

    Hi, Stewart!

    First off, here's a resource on enabling Bootstrap in a WordPress theme, and how to call it. If your current theme is already using Bootstrap, this is a lot simpler: http://marcoghislanzoni.com/blog/2013/10/25/adding-bootstrap-3-0-support-to-your-wordpress-theme/

    As for your nav menu, that's typically called in header.php. Assuming you do not want the other elements in your theme's header.php, this means you'll need to create a second header file that you call on this template page.

    In twentythirteen, a default WP theme, for example, that's simply:

    get_header();

    And the part of the header file that calls the nav menu is this:

    <div id="navbar" class="navbar">
    				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
    					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
    					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
    					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    					<?php get_search_form(); ?>
    				</nav><!-- #site-navigation -->
    			</div><!-- #navbar -->

    So, if I were working with twentythirteen, and I wanted two separate header files, I would copy this part of the header.php into a new file, say header2.php, along with the opening and closing PHP tags. Then in the new template, rather than using get_header, I'd use get_header2.

    This should prevent you from having to hardcode your menu, which is going to be a pain in the neck to maintain through plugin, theme, and core updates.

    Hope this helps!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.