Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

How to separate main content from header.php file in WordPress?


  • Please log in to reply
4 replies to this topic

#1 David7626

David7626

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:08:20 PM

Posted 01 November 2014 - 01:45 AM

I'm using a Simple Skeleton WordPress theme for a site on a local host, and I have trouble trying to align the main content to the center of the screen. I realise it's because the content is nested inside the header content. The only problem is I don't know how to separate them because I don't understand how this theme is designed.

 

This is what the HTML code on the home page looks like.
 

 

 

<div id="header">
<div class="fourteen columns container">
<div id="wrap" class="container"><div id="header" class="fourteen columns">
<div class="inner">
<h1 id="site-title"><a class="text" title="" rel="home"></a></h1></span>
</div>
</div>
<!--/#header-->
    <div id="navigation" class="row fourteen columns"><div class="menu-header"><ul id="menu-main-menu" class="menu"><li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-1277"><a href="index.php">Home</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32"><a href="about.php">About</a>
<ul class="sub-menu">
<li id="menu-item-38" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a rel="m_PageScroll2id" href="">Who am I?</a></li>
<li id="menu-item-39" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39"><a rel="m_PageScroll2id" href="">My experiences</a></li>
</ul>
</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="/work">Work Samples</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="/blog>Blog</a></li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="/contact">Contact</a></li>
</ul></div></div><!--/#navigation-->    </div>
</div>
    <!--activates the slider on homepage-->
<!-- START REVOLUTION SLIDER 4.1.1 fullscreen mode -->
<script type="text/javascript">
 
<!-- END REVOLUTION SLIDER -->
   
<a id="top"></a><div id="content" class="fourteen columns">
 
<div id="post-6" class="post-6 page type-page status-publish hentry">
 
 
<div class="entry-content">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
</div>

 

And the following contains my functions.php and header.php files.

 

FUNCTIONS.PHP

 

 

<?php
 
/**
 * @package Skeleton WordPress Theme Framework
 * @subpackage skeleton
 * @author Simple Themes - www.simplethemes.com
 *
 * Layout Hooks:
 *
 * skeleton_above_header // Opening header wrapper
 * skeleton_header // header tag and logo/header text
 * skeleton_header_extras // Additional content may be added to the header
 * skeleton_below_header // Closing header wrapper
 * skeleton_navbar // main menu wrapper
 * skeleton_before_content // Opening content wrapper
 * skeleton_after_content // Closing content wrapper
 * skeleton_before_sidebar // Opening sidebar wrapper
 * skeleton_after_sidebar // Closing sidebar wrapper
 * skeleton_footer // Footer
 *
 * Sets up the theme and provides some helper functions. Some helper functions
 * are used in the theme as custom template tags. Others are attached to action and
 * filter hooks in WordPress to change core functionality.
 *
 * The first function, skeleton_setup(), sets up the theme by registering support
 * for various features in WordPress, such as post thumbnails, navigation menus, and the like.
 *
 * When using a child theme (see http://codex.wordpress.org/Theme_Development and
 * http://codex.wordpress.org/Child_Themes), you can override certain functions
 * (those wrapped in a function_exists() call) by defining them first in your child theme's
 * functions.php file. The child theme's functions.php file is included before the parent
 * theme's file, so the child theme functions would be used.
 *
 * Functions that are not pluggable (not wrapped in function_exists()) are instead attached
 * to a filter or action hook. The hook can be removed by using remove_action() or
 * remove_filter() and you can attach your own function to the hook.
 *
 * We can remove the parent theme's hook only after it is attached, which means we need to
 * wait until setting up the child theme:
 *
 * For more information on hooks, actions, and filters, see http://codex.wordpress.org/Plugin_API.
 *
 * @package WordPress
 * @subpackage skeleton
 * @since skeleton 2.0
 */
 
// function my_custom_creditlink(){
// $credits = 'Site by <a href="http://example.org">Your Company Name</a>';
// return $credits;
// }
// add_filter('skeleton_author_credits','my_custom_creditlink');
 
/*-----------------------------------------------------------------------------------*/
/* Before Content - skeleton_before_content($columns);
/*-----------------------------------------------------------------------------------*/
if ( !function_exists( 'skeleton_before_content' ) ) {
global $post;
function skeleton_before_content($columns) {
// Specify the number of columns in conditional statements
//
// If necessary, you can pass $columns as a variable in your template files:
// skeleton_before_content('six');
//
// Set the default
if (is_page() && !is_active_sidebar('secondary-widget-area')) {
$columns = 'sixteen';
} elseif (is_single() && !is_active_sidebar('primary-widget-area')) {
$columns = 'sixteen';
}
if (empty($columns)) {
 
$columns = 'eleven';
 
} else {
 
$columns = $columns;
}
 
if (is_page_template('onecolumn-page.php')) {
 
$columns = 'sixteen';
 
}
 
// Apply the markup
echo "<a name=\"top\" id=\"top\"></a>";
echo "<div id=\"content\">";
echo "<div class=\"$columns columns container\">";
}
 
}
/*-----------------------------------------------------------------------------------*/
/* Header
/*-----------------------------------------------------------------------------------*/
 
 
if (! function_exists('skeleton_after_content'))  {
    function skeleton_after_content() {
    echo "\t\t</div><!-- /.columns -->\n";
echo "\t\t</div><!-- /(#content) -->\n";
 
    }
}
 
 
 
 
/*-----------------------------------------------------------------------------------*/
/* Footer Credits
/*-----------------------------------------------------------------------------------*/
 
