• Welcome to Tux Reports: Where Penguins Fly. We hope you find the topics varied, interesting, and worthy of your time. Please become a member and join in the discussions.

Editing WordPress TwentyTen Child Theme

LPH

LPH

Flight Director
Flight Instructor


I have not written much original code over the last 15 years. It is usually a copy/paste exercise as well as asking many people for suggestions and help. I decided to purchase the book Murach's PHP and MySQL by Joel Murach and Ray Harris. The layout is exactly what I needed to get my knowledge confidence up to a point of actually trying to edit PHP code and insert my own.

The following video was posted on YouTube so that my family could see the progress on www.insanepolitics.com. The video shows the work being done on a TwentyTen child theme. There are some errors in it. For example, the image has a height of 1 px and not a width. Next, I had to change the code for the if statement to show the headline.


Let's start from the beginning. The index.php, functions.php, and style.css were modified. These files sit in a child theme of the TwentyTen theme.

A child theme is easily created by adding a new directory in the themes folder and placing a style.css file with comments sitting at the top naming the theme and pointing to the parent. The template line must point to the parent. The first line of code after the block of comments is to import the style.css from the parent.

Code: 
/*
Theme Name: Tuxreports Politics
Theme URI: http: //www.insanepolitics.com
Description: Politics child theme for the Twenty Ten theme
Author: LPH
Author URI: http: //www.insanepolitics.com
Template: twentyten
Version: 1.3.1
*/

@import url("../twentyten/style.css");

Now you are free to add your CSS. As many people will point out, test your CSS code using Firebug then add it to your style.css.

To change the site title color, change the text to uppercase and a larger font size then use the following code.

Code: 
#site-title a {
color: #03463B;
font-size: 40px;
text-transform: uppercase;
}

To decrease the height of the header image, filters were applied in the functions.php file. Create a file named functions.php if it does not already exist. Place it in your child theme. Add this code.

Code: 
// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 1 ) );

The above code is not original but was found on the WP forums. However, look at the last numbers in the define lines and you will see you can adjust the width or the height by changing those numbers.

Next, I wanted a headline that was 100% across the top of only the home page. Plugins are available but this project was to see if I could create it without using someone else's code. Now I didn't start completely on my own. Theme Junkies News theme has something similar, therefore, I started by trying to understand their code and modifying it.

The following is located at the top of the index.php file, just after the get_header call.

Code: 
<?php

wp_reset_query(); //might fix issue of this showing on pages

if ( is_home() && !is_paged() ) { ?>

<div id="home-featured">
<?php
query_posts( array( 'showposts' => 1, 'tag' => 'featured' ) ); 
if( have_posts() ) : while( have_posts() ) : the_post();
?> 

<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

<a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_post_thumbnail('home-featured-thumb', array('class' => 'entry-thumb')); ?></a>

<hr />

<?php endwhile; endif; wp_reset_query(); ?>
</div><!--end #home-featured-->

<?php } ?>

The biggest hangup was getting this code to only show on the home page. It turns out I kept trying || (OR) and so the headline was showing on all pages. When the AND was used then the code only shows on the home page.

This is the CSS used to get the headline showing at the top position.

Code: 
#home-featured {
font-size: 40px;
font-weight: bolder;
height: 300px;
line-height: 75px;
margin-left: 0px
margin-bottom: 20px;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
}

The image array is still something that I'm trying to understand. I'll tinker with it later today.

The footer was modified by changing footer.php file div id to site-tux and adding new CSS to the style.css file.

Code: 
#site-tux a {
color: #666666;
display: inline-block;
line-height: 16px;
padding-left: 20px;
text-decoration: none;
}

Other changes include changing the CSS to a sticky post.

Code: 
.home .sticky {
background: none repeat scroll 0 0 #D7FCF5;
border-top: 4px solid #000000;
margin-left: -20px;
margin-right: -20px;
padding: 18px 20px;
}

The work is not complete. The 1px image needs to be changed to a solid black image. I might also try to just remove the image.

Hope this helps someone else get started on a WP, PHP, and CSS journey. Let me know if you have any questions or maybe you have a better way to do the work. I love to learn!
Click to expand...
View the Post on the Blog
 
LPH

LPH

Flight Director
Flight Instructor
The top WP toolbar code isn't in this article. Create a php file in the mu-plugins. The code looks like the following:

Code: 
add_filter( 'show_admin_bar', '__return_true' , 1000 );
 
/* Removes parts of the admin bar */
 
function trn_admin_bar_remove() {
        global $wp_admin_bar;
 
        /* Remove their stuff */
        $wp_admin_bar->remove_menu('wp-logo');
        $wp_admin_bar->remove_menu('my-sites');
        $wp_admin_bar->remove_node('search');
        $wp_admin_bar->remove_node('my-account');
}
 
add_action('wp_before_admin_bar_render', 'trn_admin_bar_remove', 0);
 
 
/* Fix the height of the admin bar */
 
function add_wpadmin_styles() {
    echo '<style>#wpadminbar {
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.8);
    min-height: 50px;
    line-height: 28px;
        left: 0;
    min-width: 600px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99999999;
        padding-left: 0px;
        padding-top: 15px;
    !important;
    }</style>';
 
/* Shift labels to the right */
 
echo '<style>
#wpadminbar .quicklinks {
    border-left: 1px solid transparent;
    float: right;
    padding-right: 200px;
}
</style>';
 
 
/* Fix for the header themes */
 
    echo '<style> body {
    position: relative !important;
    top:45px;
    }
    </style>';
}
 
