Moonrise

This post explains how to set up your Moonrise theme. If you need help installing the theme, there is a quick screencast in our video section that explains how to install a WordPress theme.

 

Theme Options

After installing the theme, you’ll be directed to the Theme Options page. You can find the theme options by going to the Appearance section in your WordPress control panel and selecting “Theme Options.” Here you can set the options that are available in the theme. You can import our options, which is the ‘.json’ file found in the Sample Content.zip (Demo files), by clicking Options Import / Export.

The options page is broken up into six tabs to help you find the option that you’re looking for.

Header
This section contains options related to the header section of the site such as logo and navigation menu.
Home Page
Here you can choose to include the various sections of your home page as well as upload the images for the various home blocks too. It’s also possible to set a height for each of those home block images if you’d like to vary their height.
Background
The background tab will let you create a background for the site, either a solid color or using an image.
Content
Here you can set options related to the inside pages of the site, including colors, and fonts. You can also choose whether your blog displays the full post or just excerpts. The footer text is added here. Also the options related to the image lightbox are there as well.
Contact
The options for the contact section are handled here. These will populate the both the widget and page template.
Advanced
This tab allows you to change the slugs of your food, staff and service section of the site. It’s important to also re-save your permalinks in the WordPress Settings if you enter new values there or you’ll end up with not found errors.
Also this tab allows you to turn off theme updates and the output of Google Fonts as well as enter any custom CSS that you’d like to use.

Food Menu, Staff and Services

These three sections are built basically the same way. You create a new food item (or staff or service) much like you would a new post. Take the Food section as an example. Go to “Food” in your WordPress control panel and select “Add new food item.” This will open up a quick form for you to enter the information about that item. For Food, you enter the name of the item and then a quick description in the excerpt section. The top right had a spot for you to set the price.

In the right hand column, you’ll notice a spot for “Menu Groups.” The Food, Staff and Services are each organized around these “groups.” These groups function like categories do for posts. You use them to organize like items for display on your site. Each item you create needs to be added to a group in order to be displayed on the front of the site.

In the theme options page, there are tabs for “Menu, Services, and Staff.” Essentially these tabs allow you to pick which groups appear in those sections of your homepage. Say you would like to have your appetizers group listed first in your menu section. Go to the Menu Group 1 drop-down and select “Appetizers” from the available groups there. The home page section has slots for five menu groups. The service section has slots for seven of those groups. The staff section only includes room for one (because they take up so much vertical space).

You can add these groups to your homepage and your website’s inner pages using widgets in Appearance > Widgets or Appearance > Customize > Widgets. Edit the Home Sections to add the widgets you’d like. The widgets’ titles begin with “Home Block – ” and then end with one of these: Menu Group, Staff Group, Service Group.

Moonrise has other custom widgets created by us. See the Home Page section below.

It is also possible to create inner pages for these groups. To do that, go to the Appearance section and select “Menus”. This is the navigation builder. Here’s a quick video to explain how the navigation is set up:

In the left hand column there are boxes for Menu Groups, Staff Groups and Service Groups. If you don’t see these, click the “Screen Options” tab in the top right hand corner. Make sure the checkboxes next to each one is selected.

You can add these groups to your navigation just like you would a page or post category. They will display your items in a nice and orderly fashion.

We’ve incorporated what’s called a “shortcode” that lets you place a food group listing wherever you want. Just copy this code and place it anywhere on a page in Moonrise:

[menu group="tapas"]

Just replace tapas with the “slug” of the menu group you’d like to display. You can find the slug by going to the Food section and selecting “Menu Groups.” The slug will be listed next to each group.

You can use this to create pages that have multiple menu groups per page.


Creating Your Home Page

Here’s how to set up your home page. First go to the “Pages” section in your WordPress control panel. Create a new page. In the right hand column you’ll notice a box labeled “Page Attributes.” In that box choose “Home” from the template drop-down menu. Publish your page.

Next go to the Settings section of your control panel and choose “Reading.” At the top, you’ll notice a option to choose what your “Front page displays.” Choose “A static page” and then select the home page you just created from the drop down menu. You can also specify a page here to serve as your blog (all posts) if you’d like to. Update your settings.

Add your home page just like you would any other page. Customarily, the home page is added to the left hand side of the navigation.

The content for your home page is made up of widgets. There are several “Home Block” widgets that are made specifically for your home page. These work in a similar manner to one another. Take the Home Block – Menu widget. Drag it to the section of the home page where you’d like to have it displayed. That will open up a small configuration panel. In this widget you can choose up to ten menu sections to include and also specify a menu group for each one. That creates the menu block that you see in the home page of the demo.

Here are the widgets specifically made for the home page:

  1. Home Block – Menu Group: displays up to ten menu groups.
  2. Home Block – Service Group: displays up to ten service groups.
  3. Home Block – Slideshow: displays your slideshow (slides are added in Media > Slides).
  4. Home Block – Contact: displays your contact section. Configured in the theme options.
  5. Home Block – Page Content: displays the content from a specific WordPress page.
  6. Home Block – Staff Group: displays the content from the staff group of your choice.

To achieve the appearance of the demo, use one of these block widgets per section of the home page.


Navigation Menus

Earlier in the Food, Staff and Services section we looked at WordPress navigation menus. There’s a video there that can help you out if you have questions getting started with them.

Moonrise offers the option of using social media icons to link to your profiles on various social media services. You can add those by creating “Custom Links” in your menu builder for each service.

Once you’ve created the link, you’ll have a menu item with the name whatever you specified in the label. To change that to the appropriate icon, click the “Screen Options” tab in the top right hand corner. Make sure the box next to “CSS Classes” is checked. Then scroll down and click on the down arrow next to the custom menu item you created. In the box for CSS Classes, enter the class that corresponds to the service you’re using.

Here are a list of the included styles with Moonrise. Just enter the name as it appears below to use that icon.

  • dribbble
  • facebook
  • flickr
  • foursquare
  • forrst
  • google
  • linkedin
  • pinterest
  • twitter
  • youtube
  • vimeo
  • yelp
  • podcast
  • rss

Adding one of the class names above will replace the menu item’s name (label) with the corresponding icon.


Tips & Tricks

This section might grow with time as we add some tips & tricks.

1. Center the logo

If you’d like to center the logo, both the logo image and the text logo, follow the below instructions, relevant to the logo type, and add the custom CSS code to Appearance > Customize > Additional CSS or to a child theme:

Logo image

#logo {
float: none;
}

#logo img {
display: block;
margin-left: auto;
margin-right: auto;
}

Text logo

#text-logo {
float: none;
}

#text-logo a {
display: block;
text-align: center;
}


That completes the set-up of the Moonrise theme. If you have any questions, please feel free to post them in the forum.

Thank you again for your business.

Organized Themes

As the owner of Organized Themes, I'm here to help you create a fantastic website. Let me know how I can help.