WordPress theme customization


by - posted

wordpress theme customizationIn this article, I show you how easy WordPress theme customization can be. I use the Twenty Twelve theme to describe some basic tweaks. You have already to know how to install/activate child themes and a little bit of HTML, CSS and PHP in order to get the most profit from this article.

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 &gt;</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' => '')); ?>

If you enjoyed this article, you can :
– get post updates by connecting to our RSS feed
– get post updates by subscribing to our e-mail list
– share on social media :

2 thoughts on “WordPress theme customization

Leave a comment