Twenty Ten Theme Customize

  • Resolved andy-hawkins

    (@andy-hawkins)


    14 years, 4 months ago

    Hi

    I use the twenty ten theme with success. It is easy to modify, but some challenges came up during my process. I’ve changed the Header image (using Appearence/Header) and it occurs on all my pages so that’s ok until now. My new challenge is this: Is it possible to have one Header on my FrontPage (A Flash Header or Animated Gif) and another Header on all my other pages? I don’t find out how to do it because the Appearence/Header only gives me the solution to put a Header image that reflects to all pages.

    I thought I was finding a good solution and tried the Featured Image option on the right (on one of my subpages to test it out). It seems to work fine if the image are at the same height as the default one. But I want different height on the images. The problem with this is that the menu is disappearing on the subpages. The style (CSS) for the menu is perfect on the FrontPage Header, but when I use a smaller height image on the subpages the menu is gone. I know it is there, but when I tried to adjust the CSS settings it will make problems on the FrontPage.

    I hope anyone can give me a good solution with a brief description.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter andy-hawkins

    (@andy-hawkins)

    I see no answers here yet but I hope someone have seen it.

    In the meantime, I have thought about the problem I’m struggling with regarding the use of various images in the header area. The real problem is that the CSS settings of the menu will be different between the front and the sides. I think the solution here may be to create a template that takes care of the front page. Here is my CSS settings of the menu:

    As you can see I have set position to relative and pushed the location of the menu from top to-292px. The picture I will use on the subpages will be of smaller height. Therefore must #Access have a different value (not -292px).

    #Access {
background: url ("images / menubg.gif") repeat-x scroll 0:00 transparent;
display: block;
float: left;
height: 34px;
margin: 0 auto;
position: relative;
top:-292px;
width: 960px;
}

    use condition in your header.php file

    <?php

    if(is_home()):
    [—-include swf—-]
    else:
    [—-image—–]
    endif;
    ?>

    part of your problem seems to be that you shifted the menu to a position above the header image (with ‘position:relative; top:-292px;’ ) thus making you dependant on the height of #brandiing img

    if you rethink the positioning:
    position the menu absolute in ref to #masthead:

    #masthead { position:relative; }
#access { position:absolute; top:-25px;left:0px }

    then it should be independant of anything influencing the header height.

    i would obviously helpful if one could play with these settings having a link to your site; but it should be ok without.

    Thread Starter andy-hawkins

    (@andy-hawkins)

    Hi chinmoy and alchymyth. Thanks for your help so far. I’m going to test out the proposals that have been received.

    I can tell you a little more about my delicate problem. On the front I want to have a flash header just below the menu. The picture just above the menu will be a standard jpg on all other webpages. So far the issue has been that the two pictures I’m talking about until now only been a common image. Then I did just positioning the menu using CSS. A friend of mine who have asked for help with this wanted, however, subsequently dividing the image into two. Therefore, I have faced some new challenges regarding the menu and css settings. Now I’ll check out the received solutions from you.

    Here is some addresses if it can help in the further process… 

    Frontpage: https://www.multiarena.no/wordpress/
All other pages: https://www.multiarena.no/wordpress/produkter/

    Here is a screenshot:

    https://i26.tinypic.com/2qnrsr9.jpg

    So again:

    FrontPage:

    1) Image 1 (Header – Will be header for all images)
    2) menu
    3) Image 2 (Flash SWF file or GIF if I cannot use swf inside the file… I really don’t know if wordpress allowing flash yet)

    All other pages:

    1) Image 1 (Header – Will be header for all images)
    2) menu

    Thanks for your support so far. I’ll appreciate it very much.

    use condition in your header.php file

    <?php

    if(is_home()):
    [—-include swf—-]
    endif;
    ?>

    Thread Starter andy-hawkins

    (@andy-hawkins)

    I use the standard header.php for the Twenty Ten Theme, but I’m not a super php expert. So I’m wondering where to put your suggested code. Here it is:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * twentyten_filter_wp_title() in functions.php.
	 */
	wp_title( '|', true, 'right' );

	?></title>
