Fiction for WordPress

By Squidix LLC

Table of Contents
Fiction for WordPress.................................................................................................................................1 Introduction......................................................................................................................................2 Installation........................................................................................................................................2 Administration..................................................................................................................................3 Installin !isual Com"oser...............................................................................................................3 #$e % Basic #em"lates......................................................................................................................& 't$er #em"lates and (ditin or Addin #em"lates..........................................................................& )sin #em"lates...............................................................................................................................* +o, to -a.e #$e Standard Pa es..................................................................................................../ Content Bloc.s................................................................................................................................1* #,itter Pro Settin s........................................................................................................................1/ LayerSlider.....................................................................................................................................1/ 0i1oSlider.......................................................................................................................................22 3ueries............................................................................................................................................22 -iscellaneous.................................................................................................................................21

Introduction
#$is documentation ,ill assist you in installin and settin u" t$e t$eme you $a1e 4ust recently "urc$ased. Squidix LLC ,ould li.e to ma.e t$e "rocess as easy as "ossi5le. #o $el" do so6 ,e $a1e a t$eme installation ser1ice for 4ust 718.// and a com"lete installation ser1ice for 4ust 728.//. If you are interested in our installation ser1ices6 "lease ma.e a su""ort tic.et 5y clic.in $ere and 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 "ro1ide free limited su""ort 1ia su""ort tic.et.

Installation
#o install Fiction6 "lease follo, t$e next fe, ste"s. If you encounter any "ro5lems6 "lease send us a su""ort tic.et. 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) and navi$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 Theme,orest file you downloaded. ,inally, activate the theme3. 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.

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 and chan$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 en1ironment6 ,e $a1e im"lemented t$e !isual Com"oser "a e 5uilder "lu in for WordPress in Fiction. #$e !isual Com"oser is mostly self ex"lanatory and t$e documentation for t$e "lu in $as 5een included in t$e documentation folder "ac.a ed ,it$ t$is t$eme. We $a1e im"lemented a num5er of t$eme s"ecific elements in addition to t$e default elements in t$e !isual Com"oser. -ost of t$ese elements are clearly s$o,n in t$e demo. It is highly recommended 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$e directions 5elo, 1ery s"ecifically if you c$oose not to im"ort t$e 9-L files.

The 5 Basic Templates

In fiction6 t$ere are fi1e 5asic tem"lates t$at you must $a1e. Wit$out t$e fi1e 5asic tem"lates your ,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

"anel.

;ou ,ill no, find a list of tem"lates. #$ese tem"lates ,ill define t$e ,ay t$e "a e t$at t$e tem"late is assi ned to loo.s. #$e fi1e 5asic tem"lates are as follo,s. Blo A listin$ of posts that contains information such as cate$ory, author, archive, date, etc Pa e The default template for a sin$le pa$e. Portfolio A listin$ of portfolio items that contains information such as cate$ory, author, archive, date, etc Portfolio Item A sin$le portfolio item. Post A sin$le post

#$ese tem"lates must exist in your WordPress instance.

Other Templates and Editing or Adding Templates

We $a1e made ot$er tem"lates for t$is t$eme. #$ese tem"lates are as follo,s and are default tem"lates. 828 Feature Pa e Portfolio Item <Alternate Style= Left Side5ar >i $t Side5ar

;ou may ma.e your o,n tem"lates as ,ell 5y clic.in ?Add 0e,@ on t$e tem"late "a e and addin elements usin t$e !isual Creator.

Sim"ly add elements no, and you ,ill $a1e 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,n under ?Fiction '"tions@ ,$en editin a "a e or "ost.

