MotoPress Content Editor. Drag & Drop plugin for any WordPress websiteTry It Now

The Official MotoPress Blog

Announcements, discussions, and more for MotoPress.

How to cook WordPress themes for MotoPress

We hope you are hungry for professional and simple WordPress tutorial, because we are about to serve your appetite! We’ve prepared an intuitive guide about how to modify Twenty Twelve WordPress theme specially for MotoPress. You need only a few plain ingredients to prepare delicious WordPress theme for any taste.

We are going to use Twenty Twelve theme as a base for our tutorial. So, if you are using Twenty Twelve WordPress theme for your website it’ll be better to copy it and save to your server or PC.

The recipe of successfully made theme is simple but before starting ensure that you have all necessary components. To cook really good WordPress dish you need to have:

  • WordPress. If you still don’t own it (how is it possible?) download it here
  • MotoPress plugin. You can quickly download it from WordPress

When all elements are ready follow step by step directions to achieve yummy result. We do not require deep professional knowledge, all we need is your desire to get tasteful and spicy product.

 

motopress-twentytwelve

 

Here is your cookbook with the detailed instruction within. Let’s start!

 

1. The preparation for cooking appetizing WordPress theme

1.1. First, we need to install WordPress and then install and activate MotoPress plugin.

1.2. Download motopress_dev_kit_tut1.zip from getmotopress.com, then unzip it and copy its contents to the \wp-content\themes\twentytwelve folder.

1.3. Open style.css and add to the comments section the following line:

MotoPress Version: 2

The current option indicates that the theme is made specially for the plugin. MotoPress can’t be launched without this characteristic.

1.4. For the better process understanding go to the documentation and read it carefully.

 

2. Prepare and edit blog template

2.1. It’s better to start theme modification with the main index.php template which includes header, content, sidebar and footer. We need to transfer the code from index.php file to files required for the plugin.

2.2. Let’s start with the header and footer.

2.3. First, we’ll do the header. Copy a static-sample.php file to the twentytwelve\static folder and name it static-header.php.

2.4. Now open static-header.php and change its name to ‘Header’ in comments section.

2.5. Move the whole code including the header tag from header.php to the static-header.php file and save the changes.

2.6. Include wrapper-header in header by replacing the header tag with the following code:

<div id="motopress-main" class="main-holder"><!--Begin #motopress-main-->
	<header id="masthead" class="motopress-wrapper site-header" role="banner">
		<div class="container">
			<div class="row">
				<div class="span12" data-motopress-wrapper-file="wrapper/wrapper-header.php" data-motopress-wrapper-type="header" data-motopress-id="<?php echo uniqid() ?>">
					<?php get_template_part('wrapper/wrapper-header'); ?>
				</div>
			</div>
		</div>
	</header>

Save header.php.

2.7. Apply the same changes to the footer. The first thing you need to do is to create static-footer.php and name it ‘Footer’.

2.8. Open footer.php, copy footer tag and paste it to static-footer.php. Save static-footer.php.

2.9. Include wrapper-footer to footer. Replace footer tag with the following:

<footer id="colophon" role="contentinfo" class="motopress-wrapper footer">
	<div class="container">
		<div class="row">
			<div class="span12" data-motopress-wrapper-file="wrapper/wrapper-footer.php" data-motopress-wrapper-type="footer" data-motopress-id="<?php echo uniqid() ?>">
				<?php get_template_part('wrapper/wrapper-footer'); ?>
			</div>
		</div>
	</div>
</footer>
</div><!-- #motopress-main -->

Save footer.php.

2.10. By using the code below include static-footer to wrapper-footer.php in a wrapper folder.

<div class="row">
	<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-footer.php">
		<?php get_template_part("static/static-footer"); ?>
	</div>
</div>

Save wrapper-footer.php.

2.11. Open the wrapper folder and put static-footer into the wrapper-header.php file. You can do it using the following code:

<div class="row">
	<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-header.php">
		<?php get_template_part("static/static-header"); ?>
	</div>
</div>