<link rel="profile" href="https://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' ); ?>" />
<?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="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?> id="site-title">
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php
					// 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 ), 'post-thumbnail' ) ) &&
							$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; ?>
			</div><!-- #branding -->

			<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></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( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div><!-- #access -->
		</div><!-- #masthead -->
	</div><!-- #header -->

	<div id="main">

    Another question: how should I code inside to include the swf file?

    [----include swf----]

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 * We filter the output of wp_title() a bit -- see
	 * twentyten_filter_wp_title() in functions.php.
	 */
	wp_title( '|', true, 'right' );

	?></title>
<link rel="profile" href="https://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' ); ?>" />
<?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="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?> id="site-title">
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php
					// 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 ), 'post-thumbnail' ) ) &&
							$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; ?>
			</div><!-- #branding -->

			<div id="access" role="navigation">
			  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
				<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></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( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
			</div><!-- #access -->
		</div><!-- #masthead -->
	</div><!-- #header -->

        <!-- Include swf only for home page -->
        <?php if(is_home()): ?>
          <div id="hm_swf">
            <!-- Put here the swf code -->
          </div>
        <?php endif; ?>
        <!-- Include swf only for home page -->

	<div id="main">

    [—include swf —] is not a code. Just I give you the demo. don’t put it.

    see my this block inside the code

    <!– Include swf only for home page –>
    <?php if(is_home()): ?>
    <div id=”hm_swf”>
    <!– Put here the swf code –>
    </div>
    <?php endif; ?>
    <!– Include swf only for home page –>

    You only put your swf code after <!– Put here the swf code –>. If need any css modification so write a css in your css file. like

    #hm_swf {
 clear: both;
 width: 100%;
}

    Thread Starter andy-hawkins

    (@andy-hawkins)

    Chinmoy

    Your code seems clear and reasonable. I will check it out when another friend of mine is ready with the swf file. Meanwhile I will try with a static jpg. If I have a jpg file in this folder: ../wp-content/themes/twentyten/images/image.jpg…. what is the solution to include within <!– Put here the swf code –>?

    Can I use <!– ../wp-content/themes/twentyten/images/image.jpg –>?

    I understand that swf code must be more complex and all that code must be placed between <!– –> to work properly. But until then I will try with a static jpg as mentioned.

    now the code be(according to given image) :

    <!-- Include swf only for home page -->
<?php if(is_home()): ?>
<div id="hm_swf">
<!-- Put here the swf code -->
<img src="<?php bloginfo('template_directory') ?>/images/image.jpg" />
</div>
<?php endif; ?>
<!-- Include swf only for home page -->

    <!– –> is HTML comment tag. Inside content of comment tag will not show on the browser.

    Hope now the problem will be solved.

    If solve, plz mark it as resolved.

    Thread Starter andy-hawkins

    (@andy-hawkins)

    Thanks chinmoy

    That will do it. I saved some couple of hours with research. ??

    Andy

    ok.

    Thanks.
    C
    https://chinmoy29.wordpress.com

    Thread Starter andy-hawkins

    (@andy-hawkins)

    Hi, I have to open this as not resolved. Considered to start a new thread, but since it is an extension for the same topic I chose to continue here.

    chinmoy, I tried this but unfortunately it is not working the way I want. The good news is that your code is working. I put it in header.php as mentioned. But it seems that this is affecting my blog page. My solution is a static page with Front Page = Home and my Posts Page = Blog. I set it up in Settings/Reading in WordPress. So it is working but it only shows up in my Blog Page. So I guess it will only be a tweak. But I’m not a php designer.

    See here (in the menu): https://www.multiarena.no/wordpress/

    “Hjem” (Home in english)is the Frontpage for this site and “Blog” will of course be the blog. But why did WordPress define Blog as Home?

    Thread Starter andy-hawkins

    (@andy-hawkins)

    My request is resolved here:

    https://www.ads-software.com/support/topic/425982

    Jay Capaldi

    (@jay-capaldi)

    Hi Andy and Chinmoy,
    How are you? Thanks so much for this great leasson! Everything works except one problem, I’d really appreciate it if you could help me out. The flash file does work on my home page only and all the jpeg images are in the headings on all the other pages. My only problem is that the jpeg image is still also on my home page, above the flash.
    How can i resolve this? You’re help is very appreciated. Here is my site – capaldicommunicatons.com
    Here is my code for the header.php:
    `<?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”main”>
    *
    * @package WordPress
    * @subpackage Twenty_Ten
    * @since Twenty Ten 1.0
    */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <title><?php
    /*
    * Print the <title> tag based on what is being viewed.
    */
    global $page, $paged;

    wp_title( ‘|’, true, ‘right’ );

    // Add the blog name.
    bloginfo( ‘name’ );

    // Add the blog description for the home/front page.
    $site_description = get_bloginfo( ‘description’, ‘display’ );
    if ( $site_description && ( is_home() || is_front_page() ) )
    echo ” | $site_description”;

    // Add a page number if necessary:
    if ( $paged >= 2 || $page >= 2 )
    echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyten’ ), max( $paged, $page ) );

    ?></title>
    <link rel=”profile” href=”https://gmpg.org/xfn/11&#8243; />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
    <?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();
    ?>
    <script src=”/wp-content/themes/twentyten/scripts/swfobject_modified.js” type=”text/javascript”></script>
    </head>

    <body <?php body_class(); ?>>
    <div id=”wrapper” class=”hfeed”>
    <div id=”header”>
    <div id=”masthead”>

    <div id=”branding” role=”banner”>
    <?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1’ : ‘div’; ?>
    <<?php echo $heading_tag; ?> id=”site-title”>
    <span>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>
    </span>
    </<?php echo $heading_tag; ?>>
    <div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>

    <?php

    // 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 ), ‘post-thumbnail’ ) ) &&
    $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; ?>

    <!– Include swf only for home page –>
    <?php if(is_home() || is_front_page()): ?>
    <div id=”hm_swf”>
    <!– Put here the swf code –>

    <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”940″ height=”198″ id=”FlashID” title=”capaldi web design logo”>
    <param name=”movie” value=”/wp-content/themes/twentyten/images/capcomm.swf” />
    <param name=”quality” value=”high” />
    <param name=”wmode” value=”opaque” />
    <param name=”swfversion” value=”6.0.65.0″ />
    <!– This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. –>
    <param name=”expressinstall” value=”/wp-content/themes/twentyten/scripts/expressInstall.swf” />
    <!– Next object tag is for non-IE browsers. So hide it from IE using IECC. –>
    <!–[if !IE]>–>
    <object type=”application/x-shockwave-flash” data=”/wp-content/themes/twentyten/images/capcomm.swf” width=”940″ height=”198″>
    <!–<![endif]–>
    <param name=”quality” value=”high” />
    <param name=”wmode” value=”opaque” />
    <param name=”swfversion” value=”6.0.65.0″ />
    <param name=”expressinstall” value=”/wp-content/themes/twentyten/scripts/expressInstall.swf” />
    <!– The browser displays the following alternative content for users with Flash Player 6.0 and older. –>
    <div>
    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    <p><img src=”https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif&#8221; alt=”Get Adobe Flash player” width=”112″ height=”33″ /></p>
    </div>
    <!–[if !IE]>–>
    </object>
    <!–<![endif]–>
    </object>
    <script type=”text/javascript”>
    <!–
    swfobject.registerObject(“FlashID”);
    //–>
    </script>

    </div>
    <?php endif; ?>
    <!– Include swf only for home page –>

    </div><!– #branding –>

    <div id=”access” role=”navigation”>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class=”skip-link screen-reader-text”>“><?php _e( ‘Skip to content’, ‘twentyten’ ); ?></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( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
    </div><!– #access –>
    </div><!– #masthead –>

    </div><!– #header –>

    <div id=”main”>

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Twenty Ten Theme Customize’ is closed to new replies.