How to style the Motion Theme for WordPress

- by

I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

Let’s take a look at some tweaks and how you can make Motion your own.

This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

Removing default Navigation

This version of Motion includes two areas for navigation menus: one called “Top” is at the very top of the screen, and another is called “Primary” just below the header.

Even without a custom menu active these two menus show some default values: the Top Nav shows pages whereas the Primary Nav shows categories. This can be annoying when you only want one of these navigations to be visible.

To remedy this, head over to Appearance – Menus. Create a new menu here (let’s call it Empty) then place nothing inside. Now select the Empty menu as your Primary Menu and your “no categories problem” is gone.

Primary Navigation and Drop Down Menus

One of the surprising things is that subpages and sub categories do not appear as drop down menus as you’d expect. Let’s make it happen!

The good news is that the CSS has built in support for drop downs on the Primary Menu – all we have to do is make the sub pages show up. Have a look at your header.php file and find this piece of code:

if (has_nav_menu('primary')) {
 wp_nav_menu( array(
 'theme_location' => 'primary',
 'depth' => '1',
 'menu_class' => 'primary_menu') );
 }

The depth parameter (1) tells WordPress not to display sub items in the menu. Let’s change that to 2 and drop down menus now work like a charm below the header!

Please note that this does not work for the Top Navigation menu (where it would be annoying – so let’s not go there).

Bigger Nav Menus

To increase the size of the top navigation, hunt around for this code block in style.css:

#top .top_menu li a {
	color: #fff;
	font-size: .75em;
}

Change the font-size element to 1.5em or similar. You can even add a line like font-weight: bold; to make the menu stand out.

To increase the size or the Primary Navigation (below the header) hunt around for this piece of code – same thing here, change the font-size value:

.primary_menu li a {
 display: block;
 margin: 0;
 font-size: 0.8em;
 color: #fff;
 padding: 0 13px;
}

Removing default Footer Widgets

The footer shows “default widgets” which are often designed to show how a theme would display widgets. They show up when you don’t use widgets – which can be annoying.

To get rid of those just add an empty Text Widget into each widgetised area at the bottom you’d like to leave empty.

Bigger Site Title

In style.css have a look for this block of code:

#header #logo h1 a {
	color: #fff;
	font-size: 2em;
	font-weight: normal;
	text-shadow: 0 0 6px #555;
}

Here you can change the font-size element to say 3em, that’ll be big – play around with it and see what suits you. The colour of the site title is changed by replacing the #fff with your preferred value. If you’d also like to change the hover colour look to this piece of code:

#header #logo h1 a:hover {
 color: #a8ef9d;
}

Amending the Welcome Box

The Welcome Box is the piece of text next to the Site Title, the one that reads “Hey there, thanks for dropping by…”. You may want to provide your own text here, perhaps an author picture even, or you just want to get rid of it.

The code for this is in header.php and looks like this:

<div id="headerbanner">
 <p>Hey there! Thanks for dropping by <?php bloginfo( 'name' ); ?>! Take a look around and grab the <a href="<?php bloginfo( 'rss2_url' ); ?>">RSS feed</a> to stay updated. See you around!</p>
 </div>

Amend as you like, comment out or delete from opening to closing div tag. Alternatively, if you’re building a Child Theme and you don’t want to redefine the entire header file, you can add this piece of CSS to your style sheet to suppress the message:

#headerbanner {
display: none;
}

Removing the Search Box

Even though the Search Box at the top of the screen is a nice touch, it can get in the way if you’re going for a much simpler look. We decided it would be better off in the sidebar as a standard widget.

In header.php you’ll find this call to to PHP script – simply delete or comment it out:

<?php get_search_form(); ?>

Footer Copyright

If you’d like to change the copyright message at the bottom of the page, take a look at the footer.php file and find this piece of code:

<div id="credits">
 <div id="creditsleft">Powered by <a href="http://wordpress.org/extend/themes/" rel="generator">WordPress</a> &amp; <a href="http://www.webdesigncompany.net">Web Design Company</a></div>
 <div id="creditsright"><a href="#top">&#91; Back to top &#93;</a></div>
</div>

Amend this as you like – but please keep in mind that credits should be where credit is due. You’re already getting a free theme, why not link to the people who’ve given it to you.

How to remove Page Titles on full screen pages

Sadly Motion does not target the page titles via CSS so we can’t easily suppress them them. When you display a page without a sidebar you’ll still be left with a smallish page title as opposed to one that has the translucent border. If you want to get rid of this take a look at your page.php file and find the following block of code:

<?php if (!(the_title() == "")){ ?>
<divclass="posttop">
<h2><?php the_title(); ?></h2>
</div>
<?php } ?>

Delete the entire thing and your page titles will be gone. This will not affect pages with the sidebar, as these are targeted by a different fie.

That’s all folks – best of luck and Happy Hacking 😉

Further Reading



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

67 thoughts on “How to style the Motion Theme for WordPress”

  1. Hi Derek,

    sure thing – that’s a bizarre puzzle indeed. You’re absolutely right, it should work but it doesn’t. You’re using the default page template without the sidebar, correct? Because the one with the sidebar works just as we’d expect.

    There are two parts to solving this puzzle. First, have a look at the page.php file (that’s the one without the sidebar). It looks very different from the page-with-sidebar.php file. Not only does the non-sidebar file not create a permalink in the title, it also has a title-empty query before it styles the headline… why is a mystery. Let’s take it out – I’m just adding PHP comment tags here:

    <?php // if (!(the_title() == "")){ ?>
    <div>
    <h2><?php the_title(); ?></h2>
    </div>
    <?php // } ?>

    That should style our headline just like the with-sidebar template – IF the headline would be a link. It’s not though, and it doesn’t need to be. Let’s amend the CSS so that the syling happens regardless of there being a link or not:

    .posttop h2.posttitle a, .posttop h2.posttitle {
    color: #afdaff;
    font-size: 3.4em;
    }

    I’ve added .posttop h2.posttitle (without the a) to the handle so it works both ways. I’ve also increased the font-size to 3.4em to see if it has the desired effect.

    Style away – and let me know if it works 😉

  2. Jay,

    You are AWESOME! I screwed around for an hour with that yesterday and couldn’t get it to work! That totally did the trick. 😀

    Got another query for you: I have a home page which will show no posts (this is primarily a static site). I cut out all the post/comment related code in the home.php template file, and will replace it with custom CSS/graphics to meet the clients wishes.

    Once that’s done, am I able to add “Home” as a menu item in the navigation bar at the top of the page? I’m aware that you can just click on the Site Title and it will take you there, but the “Home” nav option is another client request. Do I need to change anything in the “Reading” settings, as well?

    Thanks so much for the help, Jay! 😀

  3. Thank you thank you, glad it worked!

    Yes you can add a Home tab via the WordPress Menu. Use a custom link, call it Home and make it point tomyour site’s URL (under Appearance – Menus)

  4. For the menu to be active, you need to first create one, then activate it. Once that’s done you can add posts, pages, custom links and categories to the menu.

    Motion has two menu areas, one at the top above the header, one below the header. Make sure you activate your menu where you’d like to see it.

    Good luck!

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.