5t is important to note that there are two o"7ects on this pa$e that are la"eled (template.* 'ou will 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 $a1e created a ste"A5yAste" tutorial to $el" you create t$e standard "a es for your 5lo or ,e5site.

#$e standard "a es are +ome6 Blo 6 Portfolio6 A5out )s6 F.A.36 and Contact )s. If you $a1e already im"orted t$e demo content6 you s$ould $a1e t$ese "a es already and you can s.i" t$is section if 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 Pa e 1. We ,ill not o o1er all of t$e $ome "a es as t$ey are similar in t$e set u" "rocess. #$e elements you c$oose for your $ome "a e are entirely u" to you. +o,e1er6 for our +ome Pa e 1 ,e $a1e c$osen to include icon 5loc.s on t$e to". #o start6 o to Pa es B Add 0e,. #itle t$e "a e ?+ome@ or ,$ate1er suits your needs. 0ext6 if t$e 1isual creator is not u" yet6 clic. ?!isual Creator@ <t$e 5lue 5utton=. After t$e 1isual creator is u"6 clic. ?Add (lement@ and c$oose ?Icon Bloc. <Style 3=.@ ;ou ,ill not see t$e icon 5loc.6 and you ,ill need to use t$e searc$ 5ar in t$e ri $tA$and to" corner to searc$ for t$e icon 5loc.. 'nce you $a1e inserted t$e icon 5loc.6 you ,ill see o"tions to select an icon. We "ro1ide 5uiltAin icons for your con1enience. ;ou may c$oose one of t$ese icons or use your o,n. Fill in t$e rest of t$e information <#itle6 Content6 and )>L=. 'nce you $a1e su5mitted t$e information6 you ,ill see t$e element you $a1e 4ust added. It ,ill loo. li.e t$isC

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

#o use t$e same t$reeAicon set u" t$at ,e $a1e6 you ,ill need to c$oose t$e 8t$ o"tion ,$ic$ s$o,s t$ree columns. ;ou ,ill no, see t$at your lon icon 5loc. $as 5een di1ided into t$ree columns.

;ou can add more elements in t$ese 5loc.s. We $a1e added t,o more icons. 'nce you $a1e 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 Lar e S"acin element. ;our finis$ed to" section s$ould loo. li.e t$isC

We $a1e added a "ortfolio carousel to t$e first $ome "a e. In order to do t$is6 you need to $a1e an element named ?3uery@ in t$e elements listin . 'nce you $a1e added t$is6 you ,ill 5e as.ed to enter a query. For more information on queries6 "lease read t$is section. #$e query ,e $a1e used for t$is "a e isC post8type9portfolio-item:nopa$in$9true 'nce you $a1e 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 fill out t$e information t$at is associated ,it$ t$is element as ,ell. In t$e demo6 ,e $a1e used t$e $eadin :>ecent Wor.s6: t$e default $eadin le1el6 siDe 86 carousel inter1al 16 infinite :yes:6 circular :yes:6 and "lay automatically :no:. If you do not ,is$ to $a1e a "ortfolio carousel on your $ome"a e6 you can su5stitute t$is element for anyt$in you:d li.e6 or you can com"letely remo1e t$is element from your layout. ;ou ,ill need to add a lar e s"acin element 5elo, t$e carousel. ;our finis$ed "ortfolio carousel s$ould loo. li.e t$isC

;our "ortfolio items ,ill automatically 5e ta.en from t$e "ortfolio items you set u" in Portfolio B 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 clic.in t$e reen ?E@ sym5ol ,$en you $a1e added t$is element. A ain6 you ,ill need to add a lar e s"acin element 5elo, t$e ta5s section. #$e next column of t$is t$reeAcolumn section you ,ill need to add a ?+eadin @ element. #$is $eadin element ,ill ser1e to "ro1ide a title for your next section. #$ere are four le1els of $eadin s and ,e $a1e c$ose t$e second on t$e demo. We $a1e named our $eader ?W$at ,e do@ and t$en added a text 5loc. element 5elo, t$e $eadin . Belo, t$is6 you ,ill need a lar e s"acin element. #$e testimonials carousel is a carousel element ,it$ t$e $eadin as :testimonials:6 $eadin le1el as :2:6 siDe as :1:6 carousel inter1al as :1:6 infinite as :yes:6 circular as :yes:6 and "lay automatically as :no:. Inside t$e element for t$e carousel are testimonial elements. #$ese elements "ull t$e text you "ro1ide in t$e W;SIW;F editor to "ro1ide in t$e carousel. ;ou ,ill need a lar e s"acin element 5elo, t$e last testimonial you enter. ;our finis$ "roduct in t$is s$ould loo. li.eC

Finally6 to finis$ t$e "a e ,e $a1e added a 5loc. element and a lar e s"acin element at t$e 5ottom. #$e 5loc. element is em"ty.

#$is "a e $as no tem"late associated ,it$ it. It $as LayerSlider IG 1 associated ,it$ it6 5ut you ,ill create your o,n LayerSliders and $a1e your o,n IGs. #$e $eader style is default.

Blog Com"ared to t$e $ome "a e you 4ust created6 t$e 5lo is muc$ easier. #$ere are four elements t$at you ,ill need to add. Start off 5y creatin a ne, "a e and namin it :Blo :. #$en6 add t$e element :Call'ut 3:. #$is element is a messa e t$at you can dis"lay to your "a e 1ie,ers. If you do not ,is$ to $a1e t$is6 t$en sim"ly do not add t$is. ;ou ,ill need to "lace a lar e s"acin element 5elo, it. If you do c$oose to $a1e t$is6 it ,ill a""ear similar to t$is on your "a e.

#$e finis$ed "roduct in your !isual Creator ,ill loo. li.e t$isC

0ext6 ,e ,ill 5e addin a query 5loc. to dis"lay t$e 5lo . ;ou ,ill not need to enter a query for t$e 5lo to 5e dis"layed unless you are loo.in to do somet$in custom. So 4ust lea1e t$e query 5ox em"ty and clic. ?Sa1e.@ 0ext6 enter t$e element :Blo Style 1: <if usin anot$er 5lo style6 enter t$at 5lo style= and clic. ?Sa1e.@ ;ou ,ill need to dra t$e elements to t$e "lace you ,ould li.e t$em and t$en delete t$e extra ro,. As t$is may 5e confusin 6 ,e $a1e "laced a screens$ot 5elo, demonstratin t$e extra ro, after t$e element $as 5een mo1ed. Sim"ly delete t$at ro, 5y clic.in t$e ?9@ in t$e to" corner of t$at ro,.

;ou may c$oose to $a1e a slider on your 5lo "a e. #$ere is no tem"late associated ,it$ t$is "a e. #$e $eader style is default. And t$ere you $a1e it6 you:1e ot yourself a functionin 5lo H Port olio Start 5y addin a ne, "a e and namin it ?Portfolio.@ Add a ne, query element. ;ou ,ill need to use a query for t$is ty"e of "ost as you are not dis"layin t$e 5lo 6 5ut instead dis"layin t$e "ortfolio. In order to tell WordPress t$at you ,is$ to dis"lay t$e "ortfolio6 you ,ill need to insert t$is queryC post8type9portfolio-item:nopa$in$9true #$is query ,ill "ull all "ortfolio items and dis"lay t$em. 0ext6 you ,ill need to add a Portfolio <Style 1= <or if you are usin anot$er style6 feel free to add t$at= into t$e query. ;ou ,ill need to dra and dro" t$e element into t$e query. In t$e "ortfolio6 a filter is t$e cate ory ta5 filter ,$ere you can c$oose ,$et$er you filter t$e "ortfolio items 5y cate ory or not.

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

!"out Us Similarly6 you can add many elements in t$e a5out "a e. #$e a5out "a e s$ould 5e tailored to your ex"ectations for your com"any. In our a5out "a e6 ,e $a1e a ?W$o Are We@ text 5loc.6 a testimonials carousel6 and a Call'ut 1 element for t$e to" section. #$e Call'ut 1 element loo.s li.e t$isC

#$ere is a lar e s"acin 5loc. 5elo, t$is element. #$is element is fairly self ex"lanatory after you $a1e added it. #$e ?W$y C$oose )s@ section is anot$er text 5loc. ,it$ a $eadin . #$e ?'ur S.ills@ section is a text 5loc. usin s$ortcodes to "ro1ide for t$e "ro ress 5ars. #$ese s$ortcodes loo. li.e t$isC
[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 $a1e added a team carousel on t$is "a e.

#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.C

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

#.!.$. Page It is fairly sim"le to add t$e FA3 into a "a e. All you need to do is insert t$e FA3 element. #$e FA3s are descri5ed in FA3 B Add 0e,. Because t$e FA3s are t$eir o,n "ost ty"e6 you ,ill need to define t$em li.e you did ,it$ t$e "ortfolios. #$e title of a FA3 is t$e question and t$e content is t$e ans,er. If you s$ould li.e6 you can c$oose to filter t$e FA3 5y cate ories muc$ li.e you can ,it$ t$e "ortfolio items. 'n t$e side of t$e FA3 "a e6 ,e $a1e added a ,id etiDed side5ar. #$e result of your FA3 "a e ,ill loo. li.e t$isC

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

Conta%t Page For t$e contact form in Fiction6 ,e $a1e used Contact Form &. Contact Form & is a "lu in t$at $as 5een inte rated into !isual Creator. For t$e to" section of our contact "a e6 ,e $a1e added a Foo le -a"s element. #o do t$is6 add t$e element ?Foo le -a"s@ and fill out t$e information as directed. Belo, t$e Foo le -a"s element s$ould 5e a -edium S"acin . Create a ne, ro,6 or section6 and ma.e t$is ro, t$e It$ o"tion of columns. 'n t$e leftA$and side6 ,e $a1e added a text 5loc. element ,it$ our contact information. #$ere is a lar e s"acin 5elo, t$is text 5loc.. In t$e lar e column6 ,e $a1e added a $eadin 6 a small s"acin 5elo, t$e $eadin 6 a text 5loc. ,it$ Lorem I"sum6 a small $eadin 5elo, t$is text 5loc.6 and our Contact Form & element. Belo, t$e contact form is a lar e s"acin section. Before you can use t$e Contact Form & element6 you ,ill need to create a contact form in t$e Contact section of your WordPress admin.

If you do not see t$is6 it means you $a1e not u"loaded all of t$e "lu ins t$at are necessary for t$is t$eme. ;ou ,ill need to o 5ac. to ?Installation@ and redo Ste" 1. If t$at still does not sol1e your "ro5lem6 "lease contact us 1ia su""ort tic.et. 'nce you $a1e 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 as.ed ,$ic$ Contact Form you ,is$ to use on t$at "a e. Please select t$e contact form you ,is$ to use6 or t$at you 4ust made for t$is "ur"ose. #$ere are no tem"lates for t$is "a e. #$e $eadin style is default. And in t$e demo6 ,e $a1e not added a slider to t$e "a e.

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

Content Bloc#s
Content 5loc.s are used to reuse content. ;ou can insert content 5loc.s 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 5loc.s in side5ars and footer areas usin t$e 5loc.s ,id et. #$e ,id et can 5e found under A""earance B Wid ets. For more information a5out our ,id ets6 "lease continue readin t$is documentation.

T!itter Pro $ettings

#$e #,itter Pro Settin s used in t$e demo are t$e default settin s for #,itter Pro. ;ou ,ill need to enter your #,itter account a"" .eys and aut$oriDe your account. At t$at "oint6 you ,ill 5e ready to use t$e Wid et in A""earance B Wid ets 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 "lu in t$at ,e $a1e im"lemented in Fiction. In order to ma.e ne, sliders you ,ill need to na1i ate to LayerSlider WP B 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

at t$e to". :Flo5al Settin s: ,$ic$ ,ill "ro1ide for t$e slider s"ecific settin s6 :Slides: ,$ic$ is ,$ere you ,ill add layers and u"load ima es and content6 and :(1ent Call5ac.s: ,$ic$ you ,ill only use if you are a de1elo"er customiDin t$e e1ent call5ac.s. 'nce you $a1e "u5lis$ed t$e slider6 you can o to LayerSlider WP B All Sliders and you ,ill see a s$ortcode and a slider IG. #$is slider IG ,ill 5e used your "osts or "a es. )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 5ox6 your slider ,ill a""ear on t$e "a e.

'i(o$lider
Similarly6 t$e 0i1oSlider is a slider "lu in t$at $as 5een inte rated ,it$ Fiction. In order to add a ne, slider to t$e 0i1oSlider6 you ,ill need to o to 0i1oSlider B Add 0e,.

As in t$e LayerSlider6 you ,ill need to follo, t$e directions as you are fillin in t$e settin s for t$e slider. (ac$ settin $as its o,n descri"tion. #o u"load ima es6 you ,ill need to use t$e u"loader t$at is "laced at t$e to" of t$e add slider "a e.

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

)ueries

In t$e !isual Creator6 under t$e :'t$er: cate ory in t$e elements you ,ill find :3uery.: In order to use t$e "ortfolio and 5lo tem"lates6 you ,ill need to add a query element to t$e "a e. A query "ulls from t$e data5ase. Fenerally6 t$e only time you ,ill need to use a query is ,$en "ullin data for a taxonomy <usually for "ortfolio and 5lo "osts=. For t$e documentation on t$e 3uery API clic. $ere. Belo, are a fe, common queries. "ostJty"eK"ost ;efines that we will "e $ettin$ "lo$ posts. "ostJty"eK"ostLno"a in Ktrue ;efines that we will "e $ettin$ "lo$ posts, "ut wish to display them all on one pa$e. "ostAty"eK"ortfolioAitem ;efines that instead of a "lo$ post, we want a portfolio item. "ostAty"eK"ortfolioAitemL"ostsJ"erJ"a eK12 ;efines that we want portfolio items to "e listed, and then we only want .< per pa$e. A pa$ination will then ta#e effect allowin$ you to "rowse throu$h pa$es of .<.

"iscellaneous
If you are $a1in an issue ,it$ IFrames a""earin a5o1e ot$er content6 try addin M ,modeKtrans"arent to t$e )>Ls.