Let’s set up a new site to look like the StudioPress demo. Our guides on setting up a theme for the first time will touch on many areas of theme configuration. By taking a site from a blank slate to an eye-catching draw for visitors, you’ll learn the skills to be able to customize your own site using one of our premium Genesis themes.
Since we’re focused on performance, let’s get this done before our coffee gets cold.
Activating the Theme and Core Plugins
First things first. Let’s start by activating the theme. Click on the Appearance menu and select Themes. Locate the StudioPress Generate theme from the many available and click the Activate link to make it active on your site.
The Generate theme doesn’t require a lot of plugins to achieve the functionality you see in the demo. We’ll activate them at the outset, because doing so will make the rest of the setup a snap. Visit the Plugins menu and locate 5 plugins:
- Genesis Simple Edits
- WordPress Importer
- wpPERFORM.com Enable Shortcodes Everywhere
- wpPERFORM.com Generate Theme Functions
- Genesis eNews Extended
- Genesis Latest Tweets Widget
You can activate them one by one, or you can check the box next to each, choose Activate in the Bulk Actions menu at the top of the Plugins page, and click the Apply button. You only need the WordPress Importer plugin if you plan to import sample content or your own content from a WordPress export file. Since we want to create a great looking site before our coffee gets cold, we’ll need that plugin to import some data. We’ll get into more detail on what features the other plugins deliver as we continue setting up the Generate theme.
Initial Housekeeping
If you are setting up a new site, especially on a domain that you plan to use with your own content, it’s a good idea to block search engines from indexing the demo content we’re going to create. It’s important to do this as soon after you create your site as possible, so let’s make sure search engines are blocked for now. Visit Settings->Reading and make sure the to check the checkbox next to Discourage search engines from indexing this site. Equally important, when you have removed the demo data and have your own content in final form, be sure to go back and change your privacy setting by unchecking this box..
Import Sample Data
We’ve already activated the plugin, so the next step is to put it to use by visiting the Tools->Import menu. Choose the WordPress function to import posts, pages, and other content from a WordPress export file. You’ll be asked to specify the location of the import file, as shown in the screenshot below:
Locate the file on your computer, and press the Upload file and import button. Since the upload file contains information about authors who don’t exist as users in your WordPress installation, you’ll need to either add them as users or re-assign all of that content to current users. When we import StudioPress demo data, we re-assign content to a user that already exists on our site, but if you’re importing your own content, you probably want to add those new users unless you’ve added them previously. The import file also contains information on file attachments, which you want to be sure to include by putting a check in the Download and import file attachments checkbox.
If all goes well, you’ll see the results of a successful import, which we displayed at the start of this process.
Configure the Site Title and Tagline
Out of the box, the Generate theme uses a text title and tagline that it automatically grabs from your WordPress settings. Visit Settings->General and set the Site Title and Tagline to values that match your business. If either item is too long, you’ll need to adjust the font or font size using CSS.
Configure the Widgets
One of the great features of the Genesis framework is that it’s very widget friendly. Widgets are powerful tools to display content. They can be easily dragged and dropped into place, and most have settings that allow you to control how the widget will display content. Properly-coded widgets are multi-instance, which means the same widget can be used in multiple locations with different settings. The Generate theme from StudioPress exploits widgets by having 6 spots into which one or more widgets can be dropped. Those spots are:
- Header Right
- Primary Sidebar
- Generate Box
- Footer 1
- Footer 2
- Footer 3
Each widget area can hold multiple widgets, and the content from each will be generated sequentially as WordPress produces the page. You can drag widgets around, and you can click on the down arrow on a single widget to show the widget’s parameters. That’s also where you’ll find a link to delete the widget.
If you are switching your site to the Generate theme from another, you may have an existing set of widgets. WordPress makes an attempt to track widgets by theme, but that’s not an easy task because themes have different widget areas. One approach to deal with theme switching is to drag your existing widgets to the Inactive Widgets panel, which sits below all of the Available Widgets. You’ll keep your existing widget settings and can start with a fresh widget configuration on your new theme.
At this point, all of our widget areas are blank. We’re now ready to start making our new site look like the StudioPress demo.
From the Appearance->Widgets menu, let’s add these widgets to the specified widget areas:
- Drag a Search widget into the Header Right widget area; leave the Title blank, and save the widget;
- Drag a Genesis – eNews Extended widget into the first position in the Primary Sidebar widget area; for the Title, enter the text (without the quotes) “Get The Email Newsletter”; for the Text To Show, enter (without the quotes) “Sign up to receive free email updates and news about what we’re up to!”; for this widget to work properly, you’ll need to enter valid information for your list management service, but for now, we’ll just make sure the Google/Feedburner ID is not blank and continue setting up our theme; press the Save button;
- Drag a Genesis – Latest Tweets widget into the second position in the Primary Sidebar widget area; for the Title, enter the text (without the quotes) “Latest Tweets”; enter a valid Twitter Username (without the @), such as wpPERFORM, and set the widget to display 3 tweets; we’ll leave the other settings on this widget for another time;
- Drag a Tag Cloud widget into the third and final position in the Primary Sidebar widget area; for the Title, enter (without the quotes) “Tags”; leave the taxonomy set to Tags and click the Save button;
- Drag a Text Widget to the Generate Box widget area; for the Title, enter (without the quotes) “Get Fresh Content Delivered (It’s Free)”; in the text entry area below the title, enter
[insert_generate_box]
At this point, we’ve completed basic widget setup. Let’s go back and clarify something we quickly passed over when activating our plugins and in the last step of widget configuration – using a shortcode to setup the Generate Box widget area.
By default, at wpPERFORM.com, we block unfiltered HTML as a security precaution, and the Generate Box widget area requires certain code that we otherwise block to deliver the results you see in the demo. To stay secure and deliver that functionality, we’ve turned the code into a plugin that securely inserts it via a shortcode. Supporting that shortcode is the job of our wpPERFORM.com Generate Theme Functions plugin.
As you can see, shortcodes are powerful, but by default WordPress does not enable them in widget areas. To add the power of shortcodes to widgets, we activated our wpPERFORM.com Enable Shortcodes Everywhere plugin that adds shortcode support to areas that otherwise lack it. That helps us deliver the power of shortcodes in widgets while staying secure at the same time.
Depending on how you setup the Generate theme, you may need a very small custom plugin to enable you to securely include that code in a text widget. If you supply us with the code for the functionality you’re trying to create, we’ll turn it into a custom plugin at no charge, and make it available to only your sites.
To get you started, here’s the code we used to produce the Generate Box on our demo:
That’s essentially the same code StudioPress used in its demo.
Configure the Footer
Most Genesis users want to customize the footer, if only to remove the link to StudioPress. We’ve already set in motion the most important step to reach this goal by activating the Genesis Simple Edits plugin. Let’s put it to use. Go to Genesis->Simple Edits menu and put a check in Modify Entire Footer Text (including markup)?. In the text box below, we’ll copy and paste the code below:
To save your customized footer, click the Save Settings button.
Our footer customization makes use of a mixture of HTML and shortcodes included with the Genesis framework. You’re free to modify the information in the gototop and creds classes as you wish, but at a minimum it’s good to show appreciation to the WordPress team for making it easy for you to get your content on the web by including their link.
Menus
Since we started out by importing StudioPress sample data, we have custom menus in place in most instances; in others, we had to create the menus manually. If you opted to import your data and it included custom menus, the import process recreated those for you. We just need to tell the Generate theme to make use of the new menus. To do that, visit Appearance->Menus. In the Theme Locations meta box, select “Primary Navigation” for the Primary Navigation Menu and “Secondary Navigation” in the Secondary Navigation Menu. If you imported data from your own XML file, the menu names are likely different from our demo data. The names aren’t important. The role the menus play in your site design control the menus you specify in Theme Locations. If you don’t see the Theme Locations meta box, click the Screen Options button in the upper right of your WordPress Menus administration area and make sure that Theme Locations is checked as one of the options to Show on screen.
We have one last little tweak to make to our menus. Select the Primary Navigation tab in the list of menus that flows horizontally across your screen. That will bring up the items in that menu. The very first item is a Custom Link to the site’s home page. Since we want our demo to match the working demo created by StudioPress, we’ve modified the home page for our demo site to point to our demo site. You’ll want to edit the value of this custom link as you build your site. Most people remember to change the menu items themselves but overlook that the URL for the Home menu item is actually coded into the menu item itself and needs to be changed for each of your sites.
Genesis Settings
The Genesis menu includes some common settings for the Genesis framework. To wrap up configuring the Generate theme, we have to adjust a couple of these settings. First, visit the Genesis->Theme Settings menu and scroll down to the Navigation Settings meta box. Make sure that there is a check mark for the setting in both Include Primary Navigation Menu? and Include Secondary Navigation Menu?. The Primary Navigation menu is the menu just below the site title; the Secondary Navigation menu is just below the Generate Box widget area.
Update: Changes to Genesis make the above step unnecessary; the image below is from a previous version of Genesis.
Next, scroll down to the Content Archives meta box, and make sure that Select Post Navigation Technique is set to Numeric. This is a personal preference, so you’re free to choose any of the settings. We’re only matching it here since we set out to re-create the StudioPress demo.
Wrap Up
We’re just about done with setting up the Generate theme. As a final step, let’s visit the Plugins menu on the Dashboard and click the link at the top of the screen to Active plugins. Typically, the import process is something that you’ll do when you first create your site, so we can deactivate the WordPress Importer plugin. There are other utility plugins, such as Ajax Thumbnail Rebuild, that you may not need to keep activated. We’ll deactivate all of the plugins that are not part of normal site operation to minimize the resources necessary to load our site. The more plugins we have activated, the slower our site is likely to load.
We’re Done With Setup!
If you have quick fingers and started with an import file, your coffee should still be warm and your newly created site should match the overall look of our wpPERFORM.com StudioPress Generate theme demo using the StudioPress sample content.
We’ve covered all the basics, from activating plugins to setting up widgets to menu management. Now the fun begins – creating your original content and building traffic!