How to style the Motion Theme for WordPress

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:

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:

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:

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:

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:

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:

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:

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:

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:

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

Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.

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

  1. Jay, I am amazed at the length you go to supporting people that want to tweak the motion theme for wordpress, I love the theme and have tweaked several parts of it for my own site, however, I am scratching my head at one particular tweak i would like to achieve and wonder if you could help, I would like to make the menu buttons much darker than they are, I know they are filled with 1x1pixel images, would I need to edit them or would it be the opacity of them that needs altered? and if so how would i go about this? thank you in advance for your time 🙂

    1. Hi Marc,

      sorry about the epic delay – but better late than never. You have two options here: the first would be to tweak the actual image file (images/blacktrans.png) in Photoshop and make it as dark as you like. Then you upload it back to the server and see if you like your results. This image is used for other elements in this theme so you may get unexpected results.

      Alternatively you can give your buttons a different background colour in CSS. You’ll lose the transparency but perhaps that’s not a problem (your buttons would be solid black for example). To do this add the following code to the bottom of your style.css file:

      .primary_menu {background-color: black;}
      #top .top_menu li {background-color: black;}

      Hope this helps!

  2. hi just catching up with my emails lol, many thanks for the reply, after several attempts of editing the blacktrans.png and trying it out, i found that i did indeed lose transparancy in all tables etc, so i simply renamed blacktrans3.png to blacktrans.png, uploaded it and replaced with the original and got the effect i was looking for, thanks again 🙂

  3. I’m trying to remove the page “titles” from my Motion theme site and I was wondering if you could assist. I’ve been looking thru all kinds of forums on this topic and there are a bunch out there but not having luck finding any related to Motion theme. Not page names in top nav bar but “titles” above the body.

      1. I tried this but it only worked for the page with sidebars. The regular page didn’t match the block of code you referenced.

  4. Hello!

    Could you tell me how to call up (and possibly darken/double up) the transparencies on text areas? I really like how this theme looks but posts and texts don’t seem to be benefitted by the darkened transparency (see link), so it looks like I’d have to darken my background image to compensate.

    Thanks!!!!

    1. Hi Billkwando,

      by default the theme uses the .posttop class to insert a translucent graphic behind each post:

      .posttop {
      background: url("images/blacktrans.png") repeat scroll 0 0 transparent;
      padding: 10px;
      }

      You can soften the effect by adding an opacity parameter (like opacity: 0.5;) but you can’t make it stronger via CSS. The only way to do this would be to open blacktrans.png in an image editor and make it darker, then upload it back to the server. Or if you’re happy to lose the transparency altogether you can opt for a solid colour instead, like a near-black:

      .posttop {
      background: #111;
      padding: 10px;
      }

      Hope this helps!

  5. Hi there I’m back with another wee question, how can I remove the big space between the top of my browser window and my header image to bring the header image up to the top of the window, I managed to get rid of the welcome message block in the header but i seem to be left with this space, thanks in advance 🙂

      1. Hi Jay tried this and it made no difference at all, i tried setting all the values in the searchbox and submit button to zero but made a pigs ear of it, so i rolled it back, been fidgeting with it for a few hours and getting nowhere fast lol, 4am now, will try with a fresh head in the morning lol, will try completely removing all #top .top_menu – #top #search – #top .submitbutton and #header #logo stuff from my style.css tomorrow, because i dont use any of the features and never will, will i need to adjust my header.php if i modify the style.css in this way? thanks in advance

        1. Well you see, removing those elements from the syle.css won’t make them disappear. If there is anything you want to disappear which is currently being styled then you have to set it to display: none; then it will be hidden.

          You only need to amend theme files (such as header.php) if they are printing things out that you don’t want to see or items that are not styled and hence can’t be hidden via CSS.

          Sounds like you’ve got an adventure on your hands there – good luck!

  6. Hello! I hope you are still providing advice for this theme. This post has been very helpful so far.

    Is there a way for me to take that 50×50 pixel transparent image in the header, and make it large enough to be the entire header? Then, eliminate the text portion of the entirely? I’m making a site for a friend and wanted to use his name in a more stylized font as the header, and I created it as a transparent png, but I can’t seem to change the size from that default 50×50.
    Thanks!

    1. Hi Amanda, I guess there are several steps to what you’d like to do. First, replace a file called genericlogo.png with your own header file. It’s located in wp-content/themes/motion/images/. Make it as big as you like, but remember the dimensions. I’m making mine 70×400 for our example. This will repalce the “three-circle-graphic” in front of the text based title, but it won’t display at the right size just yet.

      Next add this code to the bottom of your style.css file to correct this. Replace the width and height values with the size of your own header image:


      #header #logo img {
      height: 70px;
      width: 400px;
      }

      And finally, let’s suppress the output of the text based site title by adding this code just underneath in style.css:


      #header #logo h1, #header #logo #desc {
      display: none;
      }

      Hope this helps!

Add your voice!