Fiction for WordPress

8/14/2019 Fiction for WordPress

1/18

Fiction for WordPress

By Squidix LLC

Table of ContentsFiction for WordPress.................................................................................................................................1

Introduction......................................................................................................................................2

Installation........................................................................................................................................2Administration..................................................................................................................................3Installin !isual Com"oser...............................................................................................................3#$e % Basic #em"lates......................................................................................................................&'t$er #em"lates and (ditin or Addin #em"lates..........................................................................&)sin #em"lates...............................................................................................................................*+o, to -ae #$e Standard Paes..................................................................................................../Content Blocs................................................................................................................................1*#,itter Pro Settins........................................................................................................................1/LayerSlider.....................................................................................................................................1/0ioSlider.......................................................................................................................................2

ueries............................................................................................................................................2-iscellaneous.................................................................................................................................21


2/18

Introduction

#$is documentation ,ill assist you in installin and settin u" t$e t$eme you $ae 4ust recently"urc$ased. Squidix LLC ,ould lie to mae t$e "rocess as easy as "ossi5le. #o $el" do so6 ,e $ae at$eme installation serice for 4ust 718.// and a com"lete installation serice for 4ust 728.//.

If you are interested in our installation serices6 "lease mae a su""ort ticet 5y clicin $ereand one of our su""ort tec$nicians ,ill $a""ily assist you ,it$ settin u" your ne, ,e5site.

If you s$ould ex"erience any difficulties in t$e set u" or installation of t$is t$eme6 ,e do"roide free limited su""ort ia su""ort ticet.

Installation

#o install Fiction6 "lease follo, t$e next fe, ste"s. If you encounter any "ro5lems6 "lease sendus a su""ort ticet.

1. Install Plugins

2. Install Theme

Next, you will need to install the theme. To do so, copy the theme ('/fiction/') into'wp-content/themes'. Alternatively, you can use the ord!ress "ac#end to install your theme.

To use the "ac#end, $o to your ord!ress admin panel (http%//yourdomain.com/wp-admin) andnavi$ate to Appearance & Themes. ou will then clic# pload* and upload the +ipped file

(fiction.+ip) that you will find pac#a$ed with the Themeorest file you downloaded.

inally, activate the theme

3. Upload Our Demo Content

The easiest way to $et the feel and loo# of our 0 pa$e demo is to upload the demo content.
https://squidix.com/clients/submitticket.php?step=2&deptid=9https://squidix.com/clients/submitticket.php?step=2&deptid=9http://yourdomain.com/wp-adminhttps://squidix.com/clients/submitticket.php?step=2&deptid=9https://squidix.com/clients/submitticket.php?step=2&deptid=9http://yourdomain.com/wp-admin


3/18

The file, 'demo.xml', is a full demo. This will include all of the demo pa$es, content, ima$es,

etc. 1ome ima$es may fail to import, this is completely normal. ou will not need the media that

does fail to import as you will "e replacin$ it with your own. The reasons "ehind the failure to

import is "y no means under our control.

After you have uploaded the demo content, you will need to $o to Appearance & 2enus andchan$e your menu location Top* to the Top* menu. This will fix the menu issue you may

encounter.

The last thin$ you need to add for demo content is the 3ayer1lider import. ou can find this

under the 423 5mport folder that is pac#a$ed with this theme. The text file '3ayer1lider.txt' will

provide you with the import code.

6nce you have $otten this code, you will need to $o to 3ayer1lider & All 1liders & 5mport

1liders ( text field) and paste the code.

IF you do not wish to import the demo content, you will need to follow the directions below

very carefully!

Administration

#o create a more flexi5le editin enironment6 ,e $ae im"lemented t$e !isual Com"oser "ae5uilder "luin for WordPress in Fiction. #$e !isual Com"oser is mostly self ex"lanatory and t$e

documentation for t$e "luin $as 5een included in t$e documentation folder "acaed ,it$ t$is t$eme.

We $ae im"lemented a num5er of t$eme s"ecific elements in addition to t$e default elementsin t$e !isual Com"oser. -ost of t$ese elements are clearly s$o,n in t$e demo.