Save wrapper-header.php.

2.12. So, you have achieved the first results! Header and Footer are ready and now it’s time to play with the page contents. Open index.php and place the whole tag code <div id="primary"... to the loop-blog.php file. This file is easily accessible in the loop folder of your theme. Save loop-blog.php

2.13. Instead of the replaced code and get_sidebar() function, it’ll be better to include loop-blog.php to the index.php file. Then wrap in the sidebar to the clearly understandable for the plugin code, adding the next:

<div class="motopress-wrapper">
	<div class="container">
		<div class="row">
			<div class="span9" data-motopress-type="loop" data-motopress-loop-file="loop/loop-blog.php">
				<?php get_template_part("loop/loop-blog"); ?>
			</div>
			<div class="span3" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">
				<?php get_sidebar(); ?>
			</div>
		</div>
	</div>
</div>

Save index.php.

 

3. Boil Bootstrap and flavour the style!

Confused with the weird words? I just try to awake you.

Okay, I’ll paraphrase. There is one important thing we need to do before start working with responsive templates and begin to create new responsive features. Its name is Bootstrap.

In the downloaded motopress_dev_kit_tut1 you had all minimally required Bootstrap files. If you need the complete Bootstrap functionality, it’ll be better to download its full version from the official website.

3.1. Add Bootstrap to the functions.php file. At the top of the twentytwelve_scripts_styles method add the following:

// Bootstrap
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '2.3.0');
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');

If you theme is based on Bootstrap you don’t need to add js and css.

3.2. Now for the proper representation we are going to rewrite elements of styles. Add the following code at the end of style.css

.home .widget-area, .home .site-content {
	float: none;
	width: auto;
}
body .site {
	max-width: 1250px;
	padding: 0px;
}
footer[role="contentinfo"] {
	max-width: 1250px;
}
@media (max-width: 767px) {
	.container {
		padding: 0 20px;
	}
}

Save style.css.

It was the final spice to hand made Bootstrap dish. Now we can login to WordPress and open the MotoPress plugin. Done? Select the Blog page and see the result. To avoid alerts you must manage access permission to folders and files.

 

motopress_twentytwelve_theme

 

4. Now it’s time to make Page Template ready for the meal.

And again these odd jokes. But all genius is simple, I just want to say that our next goal is to change a page template.
First, we’ll edit one more template. Let’s work with page.php that is responsible for displaying pages.

4.1. Start with creating a loop-page.php file in the loop folder.

4.2. Open page.php and paste its contents <div id="primary"... to loop-page.php.

Save loop-page.php.

4.3. Replace the ported code and get_sidebar() function with the loop-page and sidebar by using the following code:

<div class="motopress-wrapper">
	<div class="container">
		<div class="row">
			<div class="span9" data-motopress-type="loop" data-motopress-loop-file="loop/loop-page.php">
				<?php get_template_part("loop/loop-page"); ?>
			</div>
			<div class="span3" data-motopress-type="static-sidebar" data-motopress-sidebar-file="sidebar.php">
				<?php get_sidebar(); ?>
			</div>
		</div>
	</div>
</div>

Save page.php.

We’ve made everything in the same way as in index.php. The only difference is the name of the loop file.

4.4. For the proper displaying at the end of style.css add the following code:

.page  .widget-area, .page .site-content {
	float: none;
	width: auto;
}

Save style.css.

Following the instructions above you can also change other page templates, such as single.php, 404.php, archive.php and etc.

 

5. The usage of custom spices makes the dish really unique and appetizing.

It’s time to play around with custom code blocks. In the twentytwelve\static folder you are able to create the unlimited number of blocks and add them to the template.

5.1. For the better understanding let’s add some data to the site. Place it to the header on the right side of the logotype.

5.2. In the twentytwelve\static folder create a static-phone.php file and open it right here. Write the name ‘Phone’ in comment below. By using the tag h1 type a phone number. You should get the following:

<?php
/**
* Static Name: Phone
*/
?>
<h1>+9 123 456 789</h1>

