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

wordpress theme integration

+4 votes
6,090 views
asked Oct 16, 2011 in Q2A Core by anonymous

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
answered Oct 19, 2011 by NoahY

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
answered Oct 19, 2011 by NoahY
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>'
            );
        }    
    }
commented Dec 24, 2011 by NoahY
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.
commented May 24, 2012 by BTitor2
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 ?
...