Installing, Securing WordPress and First Steps

Installing WordPress

If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the instructional video (thanks to WooThemes).

Securing WordPress

You can improve your WordPress installation security taking these steps:

  • Set the Authentication Unique Keys and Salts in wp-config.php file.
  • Set the $table_prefix variable in wp-config.php file (do not use the default value of "wp_").
  • Do not use admin as user name and set strong passwords.
  • After installation is done, remove wp-admin/install.php file.
  • Keep backups of the database and WordPress installation.
  • Keep your WordPress installation up to date.

First Steps With WordPress

Additional resources for WordPress beginners:

Theme Installation

How to Install the Theme?

  1. In your WordPress dashboard navigate to Appearance » Themes and click the [Add New] button next to "Themes" page title.
  2. Insert "Receptar" into search field and press [Enter] on your keyboard.
  3. Once the theme is found, hover over the theme screenshot with your mouse cursor and click the [Install] button that appears below the screenshot image.
  4. Wait while the theme is installed and activate it by clicking the "Activate" link.

Important:

You should always keep your WordPress, themes and plugins up to date!

Installing Demo Content Download the theme demo content XML file

How to Install Theme Demo Content?

Import downloaded demo content XML file according to WordPress Codex instructions.

The import process might take a while if you decide to import a demo attachments (images, audio and video files).

Couple of posts in the theme demo content were created using the Beaver Builder page builder plugin. You might consider installing this plugin to display all the demo content correctly.

Please note that there might occur some connection issues when downloading demo attachments from my servers. These, however, are just demo attachments (images, videos, audio files) and you are perfectly fine replacing them with your own assets in case there is some import issue related to these attachments. Other demo content (posts and pages) will be imported without any issues.

Pages

Setting Up Home and Blog Page

TIP: If you want to use your website as a blog, you do not need to set up the front and posts page.
  1. In WordPress admin navigate to Settings » Reading.
  2. For "Front page displays" option set "A static page (select below)".
  3. Select the front page from dropdown list. This page will become your home page.
    Select the posts page from dropdown list. This page will become your blog page.
TIP: You can also do this in Customizer where you get live preview of your settings.

Posts

Post Excerpt

Post excerpt will be displayed in posts list. If no excerpt set, a portion of post content will take its place in posts list (if set, until <!--more--> tag). Post excerpt will also be displayed at the top of the post content on single post page. Please note that you will probably have to enable post excerpt field in "Screen Options" first.

If you set the "Read more" tag inside the post content and you also set a post excerpt, first the post excerpt followed with post content (until "Read More" tag) will be displayed in posts list.

Post Formats

Please note that this theme does not support WordPress post formats. You can only create standard posts with Receptar theme.

Table of Contents on Parted Post

If you are setting up a multipage post (using a "Page break" button in visual editor, or <!–nextpage–> tag in "Text" tab of visual editor), the automatic table of contents will be generated for the post/page for you.

All you need to do is to set up a post parts titles at the top of each post part (so, immediately after <!–nextpage–> tag) with H2 heading.

Featured Posts

These posts will populate the front page (and blog page) banner slideshow area. To set up featured posts, please install and activate the NS Featured Posts plugin and easily mark selected posts as featured.

Setting Up Featured Image for Post or Page

Featured images are displayed in posts list and as a background for right section on a single post or page. To set up featured image, please follow the instructions in WordPress codex.

If there is no featured image set for post or page, the fallback image will be used. The fallback image is being cropped from the header image automatically. You can set up the header image in Appearance » Header.

Image sizes: For the minimal size of the image you upload into your WordPress website please refer to Tips and Tricks » Image Sizes.

Using Navigational Menus

Receptar supports WordPress Menus, so you can easily create custom navigational menus directly in Appearance » Menus.

Custom menus may contain links to pages, categories, custom links or other content types (use the [Screen Options] button in upper right corner of the screen to decide which content types to show on the menu edit screen). You can specify a different navigation label for a menu item as well as other attributes. The theme supports menu item description text.

To display menus on your website you need to assign them to a menu locations or use them in conjunction with the Custom Menus widget.

The theme allows you to create as many menus as you want. However these menus can be placed into predefined locations only. The theme defines these menu locations:

  • Primary Menu - the main navigation area is hidden in the left sidebar. Click the menu hamburger icon on top of the left sidebar area control buttons to reveal the sidebar (and menu) content. The menu in this menu location can be nested and hierarchically organised.
  • Social Links Menu - see below for more info.

Creating a Menu

Please follow the instructions in WordPress codex on how to create menus.

Helpful tutorial: WordPress video tutorials.

Adding Social Networks Links Icons

