Setup a WordPress Theme

This tutorial gives you a brief overview of the general WordPress and Warp framework setup.

Installation

Setting up a Warp theme follows the standard WordPress installation procedure and works like with any other theme.

  1. Download WordPress from the WordPress website.
  2. Setup a new WordPress install.
  3. Install and activate your theme.

For more information, take a look at the official WordPress documentation.

Setup a demo package

A demo package is a full WordPress installation, which includes the theme and sample data responsible for the layout and setup of our demo. This is great, if you don't want to start from scratch or just to have a peek at how everything is put together.

Troubleshooting

If the installation does not work and you get an error message, you might want to try installing the theme manually.

  1. Extract the theme .zip file to a directory on your PC.
  2. Using FTP, upload the theme directory to the /wp-content/themes folder on your webserver.
  3. Go to Appearance > Themes in the WordPress administration and the new theme will appear in the overview of installed themes.
  4. Hit Activate to activate the newly installed theme.

You can find further guidance on troubleshooting and PHP problems in the Installation issues article.

Assigning widget positions

When you have existing content in your Wordpress installation, activating your theme will most likely make your site look a little weird. The reason for that are Widgets that are assigned to default positions that don't fit with the theme. We can improve that by assigning them to better positions available in our theme.

Navigate to Appearance » Widgets. As a first step, you might want to drag most widgets to the Disabled Widgets position. In our example, those widgets are located in the Search position. We'll remove all widgets here except for the actual Search widget.

Drag and drop to disable widgets

Check your site, it should look less cluttered now. From this state on you can now assign widgets to the several available positions in your theme. For an overview of all widget positions in your theme, check the Features » Layouts page of the theme in our online demo installations.

Setup the menus

To tell your theme what should be rendered as your main navigation, we need to setup a menu in Wordpress and assign it as our main navigation.

First of all, you need to create a new menu and add your menu items. For detailed instructions, see the WordPress documentation. In this example we add all existing pages by default and remove one that we do not want.

Create a menu

Now we just need to select the freshly created menu to be used as the main navigation on our site. Hit the Manage locations tab on the top and select the menu from the dropdown.

Assign menu to be used in the theme

Menu on small devices

The default menu will be hidden on small devices. You can and should use the offcanvas position to have a mobile friendly version of your menu. The offcanvas element can be toggled from a menu icon. You can also publish other widgets in this position, but a menu is the most likey thing you'll want in any case.

Use a custom menu to be displayed as an offcanvas menu

Menus in any position and menu styles

You can create any number of menus you like and publish them as a Custom Menu widget in the Widget area of the Wordpress backend. You can assign that widget to any position you like.

There are three different menu styles, the Mega dropdown menu as a main menu, the Accordion menu in sidebars and the Line menu in the toolbar or footer. Warp automatically styles the menu according the position it is published in.

Setup the logo

Setting up the logo in WordPress is pretty straightforward. Just create a Text widget in the Logo position. Now you can edit your widget and enter your markup.

For example use following code:

<img src="wp-content/uploads/logo.png" width="200" height="50" alt="logo" />

Warp 7 also provides the logo-small position, where you can display an alternative logo image for smaller viewport sizes.

NOTE If the logo image is not visible on all pages, just add a leading slash before the image path, e.g.: /wp-content/uploads/logo.png.

Add a logo to your theme

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!