- Getting Started
- Install the Demo Data
- Recommended Plugins
- Install Jetpack
- Customizer Settings
- Widget Areas
- Page Templates
- Portfolio Templates
- Portfolio Post Templates
- Creating Portfolio Items
- Create a Gallery or Video Post
- Create the Contact Page
- Page Subtitles
- Finding Good Photos
Once you’ve activated Meteor, you’ll be forwarded to the Getting Started page (Appearance → Getting Started). Here, you can view the help file, browse recommended plugin and frequently asked questions, and activate your theme’s license to enable theme updates.
We strongly recommend that you add your theme’s license key in the Getting Started page. By adding your key, you activate seamless theme updates which lets you update your theme in seconds. With theme updates enabled, you’ll get a notification on your Themes page whenever there is an update available. You can update right in your WordPress dashboard, keeping your site healthy and secure.
You can find your theme’s license key by signing in to your Array dashboard and visiting the Downloads page. Click the Manage License link on your theme to view the license key. Copy this key and enter it into the sidebar of your Getting Started page and click the Activate License button. Your license key should now be active!
Theme Demo Data
When you first activate Meteor, it will look like simple blog with your existing posts. This is expected since Meteor needs you to modify a few settings before it will look like the demo. Optionally, you may install our Meteor demo data, which will populate your site with the pages you see on our live demo. This can give you a head start in setting up your site. Once you get your site setup and get the hang of it, you may delete the unwanted posts or pages as you see fit.
You’ll want to install and activate the Jetpack plugin before importing the demo data so the portfolio posts are also included in the import along with standard posts and pages.
Download the Meteor demo data here. You can install this XML file by going to Tools → Import → WordPress and click Choose File. Upload the xml file and follow the steps to import. When the demo data is finished importing, you should have several new posts and pages to work with going forward. Hooray!
There are a few features used throughout the theme demo that are added by a plugin. These plugins are entirely optional, and won’t take away from the performance of the theme. Here is a list of plugins and what they add to the theme.
These plugins can also be installed via your theme’s Appearance → Getting started page. Just click the Plugins tab to see the recommended plugins for your theme.
- Jetpack – Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Jetpack adds the portfolio, sharing features, and extra galleries to Meteor.
- MailChimp for WordPress – This plugin let’s you collect email subscribers via a MailChimp widget or shortcode placed in your content. You can see an example of this in the footer of the Meteor theme demo.
- WPForms – WPForms allows you to easily create contact forms for your site with a powerful drag and drop editor.
- Shortcodes Ultimate – With this plugin you can easily create tabs, buttons, boxes, different sliders, video lightboxes and more.
Install and Setup Jetpack
Jetpack is a free WordPress plugin that provides various features and enhancements to your WordPress site. Meteor uses several of the Jetpack features to add things like sharing icons, related posts and sweet photo galleries to use in your portfolio posts.
- Install Jetpack by going to Plugins → Add New and search for “Jetpack”. Install and activate the plugin.
- After activating Jetpack, you will be asked to connect to WordPress.com to enable the Jetpack features. Click the connect button and log in to a WordPress.com account to authorize the Jetpack connection.
- If you don’t yet have a WordPress.com account, you can quickly create one after clicking the connect button. This will allow you to use Jetpack for Meteor or any other theme in the future.
Once installed, activated, and connected to WordPress.com, you can visit the Jetpack settings page, which is now available at the top of your admin menu. You will need to activate the following Jetpack features by clicking Settings tab at the top of the page, and clicking the Activate link next to each feature. For the best performance, we recommend deactivating all Jetpack features by default and only activating the features that suit your site.
- Carousel – The Carousel adds a beautiful lightbox carousel to your gallery images. Learn more about the Carousel
- Custom Content Types – Custom Content Types adds portfolio features to your site. Learn more about Custom Content Types
- Tiled Galleries – Add a tiled gallery to your projects with the Tiled Galleries feature. Learn more about Galleries.
- Sharing – Add sharing buttons to your blog posts to give your readers the ability to easily share your content with Twitter, Facebook, and a host of other services. Learn more about Sharing.
- Related Posts – Show your visitors related posts they might be interested in. Related posts will automatically be output on your single post pages upon activation. Learn more about Related Posts.
Meteor comes with several Customizer settings that you can use to customize your site to your style.
Theme Options → General Settings
- Number of portfolio items to show: Each portfolio template (Grid, Masonry, Blocks, Carousel) comes with a setting to change the number of portfolio items that show on each template.
- Number of columns on portfolio masonry grid: If you choose the Masonry portfolio template, you can use this setting to choose between a two or three column layout.
- Choose the style of the portfolio archive page:: Use this setting to choose the style of portfolio archive (found at yoursite.com/portfolio) you would like to use. You can select the same layout as the portfolio template you chose, or you can use a different layout altogether.
- Blog Section on Portfolio Templates: Choose to hide or show the blog section on portfolio page templates.
- Blog Section Title: Change the title on the blog section of portfolio templates.
- Footer Tagline: Change the footer tagline found at the bottom of your site.
Site Title, Tagline & Logo
The following settings can be found in Appearance → Customize → Site Title, Tagline & Logo.
- Site Title & Tagline: By default your site will display a site title and tagline, which can be customized here. You also have the option to hide the site title and tagline if you’d rather use your own logo image.
- Logo: Upload your own logo to use in place of your site’s title and tagline.
- Accent Color: Change the accent color of buttons and typographical elements found in the theme.
- Background Color: Change the background color of the site. Please note that changing this color may require you to make other color adjustments because your site’s content sits on this background color.
Meteor has two different menus that can be used throughout the theme.
- Primary Menu – This is the main menu found in the header of your site.
Social Icon Menu This is the social media icon menu found in the footer of your site. See the instructions below to set up the Social Icon Menu.
- To add a social icon menu, go to Appearance → Menus.
- On the left side of the Menu page, click the Links menu item to add to your social links.
- Add the URL for each of your social profiles and a label for the link. Meteor will detect which site you are linking to and display a matching graphic. Icons are supported for the following sites: Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, Flickr, Codepen, Behance, Dropbox, Pinterest, Reddit, Soundcloud, Spotify, WordPress, LinkedIn, Stack Overflow, Slideshare, Medium, Apple, 500px, RSS and Email. If there is a popular service that isn’t supported and has an icon on FontAwesome, let us know and we’ll add it to the theme!
- Now that you have the menu created, you need to assign it to the Social Icon Menu in the Theme Locations section
- Save the menu when finished.
Meteor comes with a few different widget areas you can use to customize your site.
Sidebar – This widget area can be found on the right side single posts and pages.
Footer – This widget area can be found in the footer of your site. There are three widget columns that you can use to add widgets to the footer. The footer widget columns have a dynamic width, meaning if you only choose to use two columns, the column width will adjust to display the columns evenly in the footer.
Meteor comes with several page templates to help you create a powerful website. Let’s go over each of the templates and how to set them up properly to get the most out of each page.
The Resume template lets you display several different pages in a beautiful, resume-style layout on a single page.
Before adding sections to your resume, you need to create a Resume page to be used as the parent page for each section. Create a new page or use an existing page and assign it the Resume page template.
Next, you can start adding individual resume pages. Create a new page for each resume section you would like to add (i.e. experience, education, skills). Assign your main Resume page as the parent page to each resume section, as seen below. Any page that is setup as a child page will show up on your Resume page. You can also use the Order option to change the order of your resume sections.
The content of each resume section is up to you, but you can match the style of our demo by using similar formatting with bold, italics and unordered lists. Click here to grab some sample code that we used for the Education section. You can paste this into the Text view and modify as needed.
The Services template is used to display the various services you provide. This template will display the child pages of any parent page in a 3-column grid. You can use the Services template for services or any kind of page content you’d like to have a in grid layout.
Before adding service pages, you need to create a main Services page to be used as the parent page for these services. Create a new page or use an existing page and assign it the Services page template.
Next, you can start adding individual service pages. Create a new page for each service you provide (i.e. design, web development, photography). Assign your main Services page as the parent page to each service, as seen below. Any page that is setup as a child page will show up on your Services page. You can also use the Order option to change the order of your services.
The Full Width template uses the entire content area for content, and removes the sidebar from the right side of the page.
The Page Builder template is a blank canvas for you to use with your favorite page builder plugin. This template is similar to the Full Width template, except it has all margins and paddings removed from the content area. This lets you create your own sections with columns and various layouts with your page builder without style restrictions.
To get started with the Portfolio, create a new page (or use an existing page) and assign any of the Portfolio page templates you see below. Each template will display your portfolio items a little differently, so check out the descriptions and demo links to see which one best fits your style.
Below the portfolio items on each template is a section for your latest blog posts. You can enable or disable the blog post section by visiting Appearance → Customize → Theme Options.
The Portfolio Grid template is used to display your latest Portfolio items in a neat, three column grid.
The Portfolio Masonry template is used to display your latest Portfolio items in a cascading, two or three column masonry grid.
The Portfolio Blocks template is used to display your latest Portfolio items in an alternating text/photo block layout.
The Portfolio Carousel template is used to display your latest Portfolio items in a horizontal carousel gallery.
Portfolio Post Templates
Along with the Portfolio templates above, Meteor also comes with three templates that let you control the layout of individual portfolio items. You can switch between layouts by selecting a layout in the Post Attributes box on the right side of your post edit screen.
The Portfolio Centered layout removes the sidebar and centers your featured image and content area. The featured image area is wider than the content area to provide more room for large featured images, videos and galleries. See the Create a Gallery or Video Post section to learn how to add media other than a featured image to the top of your post.
See this portfolio item on our demo for an example of this layout in action.
The Portfolio Carousel layout lets you create a carousel gallery at the top of your post where the featured image usually goes. This template will grab the first gallery in your post content, move it to the top of the post and create a carousel gallery automatically. See this portfolio item on our demo for an example of this layout in action.
- To create a carousel post, create a new post and select Portfolio Carousel in the Post Attributes window on the right side of the post edit screen.
- Next, go ahead and create a standard gallery using the Add Media button. After you’ve chosen the images to include in your gallery, click the Create a new gallery button. You’ll be taken to the Edit Gallery screen where we can finish setting up our carousel.
- In the Gallery Settings area on the right, choose Carousel in the Size drop down. This will ensure our images are cropped to the same size so they appear uniform in our carousel gallery (roughly 625px by 460px). The carousel does not currently support variable width images in the carousel.
- The Columns and Type settings are not used in this carousel gallery, so you can leave these at the default settings.
- Once you’ve finished editing your gallery, you can click the Insert Gallery button to add the gallery to your post. Complete your post by adding content and additional images, adding tags and categories, and setting a featured image. Even though this is a carousel, you need to set a featured image to show on the portfolio archive page and portfolio templates.
- Publish your post and preview it to double check that everything was setup correctly.
If your images aren’t displaying correctly in the carousel, you may need to refresh your images with the theme’s new image crops. You can do this by installing the Regenerate Thumbnails plugin and going to Tools → Regen. Thumbnails to refresh your images.
If you would like to have the lightbox popup on your carousel images as seen in the demo, make sure you enable this in Jetpack by going to the Media settings and enabling “Display images and galleries in a gorgeous, full-screen browsing experience.”
The Portfolio Split layout separates your post into two columns. The left column contains your featured image, gallery or video and the right column contains your post text and meta. See the Create a Gallery or Video Post section to learn how to add media other than a featured image to the top of your post.
Creating Portfolio Items
To create portfolio items, first you’ll need to install and activate the Jetpack plugin. Once you’ve done that, go to Jetpack → Settings and activate the Custom Content Types feature. This will provide us with the Portfolio functionality. Once you’ve activated the Custom Content Types, you’ll notice there is now a Portfolio menu item.
Similar to the way you add new blog posts, you can add a new portfolio item under Portfolio → Add New. Portfolio items are ordered by the date they’re created, with the most recent project displayed first.
Adding a Featured Image to each project is highly recommended. Each project’s featured image is displayed on the Portfolio archive and the Homepage template.
Create your portfolio item by adding any combination of images, videos, galleries or audio files. Meteor will handle the styling of these elements on the front end. Activate Jetpack’s Tiled Galleries feature to add some additional gallery styles as seen on here on the Meteor demo. When creating a gallery, you’ll see a few new gallery options in the gallery type select menu.
Portfolio items also support video and gallery post formats. Using these you can create media-rich portfolio items where video and galleries are featured at the top of your post, in place of the featured image. See the Post Formats section to learn how to use these.
Create a Gallery or Video Post
Meteor includes support for Gallery and Video post formats on blog posts and portfolio items. Post formats allow you to change the style of your content to more closely match the type of content you are creating. For Video and Gallery post formats, Meteor will take your post’s first video or gallery and display it at the top of the post in place of the featured image. Check out a video and gallery sample here.
Gallery and Video post formats rely on WordPress’s embed/oEmbed feature for videos and the standard gallery shortcode for gallery posts. See here for a list of available embed options for video.
Create a Video Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Video.
- Next, let’s add a video. In the same way you embed videos normally, add your embed code or link to the top of your new post. Remember, only video embeds supported by WordPress (oEmbed links or iframe video) will work here.
After you’ve added your video to the top of your post, you can continue adding content as seen below.
- Publish your post when you’re finished and preview the results.
Create a Gallery Format Post
- Go to Posts → Add New and create a new post. In the Format window, click Gallery.
- Next, let’s add a gallery. In the same way you create galleries normally, add your gallery to the top of your new post.
After you’ve added your gallery to the top of your post, you can continue adding content as seen below.
- The Gallery post format supports standard WordPress galleries, as well as the extra gallery styles provided by Jetpack, such as Tiled Mosaic, Tiled Column and Square Tiles, which are used on the Meteor demo. To activate Jetpack’s extra galleries, go to Jetpack → Settings and turn on the Speed up images and photos setting in the Media section. Once activated, you will see new gallery styles in the Type field when creating a new gallery.
- Publish your post when you’re finished and preview the results.
Create the Contact Page
The Contact Page uses the WPForms Lite plugin, which can grab for free on the WordPress plugin repository. See installation instructions above. Once installed, you’ll see there is a WPForms link in the left hand sidebar of your WordPress admin.
- If you haven’t already, create a new page called Contact.
- Go to the WPForms menu on the left admin menu to configure your contact form. The form creation process is pretty simple, but you can check out the WPForms documentation here for help and tips.
- After you’ve configured and saved your contact form, you will be given a shortcode like this: [wpforms id="161894"]. Copy your shortcode. We’ll use this to add the form to our Contact page.
- Now head back to your Contact page. Paste the shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.
Add Subtitles to Pages and Sections
On the Meteor demo, you’ll notice that some pages subtitles below the page title. This can be added to any page by using the Excerpt box in the page editor. Any text added here will be placed below the page title.
Finding Good Photos
Finding good photos for your site can be tough and expensive, but we’ve got a few sites that offer really nice photography for free. Feel free to browse these sites and find some photos that highlight your content.