add_action('wp_before_admin_bar_render', 'add_wpadmin_styles');
 
 
/* Builds the menu */
 
function add_trn_admin_bar_link() {
    global $wp_admin_bar;
 
 
if(is_user_logged_in())
{
 
    $wp_admin_bar->add_menu( array(
    'id' => 'trn_login',
    'title' => __('Logout'),
    'href' => __('/community/logout')
    ));
 
}
else {
 
    $wp_admin_bar->add_menu( array(
    'id' => 'trn_login',
    'title' => __('Log in or Sign up'),
    'href' => __('/community/login')
    ));
 
}
 
    $wp_admin_bar->add_menu( array(
    'id' => 'trn_link',
    'title' => __('Tux Reports Network'),
    'href' => __('http://www.tuxreportsnetwork.com')
    ));
 
    // Add sub menu link "Community"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_community',
        'title' => __('Community'),
        'href' => __('http://www.tuxreportsdebates.com/community')
    ));
 
 
 
    // Add sub menu link "Education"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_education',
        'title' => __('Education'),
        'href' => __('http://www.tuxreportsdebates.com/community'),
        'meta'  => array(
            'class' => 'st_menu_download')
    ));
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_apenviro',
            'title' => __('AP Environmental Science'),
            'href' => __('http://www.apenvironmentalscience.com'),
            'meta' => false
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_chem',
            'title' => __('The Chem Book'),
            'href' => __('http://www.thechembook.com'),
            'meta' => false
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_classic',
            'title' => __('Classic Education'),
            'href' => __('http://www.Educlassics.com'),
            'meta' => false
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_green',
            'title' => __('Green Enterprise'),
            'href' => __('http://www.avgreen.org')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_retaining',
            'title' => __('Retaining Teachers'),
            'href' => __('http://www.retainingteachers.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_education',
            'id'    => 'trn_secondary',
            'title' => __('Secondary Classroom'),
            'href' => __('http://www.secondaryclassroom.com')
        ));
 
 
    // Add sub menu link "Entertainment"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_entertainment',
        'title' => __('Dogs Times'),
        'href' => __('http://www.dogstimes.com')
    ));
 
 
    // Add sub menu link "News"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_news',
        'title' => __('News'),
        'href' => __('http://www.tuxreportsnews.com')
    ));
 
 
    // Add sub menu link "Politics"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_politics',
        'title' => __('Politics'),
        'href' => __('http://www.insanepolitics.com')
    ));
 
    // Add sub menu link "Technology"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_technology',
        'title' => __('Technology'),
        'href' => __('http://www.tuxreportstech.com'),
        'meta'  => array(
            'class' => 'st_menu_download')
    ));
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_amd',
            'title' => __('AMD Views'),
            'href' => __('http://www.amdviews.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_android',
            'title' => __('The Android Buzz'),
            'href' => __('http://www.theandroidbuzz.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_apple',
            'title' => __('Apple iPad Buzz'),
            'href' => __('http://www.appleipadbuzz.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_kindlebuzz',
            'title' => __('Kindle Buzz'),
            'href' => __('http://www.kindlebuzz.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_mobile',
            'title' => __('Mobile Questions'),
            'href' => __('http://www.mobilequestions.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_notebooks',
            'title' => __('Notebook Questions'),
            'href' => __('http://www.notebookquestions.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_tabletpcquestions',
            'title' => __('Tablet PC Questions'),
            'href' => __('http://www.tabletpcquestions.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_linux',
            'title' => __('Tux Reports'),
            'href' => __('http://www.tuxreports.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_tech_aggregate',
            'title' => __('Tux Reports Tech'),
            'href' => __('http://www.tuxreportstech.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_technology',
            'id'    => 'trn_tech_win',
            'title' => __('What Is New'),
            'href' => __('http://www.whatisnew.com')
        ));
 
    // Add sub menu link "Unemployed"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_unemployed',
        'title' => __('Unemployed Buzz'),
        'href' => __('http://www.unemployedbuzz.com')
    ));
 
    // Add sub menu link "Staff"
    $wp_admin_bar->add_menu( array(
        'parent' => 'trn_link',
        'id'    => 'trn_staff',
        'title' => __('Staff'),
        'href' => __('http://www.tuxreportsdebates.com'),
        'meta'  => array(
            'class' => 'st_menu_download')
    ));
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_staff',
            'id'    => 'trn_layne',
            'title' => __('Layne P. Heiny'),
            'href' => __('http://www.layneheiny.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_staff',
            'id'    => 'trn_lora',
            'title' => __('Lora J. Heiny'),
            'href' => __('http://www.loraheiny.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_staff',
            'id'    => 'trn_loren',
            'title' => __( 'Loren C. Heiny'),
            'href' => __('http://www.lorenheiny.com')
        ));
 
        $wp_admin_bar->add_menu( array(
            'parent' => 'trn_staff',
            'id'    => 'trn_robert',
            'title' => __('Robert W. Heiny'),
            'href' => __('http://www.robertheiny.com')
        ));
 
 
 
}
add_action('wp_before_admin_bar_render', 'add_trn_admin_bar_link', 1);
 
 
?>
 
LPH

LPH

Flight Director
Flight Instructor
Reworked the image portion of the code.

Code: 
        <?php
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
            the_post_thumbnail( array( 940, 180, true ) );
        }
            ?>

This isn't perfect - the crop is in the middle. Also, duplicate stories are still showing on the frontpage.
 
You must log in or register to reply here.
Top