Save static-phone.php.

5.3. One of the first details we need to take care of is the addition of the existing block to the header. You can do it by including the file into wrapper-header.php. But we’ll choose more quicker way and add it with the help of plugin.

5.4. First, open the plugin, then drag Custom Code block from the left panel to the right side next to the block with the site logotype. After the replacing, edit the dimension and save the changes. Open a website.

5.5. In the same way you can replace ‘menu’ and ‘header image’ from the existing static-header.php to static-menu.php and static-image.php files. Then with the help of plugin add them in any place you want.

 

Hurray! You’ve got the cookery WordPress badge!

 

You’ve finished the editing and now you have a standard Twenty Twelve theme modified specially for MotoPress.

Despite of our cooking badge you also get the opportunity to:

– create, move and edit content blocks;
– duplicate template pages;
– decide by yourselves where to place the sidebar or remove it at all;
– change content blocks dimensions;
– work with the theme and see the changes at once;
– view the website on all computer devices.

Don’t relax! We still cook in our MotoPress kitchen and are eager to prepare something special for you. Stay tuned.

Have a good meal!

  • Ajay Jadhao

    can I have such a copy of twentytwelve which is ready to be used with motopress?

    • http://getmotopress.com/ MotoPress

      Hi Ajay!

      You can modify your WP theme following this tutorial or you can also use free PrimePress theme which is compatible with MotoPress Layout Editor.

      Here is the link to download PrimePress: http://www.getmotopress.com/themes/primepress/

  • Stanisław Sipowicz

    Ok, so I get this funny message after I enter “Visual Editor” within the plugin itself:

    Fatal error: Call to undefined method Hybrid::parent() in ../visualEditor.php

    What’s that?

    Note: I haven’t modified the TwentyTwelve theme.

    • http://getmotopress.com/ MotoPress

      Hi Stanislaw,

      This message is really funny, as the code of the plugin doesn’t contain method Hybrid::parent() in ../visualEditor.php .

      Hope, it helps.

  • ragesh

    How to use motopress in theme ? when i Install moto press plugin It not support by my theme

    • Ricardo

      I have the same problem. How we can modify the theme to work it with motopress?, Motopress works with all themes or not?..help us motopress team

  • Ricardo

    How to use motopress in theme ? when i Install moto press plugin It not support by my theme

    • http://getmotopress.com/ MotoPress

      MotoPress layout Editor works only with themes made specially for this plugin or with the free PrimePress theme which you can download following the link:http://www.getmotopress.com/layout-editor/

  • Dmitry

    hi ! so please make video tutorial “how to costomize” . because its so hard for me to understanding

    • http://getmotopress.com/ MotoPress

      Hi Dmitry,

      If you are interested in using MotoPress Content Editor in your work, please, follow the link to see the quick guide about how to customize objects with Content Editor http://www.youtube.com/watch?v=i3cYCYAgcuM

      Unfortunately, there are no video tutorials about Layout Editor.

  • David

    is bootstrap 3.x supported? if not, will be any time soon?

    • http://getmotopress.com/ MotoPress

      Hi David, what exactly do you need in bootstrap3.x?

      • David

        oh, nothing really, it’s just that I already have a WP template with that version of BS and I would like to add motopress.

        • Marcus Reinhardt

          Yes, bootstrap 3 support would be good.

          As example: BS3 has a better Grid System as BS2.

          Thanks guys!

        • http://getmotopress.com/ MotoPress

          David, you can add MotoPress, it’s compatible with bootstrap 3 and you won’t have any difficulties

  • P P

    Hi, I was really waiting to use Motopress plugin in WP themes. I have followed all the instructions (several times – in twenty twelve theme) but Motopress doesn’t work – “theme is not supported” .
    Is there any possibility to check my settings/codes from your side? As I bought it, I really would like to use this plugin. Thanks in advance. Peter

    • http://getmotopress.com/ MotoPress

      Hi Peter, could you create a ticket in our support system so our team can check what is wrong? Thank you in advance!