How to Change a Theme for Wordpress?

Wordpress has a lot of beautiful themes, but generally we prefers to adapt them for use on our own site.

The modification of a theme comes up against a range of difficulties and often results in disfiguring the site and make it inoperable, leading ultimately to return simply to the default theme.

We will see how to solve most of these difficulties by adopting for example Colourise, which is a nice theme and has the advantage of being very easy to modify. This theme uses a black background and therefore is not suitable for a site of images, however it is not very difficult to reverse the colors and set a white background and black text!

Choose a theme

When choosing a theme, you should not to rely on the colors, titles, images, because they are easy to modify in the stylesheet.

Only really relevant are how sections are placed and the fact that the width is fixed or variable (fluid). These parameters are very difficult to change.
You should also choose a theme for which the code is well designed and easy to change but we can not know that if no information is provided on this subject and this is often the case, so we have to look at the source code.

If you like a theme, but the layout does not suit you, rather than trying to move its elements by tweaking the style sheet, a better solution would be to install another theme whose layout is the one you want and to give it style attributes of the theme you like.

Tweaking the theme

To modify, delete, replace an element or move it to another part of the inteface, you must edit - from the Design section of the administering panel - the following files.

To modify an element, search its selector in the source of the page. It is not required to know PHP to modify the theme, just follow these instructions...

Changing the title

The title is set by Wordpress and taken up by the theme. It is in the setting page that you can edit the title and the slogan.
If you want to replace the title with a logo, this has to be done in the style sheet.

Removing the author

If the site is not collaborative, author's name will always remain the same and is unnecessarily displayed under each title. It is so coded in single.php:

<p class="post-info"> Posted by <? php the_author ();?> | Filed under <? php the_category ( '')> </ p>

That you can replace by:

<p class="post-info">Filed under <? php the_category ( '')> </ p>

Do the same in index.php

Changing the date format

The theme used as example does not take the date format specified in settings, it must be modified directly in index.php and single.php.

<span class="date"> <? php the_time ( 'F jS, Y')?> </ span>

Repeat the format defined in the panel, for example:

<span class="date"> <? php the_time ( 'j F Y')?> </ span>

This depends on your country.

Moving the list of recent posts

It appears in the footer that has the disadvantage of displaying it on the homepage where it is superfluous. Why not put it after the content of articles?

We remove the code in footer.php and add it into single.php. We will have then:

<h3>Recent Posts</h3>
<ul class="col-list"> 
      <?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul> 

<!-- main ends -->

We can use or not the style and you change the title in h3.

You can do the same with the list of recent comments, and delete it if not judged useful. But it would be most suited on the home page that in articles. Place it in index.php following the same process.

No comments

If the site does not allow them (too much spam), how to get rid of references to them? Showing on each post "Comments are not allowed" is unnecessarily negative.

Removes this code in index.php:

<? php comments_popup_link ( 'Comments (0)', 'Comments (1)', 
 'Comments (%)',' comments', 'Comments Off');?> |

In single.php you can remove:

<?php comments_template(); ?>

Amending Meta

It contains the link on the login page, but also several links that could be useless. No reason to have on each page a link to Wordpress, you know where to find it if you want. But how to remove a link in the meta widget?

First solution

Remove the meta widget and add a text widget that you fill with the necessary links ...

A such code will be inserted:

<ul> 
     <li> 
       <a href="https://www.scriptol.com/wp-login.php"> Login </ a> 
     </ li> 
     <li> 
       <a href="https://www.scriptol.com/feed"> RSS </ a> 
     </ li> 
 </ ul>

The domain name will be that at your site.

Second solution before 2.8

A better method but more complicated.

In wp-includes edit the widgets.php file.
In the function wp_widget_meta($args) {

Remove this line:

<li><a href="http://wordpress.org/" title="<?php echo attribute_escape(__('Powered by... ')); ?>">
WordPress.org</a></li>

You can remove also the previous line about RSS2, the feed of last comments.

From the version 2.8 of Wordpress

In wp-includes edit the default-widgets.php file.
In the class WP_Widget_Meta and the method widget remove the links as above.

In the theme

It is possible that the links are not displayed from the widget but directly from the sidebar.php file of the theme.
In this case, edit the file to remove links, with the builtin theme editor.

Replacing the image of the header

The image of the header in Colourise generously occupies half the page, so we will quickly reduce its height.

Most themes have set the default style for body to display an image that is the background of the header, and unfortunately, this theme incorporates the same defect. To have a top menu on a black background, you need the image having a black margin, and it is given to this margin a height of 78 pixels.
We reduce the total height to 240 pixels for example and copy the image under the same name over bg.jpg in images in the folder of the theme.
We must then modify the style sheet accordingly.

The link on the home page

In header.php, it is this code:

<div  id="nav">
....
<a href="<?php echo get_option('home'); ?>">Home</a>

You can replace Home (the label) or move the code elsewhere.

The footer

You may want to reduce its height, after removing the lists it contains. This is done in the style sheet.

Changing colors

You prefer a white background? Edit style.css.

For the background color, replace black by white:

body {
        background-color:black;
}

Titles are here:

#header h1#logo-text a { ... }
#main h2 { ... }

See the source code to know the names of styles to be found in style.css.

See also