It is highlyrecommended t$at you im"ort t$e demo content for a startin "oint.

W$ile ,e recommend and su""ort im"ortin t$e demo 9-L files6 you may follo, t$edirections 5elo, ery s"ecifically if you c$oose not to im"ort t$e 9-L files.

The 5 Basic Templates

In fiction6 t$ere are fie 5asic tem"lates t$at you must $ae. Wit$out t$e fie 5asic tem"latesyour ,e5site:s functionality ,ill not ,or.

;ou can find and edit or add tem"lates in t$e #em"lates ta5 in your WordPress administrator


4/18

"anel.

;ou ,ill no, find a list of tem"lates. #$ese tem"lates ,ill define t$e ,ay t$e "ae t$at t$etem"late is assined to loos.

#$e fie 5asic tem"lates are as follo,s.

BloA listin$ of posts that contains information such as cate$ory, author, archive, date,etc

PaeThe default template for a sin$le pa$e.

PortfolioA listin$ of portfolio items that contains information such as cate$ory, author,

archive, date, etc

Portfolio ItemA sin$le portfolio item.

PostA sin$le post

#$ese tem"lates mustexist in your WordPress instance.

Other Templates and Editing or Adding Templates

We $ae made ot$er tem"lates for t$is t$eme. #$ese tem"lates are as follo,s and are defaulttem"lates.

88

Feature Pae

Portfolio Item i$t Side5ar

;ou may mae your o,n tem"lates as ,ell 5y clicin ?Add 0e,@ on t$e tem"late "ae andaddin elements usin t$e !isual Creator.


5/18

Sim"ly add elements no, and you ,ill $ae your o,n tem"late.

Using Templates

In order to use tem"lates6 you ,ill need to c$oose t$e tem"late from t$e tem"late dro" do,nunder ?Fiction '"tions@ ,$en editin a "ae or "ost.

5t is important to note that there are two o"7ects on this pa$e that are la"eled template.* ouwill only "e usin$ this one "elow the content area. The other one is shown "elow and is not used with

this theme.

ou will not "e usin$ this templates* option.

o! to "a#e The $tandard Pages

As t$e !isual Creator system is rat$er so"$isticated6 ,e $ae created a ste"5yste" tutorial to$el" you create t$e standard "aes for your 5lo or ,e5site.


6/18

#$e standard "aes are +ome6 Blo6 Portfolio6 A5out )s6 F.A.6 and Contact )s. If you $aealready im"orted t$e demo content6 you s$ould $ae t$ese "aes already and you can si" t$is sectionif you are confident t$at you no, ,$at you are doin.

If you c$ose not to u"load t$e demo content6 "lease continue on for a 5etter ras" of usin t$e!isual Creator.

Home Page -

For t$is demonstration6 ,e are usin +ome Pae 1. We ,ill not o oer all of t$e $ome"aes as t$ey are similar in t$e set u" "rocess.

#$e elements you c$oose for your $ome "ae are entirely u" to you. +o,eer6 for our+ome Pae 1 ,e $ae c$osen to include icon 5locs on t$e to".

#o start6 o to Paes Add 0e,. #itle t$e "ae ?+ome@ or ,$ateer suits your needs.0ext6 if t$e isual creator is not u" yet6 clic ?!isual Creator@


7/18

;ou ,ill see column o"tions at t$e to" of t$e element. #$ese loo lie t$is

#o use t$e same t$reeicon set u" t$at ,e $ae6 you ,ill need to c$oose t$e 8 t$o"tion,$ic$ s$o,s t$ree columns.

;ou ,ill no, see t$at your lon icon 5loc $as 5een diided into t$ree columns.

;ou can add more elements in t$ese 5locs. We $ae added t,o more icons. 'nce you$ae added an element6 you ,ill need to dra and dro" t$e element onto t$e correct column. For eac$icon 5loc t$at you add6 you s$ould also add a Lare S"acin element. ;our finis$ed to" section s$ouldloo lie t$is


8/18

We $ae added a "ortfolio carousel to t$e first $ome "ae. In order to do t$is6 you needto $ae an element named ?uery@ in t$e elements listin. 'nce you $ae added t$is6 you ,ill 5e asedto enter a query.