if ( !function_exists( 'skeleton_footer_credits' ) ) {
function skeleton_footer_credits() {
$footer_extras = skeleton_options('footer_extras');
$extras  = '<div id="credits">';
$extras .= $footer_extras;
$extras .= "</div>";
echo apply_filters('skeleton_author_credits',$extras);
}
add_action('skeleton_footer', 'skeleton_footer_credits',4);
}
 
 
?>
 
 

 

HEADER.PHP

 

<?php
/**
 * The Header for our theme.
 *
 * @package Skeleton WordPress Theme Framework
 * @subpackage skeleton
 * @author Simple Themes - www.simplethemes.com
 */
?>
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes();?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes();?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes();?>> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" <?php language_attributes();?>> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--><html <?php language_attributes();?>> <!--<![endif]-->
 
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title><?php
// Detect Yoast SEO Plugin
if (defined('WPSEO_VERSION')) {
wp_title('');
} else {
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
 
wp_title( '|', true, 'right' );
 
// Blog name.
bloginfo( 'name' );
 
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
 
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'skeleton' ), max( $paged, $page ) );
}
?>
</title>
 
<link rel="profile" href="http://gmpg.org/xfn/11" />
 
<!--[if lt IE 9]>
<![endif]-->
 
<!-- Add CSS3 Rules here for IE 7-9
================================================== -->
 
<!--[if IE]>
<style type="text/css">
html.ie #navigation,
html.ie a.button,
html.ie .cta,
html.ie .wp-caption,
html.ie #breadcrumbs,
html.ie a.more-link,
html.ie .gallery .gallery-item img,
html.ie .gallery .gallery-item img.thumbnail,
html.ie .widget-container,
html.ie #author-info {behavior: url("<?php echo get_stylesheet_directory_uri();?>/PIE.php");position: relative;}</style>
<![endif]-->
 
<!-- Mobile Specific Metas
================================================== -->
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
<!-- Favicons
================================================== -->
 
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri();?>/images/favicon.ico">
 
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri();?>/images/apple-touch-icon.png">
 
<link rel="apple-touch-icon" sizes="72x72" href"<?php echo get_stylesheet_directory_uri();?>/images/apple-touch-icon-72x72.png" />
 
<link rel="apple-touch-icon" sizes="114x114" href"<?php echo get_stylesheet_directory_uri();?>/images/apple-touch-icon-114x114.png" />
 
<link rel="pingback" href="<?php echo get_option('siteurl') .'/xmlrpc.php';?>" />
 
<?php wp_head(); ?>
 
</head>
<body <?php body_class(); ?>>
<!-- Google Tag Manager -->
        <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NTVWWZ"
        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-NTVWWZ');</script>
    <!-- End Google Tag Manager -->
 
<div id="header">
<div class="fourteen columns container">
<?php
do_action('skeleton_above_header');
do_action('skeleton_header');
do_action('skeleton_below_header');
?>
    <?php do_action('skeleton_navbar');?>
    </div>
</div>
<!-- Activate Revolution Slider -->
<?php putRevSlider("home","homepage") ?>
 
<?php
if ( is_singular() && current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail( $post->ID ) 
&& ( /
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ))
&&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
$image_attr = array(
'class' => "scale-with-grid",
'alt' => trim(strip_tags( $attachment->post_excerpt )),
'title' => trim(strip_tags( $attachment->post_title ))
);
echo '<div id="header_image" class="row fourteen columns">'.get_the_post_thumbnail( $post->ID, array("HEADER_IMAGE_WIDTH","HEADER_IMAGE_HEIGHT"), $image_attr ).'</div>';
elseif ( get_header_image() ) : ?>
<div id="header_image" class="row fourteen columns"><img class="scale-with-grid round" src="<?php header_image(); ?>" alt="" /></div>
<?php endif; ?>
   
 
 

 

Any ideas? Thanks.



BC AdBot (Login to Remove)

 


#2 Billy O'Neal

Billy O'Neal

    Visual C++ STL Maintainer


  • Malware Response Team
  • 12,304 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Redmond, Washington
  • Local time:02:20 AM

Posted 01 November 2014 - 08:11 PM

What have you tried? Have you tried making a static HTML page (without involving Wordpress) that does what you want it to do?

Billy3
Twitter - My statements do not establish the official position of Microsoft Corporation, and are my own personal opinion. (But you already knew that, right?)
Posted Image

#3 David7626

David7626
  • Topic Starter

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:08:20 PM

Posted 04 November 2014 - 05:44 AM

Sorry I haven't replied, I've been preoccupied with other stuff lately.

 

I haven't tried to making a static HTML page yet. Should I try to do that first, or are there any tutorials on the 'net that can help me arrange the PHP code to change the theme's layout? I've tried looking for things online without much success.



#4 Billy O'Neal

Billy O'Neal

    Visual C++ STL Maintainer


  • Malware Response Team
  • 12,304 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Redmond, Washington
  • Local time:02:20 AM

Posted 04 November 2014 - 05:59 PM

One problem at a time. When you have a static page that has the behavior you want, adding the PHP code in the right spots should be fairly easy. Your problem isn't with Wordpress or PHP, it's with the CSS necessary to display the page you want.

Billy3
Twitter - My statements do not establish the official position of Microsoft Corporation, and are my own personal opinion. (But you already knew that, right?)
Posted Image

#5 David7626

David7626
  • Topic Starter

  • Members
  • 29 posts
  • OFFLINE
  •  
  • Local time:08:20 PM

Posted 06 November 2014 - 06:00 PM

Thanks. I've figured it out with the HTML page I've created as a guide, and I've applied the changes in the CSS in WordPress.

 

Case solved. :)






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users