Instructions for updating / creating the site’s components
Many parts of the site have been coded as components (using shortcodes). Using these components to update or build new pages is much quicker than writing the HTML manually, and also ensures consistent formatting and styling.
To ensure that a post displays correctly in the search results, enter the expected text that should show up in the search results under the Excerpt
section and set the Featured Image
accordingly.
References for Components
[header-image src="NAME_OF_IMAGE_FILE"]TITLE[/header-image]
block, e.g. [header-image src="Header-Image-Recipes.png"]Recipes[/header-image]
.headline
:- Clone the Headlines Inner Page template and edit the post.
- Ensure that the
featured image
and theexcerpt
are set. These are the elements that appear in the headlines listings.
import
:- Clone an existing import post, e.g. Atlantic Cod, and edit the post.
- Each fish spec should be wrapped in a
[fishspec]
block which takes 4 options –src
,title
,specs
, andmethods
. E.g.:[fishspec src="SpecPicture.jpg" title="Some Fish" specs="Fish Specs (You can write HTML here)" methods="cooking methods"]
- Ensure that the
featured image
, and the 2 custom fieldsheader-image
andimport-fish-parts
are set. Specially for this category, the header-image field sets the header image that is shown on the page and the import-fish-parts sets the fish parts that are shown in the imports listings.
export
:- Clone an existing export post, e.g. Yellowtail, and edit the post.
- Edit the header image and title in the
[header-image]
block. - Edit the images in the image gallery block accordingly. There are 3 possible galleries:
[export-inner-gallery piclarge="LargePic.jpg" picsm1="SmallPic1.jpg" picsm2="SmallPic2.jpg"]
[export-inner-gallery-double picleft="LeftPic.jpg" picright="RightPic.jpg"]
[export-inner-gallery-single pic="SinglePic.jpg"]
- Edit the export description in the text of the
[export-description]
block. - Each row in the export table can be written in an
[export-table-row]
block. This block takes 3 options, corresponding to the 3 columns of the table –cutting
,size
, andpacking
, e.g.[export-table-row cutting="Whole Round" size="500-700Grams, 700-900Grams, 900Grams Up" packing="Bulk pack in 20Kgs carton"]
- Ensure that the
featured image
, and the custom fieldsexport-fish-parts
are set. The export-fish-parts sets the fish parts that are shown in the exports listings.
event
, simply clone an existing post in the Events category, e.g. the Ben Food Event post. Edit the author
and date
options in the [post-meta]
block. Ensure that the featured image
and excerpt
are filled in. The excerpt refers to the short text that appears in the events list page.recipe category
:- Create the category first, e.g.
Barramundi Recipes
, and make a note of the category slug, e.g.barramundi-recipes
- Make a copy of the
category-swordfish-recipes.php
file and rename it to suit the new category, e.g.category-barramundi-recipes.php
. You may have to upload this file to thewp-content/themes/wp-bootstrap-starter-child
directory via FTP. - Clone the post titled
Swordfish Recipes - Introduction
, and make a note of its id. Edit this post to reflect the introduction for the new category. - Change the post id in
category-barramundi-recipes.php
from 2193 on line 19 to the new id. - Add the category to the main menu via Appearance > Menus
recipe
in a category:- Clone one of the Swordfish Recipes posts and change the category from Swordfish Recipes to the appropriate category.
- Change the title in the
[recipe-inner-description title="Insert title here"][/recipe-inner-description]
block. - Edit the images in the image gallery block accordingly. There are 3 possible galleries:
[recipe-inner-gallery piclarge="LargePic.jpg" picsm1="SmallPic1.jpg" picsm2="SmallPic2.jpg"]
[recipe-inner-gallery-double picleft="LeftPic.jpg" picright="RightPic.jpg"]
[recipe-inner-gallery-single pic="SinglePic.jpg"]
- Edit the ingredients list in the
[recipe-inner-ingredients]
block. Each ingredient should be inside a[recipe-ingredient](Insert ingredient here)[/recipe-ingredient]
block. - Edit the directions in the
[recipe-inner-directions]
block. This block can take an option –preptime
, e.g.[recipe-inner-directions preptime="1 hour 30 min"]
. Each ingredient should be inside a[recipe-step](Insert step here)[/recipe-step]
block. - For the recipe to appear properly in its category’s recipe list, ensure that the
excerpt
,featured image
and the two custom fields,icon
andpreptime
, are set. If any of them are not set, their corresponding image/text will not appear. The excerpt refers to the short text that appears in the recipe list page.
promotion
, clone an existing post in the Promotions category, e.g. the Mothers’ Day Special post. Edit the author
and date
options in the [post-meta]
block. Ensure that the featured image
and excerpt
are filled in. The excerpt refers to the short text that appears in the promotions list page.fish byte
, simply clone an existing post in the Fish Bytes category, e.g. the Not All Frozen Fish is Created Equal post. Edit the content accordingly. Each row in the table should be created using a [fishbyte-table-row]
block which takes 3 options, row
, frozen
, and fresh
. For example, [fishbyte-table-row row="Quality" frozen="Frozen at sea to lock in freshness" fresh="Fresh thaw. Freshness drops over time"]
. Ensure that the featured image
and excerpt
are filled in. The excerpt refers to the short text that appears in the fish bytes list page.Settings -> Insert Headers and Footers
.Appearance -> Widgets -> Footer 3 -> Text
, but the contents may become empty upon opening the box. Edit the following code and paste it in the box and save it. Do not open the box after saving, otherwise the code may disappear again. <div class="social-footer">
<a class="social-footer-icon" href="https://www.facebook.com/chunchengfishery/">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a class="social-footer-icon" href="https://www.instagram.com/silverseasg/">
<i class="fa fa-instagram fa-lg"></i>
</a>
<a class="social-footer-icon" href="https://www.linkedin.com/company/chun-cheng-fishery-enterprise-pte-ltd/">
<i class="fa fa-linkedin fa-lg"></i>
</a>
</div>