For more information on queries6 "lease read t$is section.#$e query ,e $ae used fort$is "ae is

post8type9portfolio-item:nopa$in$9true

'nce you $ae added t$e query6 you ,ill need to add elements into t$e query.S"ecifically6 you ,ill need to add t$e element :Porfolio Carousel: into t$e query. ;ou ,ill need to fillout t$e information t$at is associated ,it$ t$is element as ,ell.

In t$e demo6 ,e $ae used t$e $eadin :>ecent Wors6: t$e default $eadin leel6 siDe 86carousel interal 16 infinite :yes:6 circular :yes:6 and "lay automatically :no:.

If you do not ,is$ to $ae a "ortfolio carousel on your $ome"ae6 you can su5stitute t$iselement for anyt$in you:d lie6 or you can com"letely remoe t$is element from your layout.

;ou ,ill need to add a lare s"acin element 5elo, t$e carousel. ;our finis$ed "ortfoliocarousel s$ould loo lie t$is


9/18

;our "ortfolio items ,ill automatically 5e taen from t$e "ortfolio items you set u" inPortfolio Add 0e,.

#$e next element t$at you ,ill need to set u" is a ta5 element. #$is section ,ill 5e a

t$ree column section. ;ou may add ta5s 5y clicin t$e reen ?E@ sym5ol ,$en you $ae added t$iselement. Aain6 you ,ill need to add a lare s"acin element 5elo, t$e ta5s section.

#$e next column of t$is t$reecolumn section you ,ill need to add a ?+eadin@ element.#$is $eadin element ,ill sere to "roide a title for your next section. #$ere are four leels of$eadins and ,e $ae c$ose t$e second on t$e demo. We $ae named our $eader ?W$at ,e do@ andt$en added a text 5loc element 5elo, t$e $eadin. Belo, t$is6 you ,ill need a lare s"acin element.

#$e testimonials carousel is a carousel element ,it$ t$e $eadin as :testimonials:6

$eadin leel as :2:6 siDe as :1:6 carousel interal as :1:6 infinite as :yes:6 circular as :yes:6 and "layautomatically as :no:.

Inside t$e element for t$e carousel are testimonial elements. #$ese elements "ull t$e textyou "roide in t$e W;SIW; editor to "roide in t$e carousel. ;ou ,ill need a lare s"acin element5elo, t$e last testimonial you enter.

;our finis$ "roduct in t$is s$ould loo lie


10/18

Finally6 to finis$ t$e "ae ,e $ae added a 5loc element and a lare s"acin element att$e 5ottom. #$e 5loc element is em"ty.

#$is "ae $as no tem"late associated ,it$ it. It $as LayerSlider IG 1 associated ,it$ it65ut you ,ill create your o,n LayerSlidersand $ae your o,n IGs. #$e $eader style is default.

Blog -

Com"ared to t$e $ome "ae you 4ust created6 t$e 5lo is muc$ easier. #$ere are fourelements t$at you ,ill need to add.

Start off 5y creatin a ne, "ae and namin it :Blo:. #$en6 add t$e element :Call'ut 3:.#$is element is a messae t$at you can dis"lay to your "ae ie,ers. If you do not ,is$ to $ae t$is6t$en sim"ly do not add t$is. ;ou ,ill need to "lace a lare s"acin element 5elo, it. If you do c$oose

to $ae t$is6 it ,ill a""ear similar to t$is on your "ae.

#$e finis$ed "roduct in your !isual Creator ,ill loo lie t$is


11/18

0ext6 ,e ,ill 5e addin a query 5loc to dis"lay t$e 5lo. ;ou ,ill not need to enter aquery for t$e 5lo to 5e dis"layed unless you are looin to do somet$in custom. So 4ust leae t$equery 5ox em"ty and clic ?Sae.@ 0ext6 enter t$e element :Blo Style 1:


12/18

#$ere is no tem"late for t$is "ae. In t$e demo6 ,e $ae no slider associated ,it$ t$is"ae. And finally6 t$e $eadin style is default. ;ou $ae a functionin "ortfolio no,H

