Blog Documentation Book a Demo
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to add my WordPress site header to my Vanilla forum on .com/forum?

ne1upne1up New
in Vanilla 2.0 - 2.8

Is this something that can be done via... I don't know, a php call or just inputting my navbar header HTML somewhere?

Would really appreciate the help! Once I get that and my SSO working I'll have a done forum and can start promoting and writing and it'll be such a relief.

I just need my normal header above the 'brand friendly' theme. I don't really want to embed - I tried that anyway and my pages aren't fluid width, it looks ridiculous, I'd rather not be embedded.

Any help is so appreciated, thank you.

«1

Comments

  • ne1upne1up New

    You can see my navbar/header at this link, but please stay at this link because the rest of the website is adults only (sigh, I know, it's what everyone searched for when they came to my site so I went with it). http://ne1up.com/how-to-start-your-own-webcam-site-and-studio/

    My forum and the theme I want to use is right here: http://ne1up.com/chat/

  • vrijvlindervrijvlinder MVP
    Logo

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • ShadowdareShadowdare MVP
    edited June 2013

    Including WordPress headers would cause many conflicts with Vanilla. What you can do is manually copy in the header from your WordPress theme to the master view of your Vanilla theme. Basically, you would have to design a theme for Vanilla that looks like your WordPress theme.

    Add Pages to Vanilla with the Basic Pages app

  • ne1upne1up New

    Or here just as Vanilla without my header: http://ne1up.com/chat/index.php?p=/

  • ne1upne1up New

    Hmm... Shoot. Thank you for your responses, first off! I don't know why I don't get notified to my email like I thought I was supposed to.

    Well my thinking is that since the forum theme I want to use has such a small navbar, I don't want users to not see my normal header when they click on the forum section. It doesn't have to be the exact WP header, if I could just mimic the look (and links going to the right places), that's what all I want to do. Like basically what @vrijvlinder did, on top of that blue navbar of the forum theme.

    From there I'd start slogging through changing colors to match a bit better, but first, I don't want to confuse anyone or lose that link/navigation on top of my site, whether they're on the forum or WP site.

    I will look for master view section in my Vanilla admin.. This sounds like a break waiting to happen. :)

    Thank you!!

  • ne1upne1up New

    I am in the master .tpl

  • ne1upne1up New

    I was curious, and I'm talking above my paygrade here, but what about inserting the WP header above the forum header in an iframe?

    I have no idea how that is accomplished or anything about it other than people are always talking about putting things in iframes in random places, hah. :)

  • ne1upne1up New

    This is my header.php from my WP theme:

    `<!DOCTYPE html>
    >

    " />

    <title><?php wp_title( '|', true, 'right' );    bloginfo( 'name' ); $site_description = get_bloginfo( 'description', 'display' ); if ($site_description && (is_home() || is_front_page())) echo " | $site_description"; ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/css/font-awesome.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if IE 7]>
  <link href="<?php echo get_template_directory_uri(); ?>/css/font-awesome-ie7.css" rel="stylesheet">
<![endif]-->

<?php wp_head(); ?>

    >

    <?php $logo = of_get_option('logo'); ?> " href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php if ($logo != '') { ?> image" alt="Logo" /> <?php } else { bloginfo('name'); } ?>

    `

    And this is my master.tpl file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-ca"> <head> {asset name='Head'} </head> <body id="{$BodyID}" class="{$BodyClass}"> <div id="Frame"> <div class="Banner"> <ul> {dashboard_link} {discussions_link} {activity_link} {inbox_link} {profile_link} {custom_menu} {signinout_link} </ul> </div> <div id="Body"> <div class="Wrapper"> <div id="Panel"> <div class="SearchBox">{searchbox}</div> {asset name="Panel"} </div> <div id="Content"> {asset name="Content"} </div> </div> </div> <div id="Foot"> <div><a href="{vanillaurl}"><span>Powered by Vanilla</span></a></div> {asset name="Foot"} </div> </div> </body> </html>

    Is this as easy as placing the header in the master somewhere? Hopefully?

  • ne1upne1up New

    Sorry that displayed/came out kind've weird... Doesn't look like it cut anything off though..

  • vrijvlindervrijvlinder MVP

    just copy the code like I did above, from your WP header/menu and stick it in the tpl

    below the div id= Frame before the menu/banner

    why would you go through the trouble of making an iframe for the header? It is simpla html is all . Then you need to style it to get the design tighter.

    Here is an example of a tight design, I made this website for a friend who writes self help books. I incorporated a forum . The entire design looks like it is the same site. But that is because I styled everything including the buttons and font and backgrounds to all match.

    http://www.jessicakreimermanlew.com

    You can do the same thing. Decide what you want to use to base the design on, is it a wp theme or a vanilla theme. you want to emulate. Then just a matter of copying the design style.

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • ne1upne1up New

    OK... Like Sam Jackson said in Jurassic Park, hold on to your butts...

    ... Bonk 1, Me 0. :)

  • ne1upne1up New

    Wow bonk x20 at least. Hm.

  • ne1upne1up New
    edited June 2013

    OK I see something happening. Entirely not how I wanted it but it's at least not bonking..

    I inserted the below code where you suggested @vrijvlinder

  • ne1upne1up New
    edited June 2013

    Using the code below it's displaying very weird at ne1up.com/chat...but I'm at least not getting bonked now.. Any suggestions? So appreciated.

  • ne1upne1up New 
    <div id="topmenu" class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                    <i class="icon-bar"></i>
                </a>

                                <a class="brand logo" href="http://ne1up.com/">
                                    <img src="http://ne1up.com/wp-content/uploads/2013/06/alogo2.png" alt="Logo" />
                                </a>

                <nav id="nav-main" class="nav-collapse" role="navigation">

                    <form class="navbar-search pull-right" method="get" id="searchform" action="http://ne1up.com/">
                        <input type="text" class="search-query" placeholder="Search" name="s" id="s" value="">
                    </form>

                    <a href="http://ne1up.com/feed/" title="Subscribe to our RSS Feed" class="topmenu-social pull-right"><i class="icon-rss icon-large"></i></a>

