Foxy
Here’s how to set up the Foxy Theme. If you need help installing Foxy or WordPress there are screencasts in our video section that will walk you through that. Once the theme is activated, go to the Appearance section of your WordPress control panel and select “Theme Options” to configure your site.
Theme Options
If you’ll look along the top of the theme options page, you’ll see four tabs: General, Newsletter, Background and Styling. These sections will allow you to customize the theme to fit your needs.
General Options
This tab start off by letting you choose between a text or image logo. If you choose text, the site’s title will be displayed. If you choose image, you’ll need to upload an image logo in the next box. To have the background image visible through your logo, make sure you use a transparent PNG file.
Next up is an option to disable the built-in lightbox image viewer. You can also choose among the styles of lightboxes that are bundled with the theme.
The excerpt/full-content option allows you to choose what is displayed by default in your blog section. If you choose the excerpt, only a small portion of your text will be displayed in the archive view. If you show the full content, then the entire post will be displayed unless you use a “read more” tag.
Next up are options to disable the food, staff and services sections of the site if you’d like to. Just check the boxes of any of these areas that you’d like to omit.
The advanced section below that has options that let you tailor the URL slugs of the staff, services and food sections of the site to fit your needs. If you change any of those, you’ll need to go to the Settings section and select Permalinks and then save your permalinks. Otherwise you’ll end up with not found errors.
Lastly there is an option to disable theme updates. If you plan on modifying your theme directly instead of using a child theme, then you’ll want to disable the update notices so you don’t overwrite your changes.
Social Media
To include a service, just enter the URL for your page with that service (like https://www.facebook.com/organizedthemes for my Facebook page) and the theme will include it automatically. To leave any services out, just leave them blank.
You can also choose if you’d like the links to be opened in the same window or a different one.
Newsletter Bar
Foxy has built in support for a Mailchimp sign up box in the header. To sign up for a Mailchimp account, go to www.mailchimp.com and register for free. Once you’ve signed up, select yes to include the sign-up box and enter your text for the submit button. You’ll need to get to bits of information from inside your Mailchimp account.
First is the API key number. To find it, log into your Mailchimp account. In the top right of the navigation bar, you’ll see a link for “Account.” Hover over it and select “API Keys and Authorized Apps” from the list. Here you can create a new API key. Do so and copy the number and paste it into the field provided by the theme.
Next up is your list ID number. You’ll need to have a list for people to subscribe to. Create a new list by clicking “List” in the Mailchimp navigation and following the prompts there. Once you have the list created, hover over “Settings” in the list box and select “List Settings and Unique ID.” Here you can find the list ID for that list. Copy it and paste it into the box provided. Save your changes and your sign-up box will be active.
Background
This tab controls the default behavior of the background in the Foxy theme. First you can choose to have the background be a slideshow or not. If you choose to have a slideshow background, you can also choose the duration of each slide as well as how long the transition takes in milliseconds (1000 milliseconds equals 1 second). You can also choose a random order for the slides to load. This affects each page load, so the order will be randomized each time a person refreshes. If you don’t use a slideshow, this can be a great way to liven up the site still. Next you can choose between the seven built in transition effects if you are using a slideshow.
The next section allows you to upload images for your backgrounds. You can load up to ten images for the default slideshow/background.
Styling
The last tab allows you to customize some of the colors in the theme. To add your custom styles, select yes from the drop down box. All the styles are optional, so you can just change the ones you’d like to. You can enter a hex color code directly into the box (#000000 as black for example) or choose from the color picker. There is also a box at the bottom where you can enter any custom css you’d like to include. Once you’re finished, save your changes and your new colors will be live.
Since version 1.4, it’s also possible to go to change colors with a live preview using the theme customizer. To access the customizer, go to the Appearance section and select “Themes.” Right below the active theme’s name, you’ll see a customize link. Click it to access the theme customizer.
Food, Staff and Services
Foxy includes three optional areas that can be used on your site: food, staff and services. The food section allows you to add food items to build a restaurant or catering menu. Each item includes a title, price and description. The staff section allows you to easily create a staff directory. Each staff member can have a picture, name, job title, bio/description, plus contact information. The services section lets you add the services your businesses provides. It includes a title, price and description.
Each of these sections allows you to create groups so you can organize them as well as add them to your navigation. You’ll need to create at least one group for any of these areas you use, but you can have as many as you need to as well. For example, say you have both a dinner and a cocktail menu, you can create a food group for each of them to keep them separate and easy to browse.
To add a group to the navigation, go to the appearance section and choose menu. In the left hand column you should see boxes for “Staff Group,” “Menu Groups,” and “Service Group.” If you don’t see them, click in the top right hand corner where it says screen options and make sure they are checked to be visible. You can add any of these just as you would any category or page to your navigation. If you need help with the navigation, there is a tutorial on it in our video section.
With version 1.4, there is additional way to add a food group to your pages/posts. We’ve incorporated what’s called a “shortcode” that lets you place a food group listing wherever you want. Just paste this code:
[menu group="burgers"]
Just replace burgers
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. In the menu page in the demo, we use the menu group shortcode to list multiple menu groups per page. We place a title above each group so people know what they’re looking at. To divide each group, we’ve also placed a divider (a horizontal rule or hr). To add the divider, find the spot where you’d like to place one. Then click the “text” tab at the top of your editor. Then paste this where you’d like to have the line:
You can then switch back to the “visual” editor and continue writing your page.
If your menu group has very usual spacing and colors there’s probably a bit of extra HTML that was copied over. Switch to the text editor and make sure you don’t see something that looks like this:
<pre><code>
before the shortcode and this after it:
</pre></code>
If you do, remove that extra HTML and make sure the shortcode begins and ends with just brackets [ ]
Home Page & Blog
By default the theme will display your most recent posts as its front page. It’s possible to change that though to a “static” page like the demo has. To do that, first create the page you’d like to have as your front page. Then go to the “Settings” section of your WordPress control panel and select “Reading.” At the top of this page is an option to select what the front page displays.
To use a static front page, choose “A Static Page” and then select your page from the drop down. It’s also possible to specify a page for your blog using this same method. The content on your “Posts page” will be replaced by a traditional blog showing all of your posts.
Foxy also includes an unusual option page template. You can activate the template in the right hand corner of the edit page screen under “Page Attributes.” The blank page template actually doesn’t have a content box (the sidebar is still present so your navigation and widgets are visible). This is a way to show off your backgrounds if you so desire to. It’s optional and in way required.
Page and Post Images
On a single post or an a page, you can replace the slideshow/default images by using the “Featured Image” component that’s part of WordPress. Just add that image and it will be displayed. If you need help with featured images there is a tutorial in our video section.
That wraps up the Foxy theme. I hope you enjoy creating a beautiful site with it.