Designerby Array

designer-customize

Getting Started With Designer

Designer is customizable via the WordPress Customizer. Here, you can change the theme’s options and add widgets to your sidebar. To access the Customizer, click Appearance → Customize in your dashboard.

Visit the Theme Options menu to set up a few default options:

  • Always Show Sidebar: Check this option if you’d like the sidebar to always be visible. Otherwise, the sidebar will appear as a slider that tuck away when not being used.
  • Project Image Style: Use this to change the orientation of your project images. You can choose tiled images, landscape, portrait, or square.
  • Number of Projects on Homepage: If you are using the Homepage template for your homepage, this controls how many Portfolio projects to show on your homepage.
  • Project Archive Text: This text is shown on your Portfolio archive page, which is located at yourgroovysite.wordpress.com/portfolio. The Portfolio archive page gives visitors quick access to all of your Portfolio projects.
  • Blog Index Style: This option lets you choose between a full blog (default) or an alternative minimal blog style seen below.

designer-minimal-blog-style

Setting Up the Homepage

designer-homepage-setup
By default, your homepage will be the index of your blog posts. Designer also comes with a Homepage template that you can use in place of the blog index. To use the Homepage template:

  • Create a new page. The title should be what you want the Homepage intro title to be. For example, the title of this homepage was “My latest work.”
  • In the Page Attributes panel on the right-hand side of the page, select the Homepage template.
  • Publish the page.
  • Go to Settings → Reading and set your new Homepage as the Front page. See this screenshot for an example.

The Homepage template displays the Homepage template’s page content and your latest Portfolio projects in a grid. The homepage grid style can be changed by visiting Appearance → Customize → Theme Options.


Setup Your Blog

The blog will be your default homepage. If you opt to create a static front page using the Homepage template, you’ll need to set up a different page for the blog:

  • Create a new page and give it a title. You don’t have to add any content or apply any templates to this page — just create a page. Publish the page.
  • Go to Settings → Reading and set your newly created Blog page as the Posts page. You should have already set your Homepage template to be the Front page. See this screenshot for an example.
  • Finally, add this page to your menu so users can access the blog page. Go to Appearance → Menus and add your Blog page to your menu.

Your Portfolio Archive

designer-portfolio-archiveDesigner uses the Portfolio archive page to display all of your portfolio items. This is similar to the homepage, but gives visitors access to all of your projects, rather than your latest ones. This page also shows a block of text at the top (added in Apperance → Customize → Theme Options) and lists all your projects in the order they were added. This page can always be found at yourgroovysite.wordpress.com/portfolio.

Add your Portfolio archive to your navigation by setting up a Custom Menu and adding a link to your archive page from the Links area. The URL to your Portfolio archive is yourgroovysite.wordpress.com/portfolio.


Adding Portfolio Items

designer-projects
Designer uses the Portfolio content type to display your projects. Start adding Portfolio items by visiting the Portfolio menu.

You add a new project under Portfolio → Add New, just like adding new posts. Like a blog, Portfolio projects 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, since each project’s featured image is displayed on the Portfolio archive and the Homepage template.

There are two ways of categorizing your projects: Project Types (similar to Categories) and Project Tags (similar to Tags). These are available in the Portfolio menu item and on the Edit Project page. Learn more about setting up Portfolios.

Adding Media To Your Projects

The Designer demo uses a combination of inline images, tiled galleries, embedded video.


Social Icon Menu

designer-url

Create a social icon menu to let visitors know where to find you:

  • Go to Appearance → Menus.
  • On the left side of the Menu page, click the Links menu item.
  • Add the URL for each of your social profiles and a label for the link. Designer will detect which site you are linking to and display a matching graphic. Icons are supported for Twitter, Facebook, Google, Instagram, YouTube, Vimeo, Dribbble, Github, CodePen, Behance, Dropbox, Email, Pinterest, Reddit, Soundcloud, Spotify and WordPress.
  • Save the menu when finished.

You can now use this menu in the Custom Menu widget in Appearance → Widgets or via the Widgets section in Apperance → Customize.


Widgets

designer-widgets
The widget area in Designer is in the sidebar, which can be displayed by clicking the sidebar toggle bar. Alternatively, you can set your sidebar to always be visible. Visit Appearance → Customize → Theme Options to select this option, as seen above.