XF 1.3 Integrating Wordpress Header w/ Xenforo


Active member
I'm working on integrating my current wordpress header with xenforo so that the integration looks seemless.

I've spent the last few hours copying the html and css to the header.php template, that caused a ton of conflics. Then I tried figuring out what classes were being used by the header and the navigation list. Made a new CSS file and copied those classes to it. Then linked the css file to the header and deleted the old reference CSS file, but to no avail since I was still unable to get the styling right.

And now I am looking at the theme's header php file and this is the code for it.
 <!-- NAVBAR
  ================================================== -->
  <div class="navbar navbar-inverse <?php if ( of_get_option('fullwidth') ) {  }else{ ?>container<?php } ?>">
  <div class="navbar-inner<?php if ( of_get_option('fullwidth') ) { ?> container<?php } ?>">
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  <div class="nav-collapse collapse">

     <?php if(has_nav_menu('header-menu')) { ?>
  <?php wp_nav_menu( array( 'theme_location'  => 'header-menu', 'depth' => 0,'sort_column' => 'menu_order', 'items_wrap' => '<ul  class="nav">%3$s</ul>' ) ); ?>
  <?php }else { ?>
  <ul  class="nav"><li>
  <a href=""><?php _e('No menu assigned!', 'addict'); ?></a>
         <?php } ?>

         <div class="search-login">
            <?php if (of_get_option('login_menu')){ ?>
            <a href="#myModalL" role="button" data-toggle="modal" class="account"><i class="fa fa-user"></i></a>
           <?php } ?>

            <form method="get" id="header-searchform" action="<?php echo esc_url( site_url( '/' ) ); ?>">
               <input type="text" autocomplete="off" value="" name="s" id="header-s">
               <input type="submit" id="header-searchsubmit" value="Search">
               <input type="hidden" name="post_type[]" value="portfolio" />
               <input type="hidden" name="post_type[]" value="post" />
               <input type="hidden" name="post_type[]" value="page" />
       <div class="clear"></div>
  </div><!--/.nav-collapse -->
  </div><!-- /.navbar-inner -->
  </div><!-- /.navbar -->
I just need to figure out a way to integrate this into the xenforo header.php file? any ideas?


Active member
I was close to doing it, but still couldn't get the styling right. I guess i'm not as good with css as I thought.


Active member
Thanks @nttruong but I figured out how to do it. It was a ton of work, but I managed.

For any newbies such as myself, this is how I went about it.

My Wordpress is using a custom theme that I built using a framework. The Theme is responsive and the header had .js files linked to it in order for it to work. So basically, I looked at the source code, copied the the entire page w/ the working header into a code editor. Then I started stripping away all the other html elements until just the header was displaying. The next step is to download the css files and move them, then link the css to the new directory where you moved the css files. Then came the tedious, I had to start stripping the css files of uneeded code that was impacting the layout of the forum. After I was finally finished with that, I just inserted the header html code into the header php template file. My WP theme also needed a .js file in the footer in order of the drop down menu to display correctly. So I just did copied the path for that file and put it in the footer template.

Sorry if these instructions are hard to follow, i'm not the best at writing instructions.


Active member
I'm still learning. Proficient enough to have built several websites. But I don't feel as though I meet the standards to seriously call myself a web designer or developer.