Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
Ask a Question

wordpress theme integration

+4 votes
7.8k views
in Q2A Core by

Hi i have successfully installed qna.

the path is http://blackbox.karthik.sg/testblog/qna

currently i am testing it. using iframe to adopt my theme.

http://blackbox.karthik.sg/testblog/?page_id=56

need to know how do i integrate my wordpress theme header and footer.

since wp-load.php is already there so i dont have to include it.

but how do i integrate without using iframe.

kindly advice

 

2 Answers

+1 vote
by

This is a really good question... good to have it documented, since Q2A is Wordpress integrated in the core and all.  So, here's what you do.

  1. Create a custom theme.
  2. In the qa-theme.php file, all you need is one function, html.  Start with it as follows:

    <?php
        class qa_html_theme extends qa_html_theme_base
        {
            function html()
            {
                $this->output(
                    '<HTML>',
                    '<!-- Powered by Question2Answer - http://www.question2answer.org/ -->'
                );

                $this->output(
                    '<HEAD>',
                    '<META HTTP-EQUIV="Content-type" CONTENT="'.$this->content['content_type'].'"/>'
                );
                
                $this->head_title();
                $this->head_metas();
                $this->head_css();
                $this->head_links();
                $this->head_lines();
                $this->head_script();
                $this->head_custom();

                // wp header goes here
                
                $this->body();

                // wp footer goes here
                
                $this->output(
                    '<!-- Powered by Question2Answer - http://www.question2answer.org/ -->',
                    '</HTML>'
                );
            }    
        }
  3. find your current WP theme's header.php and footer.php files.
  4. add the contents of the header.php file where indicated above, starting after the  <title> tag in the head, since we already have it.
  5. add the contents of the footer.php file where indicated above, stopping before the </html> closing tag, since we already added it above.
  6. Make sure the theme you are copying from is actually the active WP theme, and you should be good to go.  Works with Twenty-Eleven anyway.

NOTE: when adding the header and footer, you will also have to add <?php and ?> tags as necessary, since they include raw html code as well.

If this helped anyone, maybe they could make a wiki page?  Guess I could too, just lazy :)  First, let me know it works.

 

+1 vote
by
For the really lazy, here's my entire code for integrating Twenty-Eleven Theme:

<?php
    class qa_html_theme extends qa_html_theme_base
    {
        function html()
        {
            $this->output(
                '<HTML>',
                '<!-- Powered by Question2Answer - http://www.question2answer.org/ -->'
            );

            $this->output(
                '<HEAD>',
                '<META HTTP-EQUIV="Content-type" CONTENT="'.$this->content['content_type'].'"/>'
            );
            
            $this->head_title();
            $this->head_metas();
            $this->head_css();
            $this->head_links();
            $this->head_lines();
            $this->head_script();
            $this->head_custom();

?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
    /* 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' );

    /* 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();
?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>

            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>

            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>

            <nav id="access" role="navigation">
                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
                <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav><!-- #access -->
    </header><!-- #branding -->

    <div id="main">
<?php

            $this->body();

?>

    </div><!-- #main -->

    <footer id="colophon" role="contentinfo">

            <?php
                /* A sidebar in the footer? Yep. You can can customize
                 * your footer with three columns of widgets.
                 */
                get_sidebar( 'footer' );
            ?>

            <div id="site-generator">
                <?php do_action( 'twentyeleven_credits' ); ?>
                <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
            </div>
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
<?php
            $this->output(
                '<!-- Powered by Question2Answer - http://www.question2answer.org/ -->',
                '</HTML>'
            );
        }    
    }
by
Hi There
i have already completed this by modifying the template.
I forgot to update this questions earlier.

below is the link of working copy of the site

http://www.sitech.edu.in/site/qna/

its not iframe but purely using functions and not with the above method

template code
------------------
<?php
art_page_template('onecolumn-page');

     class qa_html_theme extends qa_html_theme_base
    {
        function head_custom() // add WordPress Header
        {
            $this->output(get_header());
        }

        function body_suffix()
        {
            $this->output(get_footer());
        }
    
    }

?>
--------------------------------------------
if you are using artisteer based templates then the above code will work.

Thanks
by
The problem with that is your html gets all messed up, if you look at the source code, you have two <head> sections, and the <html> tag closes twice.  I guess it works for the most part, though, and is simpler to code.

And you don't need "$this->output()" since get_header() and get_footer() don't return any value, they just echo the code.

Also, I forgot about the sidebar... after $this->body(), there should be a call:

get_sidebar();

but you'll need to do some css editing to get it to display properly.
by
For my case i dont need a sider bar so i did`n used.
anyway thanks for your time and reply.
asked Dec 20, 2011 in Q2A Core by How to achieve this integration?
by
Even easier method is to include the path:


include '/var/www/getd/htdocs/wp-content/themes/gdi/header.php' ;

            // wp header goes here
             
            $this->body();

include '/var/www/getd/htdocs/wp-content/themes/gdi/footer.php' ;

            // wp footer goes here
by
that's exactly what get_header() and get_footer() do, but as I said, this really messes up the html - you won't pass validation for sure!

Also, it makes customization difficult, and causes jquery library to load twice (once for WP and once for Q2A).  On my site I actually remove the Q2A jQuery link as well.
by
Hi NoahY, I ended up having two <body> opening & closing tags with your method. Is this generally okay?

I'm not sure about the implications on validations, but consistency of display across browsers & SEO factors would be very meaningful to me.

I couldn't remove the wordpress <body> tag because it consist of my background and typeset css. It also host my header and everything else that comes before the Q2A's <body> tag. "If" having two <body> tags is not recommended, what would be the best solution ?
Snow Theme by Q2A Market
Powered by Question2Answer
...