!"out Us -

Similarly6 you can add many elements in t$e a5out "ae. #$e a5out "ae s$ould 5etailored to your ex"ectations for your com"any. In our a5out "ae6 ,e $ae a ?W$o Are We@ text5loc6 a testimonials carousel6 and a Call'ut 1 element for t$e to" section.

#$e Call'ut 1 element loos lie t$is

#$ere is a lare s"acin 5loc 5elo, t$is element. #$is element is fairly self ex"lanatoryafter you $ae added it.

#$e ?W$y C$oose )s@ section is anot$er text 5loc ,it$ a $eadin. #$e ?'ur Sills@section is a text 5loc usin s$ortcodes to "roide for t$e "roress 5ars.

#$ese s$ortcodes loo lie t$is

[progress_bar portion="60"]CSS 3[/progress_bar]

[progress_bar portion="75"]HTML 5[/progress_bar]

[progress_bar portion="60"]PHP[/progress_bar]

[progress_bar portion="85"]or!Press[/progress_bar]

Similar to t$e Portfolio Carousel and #estimonials Carousel6 ,e $ae added a teamcarousel on t$is "ae.


13/18

#o do so6 you ,ill need to add a carousel and add ?#eam@ elements into t$e carousel.#$is is $o, it s$ould loo

Finally6 t$ere are no tem"lates associated ,it$ t$is "ae. And t$ere are no sliders on t$is"ae. #$e $eadin style is default.

#.!.$. Page -

It is fairly sim"le to add t$e FA into a "ae. All you need to do is insert t$e FAelement. #$e FAs are descri5ed in FA Add 0e,.

Because t$e FAs are t$eir o,n "ost ty"e6 you ,ill need to define t$em lie you did,it$ t$e "ortfolios. #$e title of a FA is t$e question and t$e content is t$e ans,er.

If you s$ould lie6 you can c$oose to filter t$e FA 5y cateories muc$ lie you can,it$ t$e "ortfolio items. 'n t$e side of t$e FA "ae6 ,e $ae added a ,idetiDed side5ar.

#$e result of your FA "ae ,ill loo lie t$is


14/18

#$ere is no tem"late associated ,it$ t$is "ae. #$e $eadin style is default. And on t$edemo6 ,e $ae not added a slider on t$is "ae.

Conta%t Page -

For t$e contact form in Fiction6 ,e $ae used Contact Form &. Contact Form & is a"luin t$at $as 5een interated into !isual Creator.

For t$e to" section of our contact "ae6 ,e $ae added a oole -a"s element. #o dot$is6 add t$e element ?oole -a"s@ and fill out t$e information as directed. Belo, t$e oole -a"selement s$ould 5e a -edium S"acin.

Create a ne, ro,6 or section6 and mae t$is ro, t$e t$o"tion of columns. 'n t$eleft$and side6 ,e $ae added a text 5loc element ,it$ our contact information. #$ere is a lares"acin 5elo, t$is text 5loc.

In t$e lare column6 ,e $ae added a $eadin6 a small s"acin 5elo, t$e $eadin6 a text5loc ,it$ Lorem I"sum6 a small $eadin 5elo, t$is text 5loc6 and our Contact Form & element.Belo, t$e contact form is a lare s"acin section.

Before you can use t$e Contact Form & element6 you ,ill need to create a contact formin t$e Contact section of your WordPress admin.


15/18

If you do not see t$is6 it means you $ae not u"loaded all of t$e "luins t$at arenecessary for t$is t$eme. ;ou ,ill need to o 5ac to ?Installation@ and redo Ste" 1. If t$at still doesnot sole your "ro5lem6 "lease contact us ia su""ort ticet.

'nce you $ae otten to Contact Form &6 you ,ill need to clic ?Add 0e,.@ ;ou ,ill

t$en follo, t$e directions to add t$e ne, contact form.

W$en you are addin your Contact Form & element6 you ,ill 5e ased ,$ic$ ContactForm you ,is$ to use on t$at "ae. Please select t$e contact form you ,is$ to use6 or t$at you 4ustmade for t$is "ur"ose.