<a href="/wp-login.php" title="Favorites" class="simplemodal-login topmenu-social pull-right"><i class="icon-heart icon-large"></i></a>

<a href="/wp-login.php"title= "Chat" class="simplemodal-login topmenu-social pull-right"><i class="icon-comments icon-large"></i></a>

<a href="/wp-login.php" title="Add Yourself" class="simplemodal-login topmenu-social pull-right"><i class="icon-plus icon-large"></i></a>

<a href="/wp-login.php" title="Profile" class="simplemodal-login topmenu-social pull-right"><i class="icon-user icon-large"></i></a>

                </nav>
            </div>
        </div>
    </div>
  • vrijvlindervrijvlinder MVP

    You will have to put the full links to the icons or use text in the links instead of icons

    example

    < a href="http://ne1up.com/wp-login.php" title="Add Yourself" class="simplemodal-login topmenu-social pull-right" >Login< i class="icon-plus icon-large">

    an you will need to add style to make it work

    <  div class="container" style="background:#000;color:#fff;"  >
                

 < a style="color:#fff;" rel="nofollow" href="http://ne1up.com/feed/" title="Subscribe to our RSS Feed" class="topmenu-social pull-right">Feed

< a style="color:#fff;" rel="nofollow" href="http://ne1up.com/wp-login.php" class="simplemodal-login topmenu-social pull-right">Login< /a >

< a style="color:#fff;" rel="nofollow" href="http://ne1up.com/wp-login.php" class="simplemodal-login topmenu-social pull-right">Like< /a>

< a style="color:#fff;" rel="nofollow" href="http://ne1up.com/wp-login.php" class="simplemodal-login topmenu-social pull-right">Comment
< a style="color:#fff;" rel="nofollow" href="http://ne1up.com/wp-login.php" class="simplemodal-login topmenu-social pull-right">whateverlinkgoeshere< /a>

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • vrijvlindervrijvlinder MVP

    The thing is you need to make up your mind what theme you will use. It is heaps easier for me to work with php instead of tpl . so I suggest you find a php based theme that allows for more tweaking . Something close to what you want.

    I think it is easier match a wp to vanilla. Use a theme called mantra , it has more flexibility for editing and adding widgets and menus and styles.

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

  • ne1upne1up New

    You mean Vanilla theme? I've been pretty set on the one I have on there now, Brand Friendly.

    As far as WordPress themes, I'm using a Pinterest style with a few functions that I'm also pretty set on and unfortunately Mantra doesn't work at all for me, but thank you.

    I think I'm getting this closer at .com/chat, just working out where I add the styles, within the Vanilla theme css or the master.

    Thanks for your help though, definitely got me almost there! :)

  • ne1upne1up New

    Ah, according to the guide/faq on here, just the master for a banner above. OK. So within the master..

  • ne1upne1up New

    Thank you SO much, creeping my way up on building this house of cards thanks to you. ;-)

Sign In or Register to comment.