Social icons linked to your social networks profiles can be displayed in the left sidebar of the website. Before these icons can appear in this location, you must set up a social links menu:

  1. Go to Appearance » Menus in the WordPress admin.
  2. Click create a new menu link.
  3. Give the menu a name, such as "Social Menu".
  4. Click [Create Menu] button.
  5. Click the Links header on the left side of the page.
  6. Type a link (such as https://www.facebook.com/webmandesigneu) to one of your social profiles in the URL field.
  7. Give the link a title by typing the name of the service into the Link Text field.
  8. Click [Add to Menu].
  9. Repeat the above steps to add additional social profiles.
  10. In the Menu Settings section at the bottom, check the "Social Links Menu" box for Theme locations.
  11. Click [Save Menu] button.

Adding your social links as a custom menu allows you to sort your profiles and add as many as you want. The theme currently supports icons for following services: website, email, Codepen, Digg, Dribbble, Dropbox, Facebook, Flickr, Foursquare, Github, Google Plus, Instagram, LinkedIn, Pinterest, Pocket, Polldaddy, Reddit, RSS, Skype, Spotify, StumbleUpon, Tumblr, Twitch, Twitter, Vimeo, WordPress, Youtube. If none of these social services is recognized, the fallback icon is displayed.

Widget Areas

Widget Areas Contained in the Theme

  • Sidebar widget area is the hidden area on the left of your website. To display the are you need to click the menu hamburger button on top of the left sidebar control buttons area. The widgets are displayed just below the primary navigation menu of your website.
  • Header Widgets display widgets in header area of the website right of the website logo. By default this area contains a search field. Once you add a widgets to this widget area, the search field will be replaced with your widgets.

Customizer

What is Customizer and How to Use It

The theme seamlessly integrates its options into the WordPress Customizer.

You can access it navigating to Appearance » Customize. All the changes you set in Customizer will be immediately displayed in the theme preview. However, these changes will not be saved until you press the [Save & Publish] button.

You can set up your site's title, tagline and logo (for logo image please install and activate the Jetpack plugin), header images, manage navigational menu locations and widget areas, set up a front and blog page and theme colors.

For this feature you need to have Jetpack plugin installed and activated.

The theme displays a website title (logo) as a text by default. However, you can upload a logo image if you like. For instructions please see the Jetpack documentation page.

Search Engine Optimization and Traffic Tracking

Search Engine Optimization

The theme is coded with best SEO practices in mind, meaning it is ready to be displayed on top of search results in search engines such as Google.

It also integrates Schema.org microformats automatically.

Please note though, that this is just basic SEO optimization and you will have to push it further to make the real deal with SEO. For such cases I recommend WordPress SEO by Yoast plugin.

Traffic Tracking

Please use a plugin such as Google Analytics for WordPress or Google Analyticator to allow tracking your website with a tool such as Google Analytics.

Localization

How to Translate the Theme?

Any translation files placed in the receptar/languages folder will be deleted when you update the theme.
  1. Make a copy of the original xx_XX.pot file.
  2. You need to rename the coppied file now. The naming convention is based on the language code (e.g. "pt" for Portuguese) followed with underscore and the country code (e.g. "BR" for Brazil). Also, rename the file extension to "po". So, the Brazilian Portuguese file would be named as pt_BR.po.
  3. Use Poedit to translate the file and export (save) translation also in MO translation file format.
  4. Upload translated pt_BR.mo file into your WordPress language directory, such as /wp-content/languages/themes/receptar/pt_BR.mo. Alternatively you can put translations in your child theme: /wp-content/themes/your-child-theme/languages/pt_BR.mo.

Contributing your translations back to the theme

If you would like to help out translating the theme, please contribute on our support forum.

Child theme

When and How to Use a Child Theme?

If you need to make any styling or functional changes to the theme, please use the WordPress native child theme functionality. This way you can continue updating the parent (original) Receptar theme without any worry of your changes being overwritten as all your custom styles and functionality are kept in a child theme. You can read more about child themes on WordPress Codex pages.

You can put all your custom CSS styles into YOUR_WORDPRESS_INSTALLATION/wp-content/themes/YOUR_CHILD_THEME/style.css file. (You can alternatively use a different way to insert a custom CSS.)

If you also want to change the functionality of the original Receptar theme, do so in YOUR_WORDPRESS_INSTALLATION/wp-content/themes/YOUR_CHILD_THEME/functions.php file. You can freely modify any theme's function here as they are all pluggable. Plus, you can use any filter and action hooks available in the theme source code.

Tips and Tricks Additional tips for the theme

Image Sizes

The theme uses these image sizes:

  • Thumbnail 480 × 640 (cropped)
    This image size is used in posts lists.
  • Medium 595 × (variable height) (scaled)
    This size actually depends on your website content width setting ($content_width × 0.62).
  • Large 960 × (variable height) (scaled)
    This image size is used on single post page as a background for the right side of the screen.
  • Banner 1920 × 640
    This image size is used for images displayed in the front page (and blog page) banner slideshow area.
  • Featured 960 × 640
    Used in single post page on mobile devices only.

WordPress will rescale and crop the images to selected formats automatically during the image upload process.

If you already have some images on your wesbsite, these need to be rescaled when using the theme. Please use a plugin such as Force Regenerate Thumbnails to do this for you.

Tip:

You can change the basic WordPress image sizes (the Thumbnail, Medium and Large image size) settings in Settings » Media dashboard page.

WordPress Visual Editor Formats

The theme adds a new Formats button to the visual editor of WordPress posts/pages. Please use this button to create a special elements, such as pullquotes, cite source, inline code, super/sub-scripts, uppercase text, hightlighted (marked) text.

For all the formats please select a text in post/page content first. The format will be applied on this selected text then.
Visual editor Format button

Custom CSS and JavaScript

The theme can apply custom CSS styles and/or JavaScript scripts on singular pages or posts. All you need to do is set up a custom_css and/or custom_js (these are the names for custom fields) custom meta field in Custom Fields metabox for a page/post.

If you need to apply custom CSS globally, please use a child theme or custom CSS plugin.

Development: Action and Filter Hooks

This topic is mostly for developers and for those who would like to alter or expand the theme functionality.

The theme is coded according to WordPress coding standards and is full of action hooks and filters. You can easily hook onto these to alter functions outputs or parameters, to add your own meta data, theme or design options, layouts and much more! Please check the theme's source code to see what hook to use, or contact a WebMan Support Forum for more details and tips.

Receptar itself uses the Theme Hook Alliance hooks too. This is useful to entirely rebuild the theme structure or add your own sections anywhere in the theme.

Tutorials on using hooks:

Tip:

All the action and filter hooks in the theme starts with wmhook_ prefix.

Sources and Credits

Images

  • Default header.jpg, featured.jpg image and images used in screenshot.jpg are provided via Pixabay.com
  • Other theme demo images are provided via Foodie's Feed