#$ere are no tem"lates for t$is "ae. #$e $eadin style is default. And in t$e demo6 ,e$ae not added a slider to t$e "ae.

0o, you s$ould $ae t$e 5asic structure of your ,e5site and a 5etter ras" on t$e elements t$at,e $ae "roided you ,it$ as ,ell as a dee"er understand of !isual Creator. If you need any assistance,it$ !isual Creator6 "lease contact us ia su""ort ticet.

Content Bloc#s

Content 5locs are used to reuse content. ;ou can insert content 5locs in t,o different ,ays.#$e first is usin t$e !isual (ditor. #$e editor as an element named :Bloc: under t$e ta5 la5eled:Structure.:

In addition to t$is6 you can use t$e content 5locs in side5ars and footer areas usin t$e 5locs,idet. #$e ,idet can 5e found under A""earance Widets.

For more information a5out our ,idets6 "lease continue readin t$is documentation.
https://squidix.com/clients/submitticket.php?step=2&deptid=9https://squidix.com/clients/submitticket.php?step=2&deptid=9https://squidix.com/clients/submitticket.php?step=2&deptid=9https://squidix.com/clients/submitticket.php?step=2&deptid=9


16/18

T!itter Pro $ettings

#$e #,itter Pro Settins used in t$e demo are t$e default settins for #,itter Pro. ;ou ,ill needto enter your #,itter account a"" eys and aut$oriDe your account. At t$at "oint6 you ,ill 5e ready touse t$e Widet in A""earance Widets to "ut t$e t,itter feed any,$ere you ,ant.

#$e t,itter feed ,ill automatically 5e in your footer ,$ere it is dis"layed in t$e demo.

%a&er$lider

LayerSlider is a slider "luin t$at ,e $ae im"lemented in Fiction. In order to mae ne, slidersyou ,ill need to naiate to LayerSlider WP Add 0e,.

Follo, t$e directions on t$e screen6 eac$ o"tion $as a descri"tion next to it. #$ere are t$ree ta5s


17/18

at t$e to". :lo5al Settins: ,$ic$ ,ill "roide for t$e slider s"ecific settins6 :Slides: ,$ic$ is ,$ereyou ,ill add layers and u"load imaes and content6 and :(ent Call5acs: ,$ic$ you ,ill only use ifyou are a deelo"er customiDin t$e eent call5acs.

'nce you $ae "u5lis$ed t$e slider6 you can o to LayerSlider WP All Sliders and you ,illsee a s$ortcode and a slider IG. #$is slider IG ,ill 5e used your "osts or "aes. )nder ?Fiction

'"tions@ you ,ill see an o"tion t$at says ?Slider IG.@ If you "lace t$e slider IG in t$is content 5ox6your slider ,ill a""ear on t$e "ae.

'i(o$lider

Similarly6 t$e 0ioSlider is a slider "luin t$at $as 5een interated ,it$ Fiction. In order to adda ne, slider to t$e 0ioSlider6 you ,ill need to o to 0ioSlider Add 0e,.

As in t$e LayerSlider6 you ,ill need to follo, t$e directions as you are fillin in t$e settins fort$e slider. (ac$ settin $as its o,n descri"tion.

#o u"load imaes6 you ,ill need to use t$e u"loader t$at is "laced at t$e to" of t$e add slider"ae.

After you $ae finis$ed creatin your slider6 you ,ill o to 0io Slider 0io Slider and you,ill see a list of sliders. ;ou s$ould use t$e s$ortcode "roided in t$is list to use your slider.

)ueries


18/18

In t$e !isual Creator6 under t$e :'t$er: cateory in t$e elements you ,ill find :uery.: In orderto use t$e "ortfolio and 5lo tem"lates6 you ,ill need to add a query element to t$e "ae.

A query "ulls from t$e data5ase. enerally6 t$e only time you ,ill need to use a query is ,$en"ullin data for a taxonomy Ls.
http://codex.wordpress.org/Class_Reference/WP_Query#Parametershttp://codex.wordpress.org/Class_Reference/WP_Query#Parameters

Fiction for WordPress

Documents

Transcript of Fiction for WordPress