Replace “Home” by “Blog” in the menu
Maybe you think the Home entry is not appropriate, because on this page you find basically the blog posts. If you want to distinguish the blog post part from the other pages mentioned in the menu. So you can rename the Home menu link to Blog, or whatever you find appropriate.
Put the code below in the child functions.php file and replace “Blog” with whatever you like.
// Remove the parent function
function remove_the_parent()
{
remove_filter('wp_page_menu_args', 'twentytwelve_page_menu_args');
}
add_action('after_setup_theme','remove_the_parent');
// Set up the new function
function child_page_menu_args( $args )
{
if ( ! isset( $args[‘show_home’] ) )
$args[‘show_home’] = ‘Blog’; // changes the Home menu link to Blog
return $args;
}
// Activate the new function
add_filter( ‘wp_page_menu_args’, ‘child_page_menu_args’ );
Change the content background color
Change the standard silver-gray to whatever color you like and enhance the message of your blog. This changes the header-, content- and footer-color.
Edit the child style.css file :
.site {
padding: 0 24px;
padding: 0 1.714285714rem;
/* background-color: #fff; the old one */
background-color: #FFFFCC !important; /* the new color*/
}
Do not allow comments on pages
Comments on pages usually make no sense, so don’t disturb your readers and remove the comment box from pages.
For the “Default Template”
Edit the child page.php file :
comment out
<?php // comments_template( '', true ); ?>
For the “Full-with Page Template, No Sidebar”
Edit the child page-templates/full-width.php file :
comment out
<?php // comments_template( '', true ); ?>
Footer
Maybe you d’like to show your webmaster link in the footer in order to give a personal touch to the blog you created.
Change the “Webmaster” link
modify the child footer.php file :
1) Put your site URL
Replace the http://wordpress.org URL by your URL : http://yourSite.com/
2) Put a new link title
Replace “Semantic Personal Publishing Platform” by your text like : click for our Website
3) Put a new anchor text
Delete the printf… statement then add your anchor text like : echo “Webmaster”;
4) The code will look like this
<div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
<a href="<?php echo esc_url( __( 'http://yourSite.com/', 'twentytwelve' ) ); ?>" title="<?php esc_attr_e( 'click for our Website', 'twentytwelve' ); ?>"><?php echo "Webmaster"; ?></a>
</div><!-- .site-info -->
Put the “Webmaster” link on the homepage only
For SEO reasons, put the webmaster link only on the home page or at least only on one page.
Modify the child footer.php file :
replace the code here of the <div class="site-info"> here </div><!-- .site-info -->
by this :
<?php if (is_front_page()) { ?>
<a href="http://yourSite.com/" title="click for our Website">Webmaster</a>
<?php } ?>
Background image for all pages
This adds to all your pages (only) a specific background image.
Modify the child style.css file :
.type-page { background-image:url('http://yourBlog.com/wp-content/uploads/2015/08/pic.jpg'); }
Background image for a specific page
This adds to a specific page a specific background image.
Get the page-id by looking at the source code – example : <body class="page page-id-6
Modify the child style.css file :
body.page-id-6 .site-content { background-image:url('http://yourBlog.com/wp-content/uploads/2015/08/pic.jpg'); }
Body background image for a specific page
This will display an image as body background for a specific page only.
Get the page-id by looking at the source code – example : <body class="page page-id-6
Modify the child style.css file :
body.page-id-6 { background-image:url('http://yourBlog.com/wp-content/uploads/2015/08/pic.jpg'); }
Move the menu below a header banner
You can change the default position which is menu above header banner. You can attach the menu below the header banner by moving the code block described below.
Precondition
Use a banner in the header and don’t display the Site Title and the Tagline in unchecking the “Display Header Text” box.
Modify the child header.php file :
</hgroup>
<!– STA moved section –>
<?php if ( get_header_image() ) : ?>
<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”><img src=”<?php header_image(); ?>” class=”header-image” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” alt=”” /></a>
<?php endif; ?>
<!– END moved section –>
<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>
<!– moved section was here –>
</header><!– #masthead –>
Menu background color and entry position
With the following code you can change the menu background color as well as define the horizontal position of the first menu entry.
The solutions concerns :
– the menu distance to the header (margin)
– the menu background-color
– the position of the first menu entry (padding)
Modify the child style.css file :
.main-navigation {
margin-top: 2px; /* personalized from 24px */
margin-top: 0.142857143rem; /* personalized from 1.714285714rem*/
text-align: center;
background-color: #F2D974!important; /* added this line */
padding-left:1em; /* added this line */
}
Change the sub menu color
Modify the sub menu background color as it fits best into your blog.
Modify the child style.css file :
.main-navigation li ul li a {
background-color: #f8ecba;
}
.main-navigation li ul li a:hover {
background-color: #fffbcc;
}
Menu top and fix
Maybe you want the menu being visible all the time at the top of the screen. In order to get this, just add this code to the child style.css file :
.main-navigation {
position:fixed;
top:0;
left:0;
width:100%;
margin:0 auto;
}
Show only excerpts on the home page
For a better overview of your articles as well for SEO reasons, it is recommended to show only excerpts on the homepage.
Edit the child content.php file in adding :
<?php if ( is_search() || is_home() ) : ?>
In order to read the full article, you can add a “read more” link to all posts. You have to add the following code to the functions.php file :
function excerpt_read_more() {
return ' [...] <a class="read-more" title="click here" href="'. get_permalink() . '">read more ></a>';
}
add_filter('excerpt_more', 'excerpt_read_more');
Remove the HTML tag information after the comment box
Maybe the HTML codes below the comment box will disturb the visitors instead of helping them, because most of them are maybe not familiar with the code. If you think your blog will be easier and simpler, you have just to edit the child comments.php file :
replace this : <?php comment_form(); ?>
by this : <?php comment_form(array('comment_notes_after' => '')); ?>
– get post updates by subscribing to our e-mail list
– share on social media :
Nice and practical article, thanks for the code examples. Keep going !
Thank you Robert, glad I could help!