Are you a new editor who has just joined and has no idea what to do? Or are you an older editor who does not feel comfortable with switching between the Visual Editor and Source Editor? Or maybe you have always used only VE (the Visual Editor) and you keep hearing from more experienced Fandom members that SE (the Source Editor) is a blessing? Here is how you can learn to use both! Buckle up, Lucy is on the line!
The very basics of Fandom
So, you are new here, you feel scared and excited but also clueless about how everything works. Let us start from the beginning.
What do we do here on Fandom?
Our main task, as editors, is to provide content for readers in the most easily accessible way. Simply speaking: you write, they read. We have a big number of tools at our disposal to help us make our wikis beautiful and our articles readable, we use different ways of text layout, we highlight important parts of the text, we use hyperlinks to lead our readers to necessary sources and so on. We try hard to make our communities happy with all the information they can find on our pages.
What pages do I need to create?
If you have joined an existing wiki, there is a very high possibility that you do not need to bother with design or templates or the main page because everything has already been done before you. However, if you have created a new community, it can be a rather complicated task to build it from 0 level.
- Main page. This is the first page your readers see when they open your wiki, it is the front page and a showcase of what kind of content your wiki has to offer. It usually has 2 columns (see this guide for special tags) and the content of it is usually unified even though it can vary: there is brief information about the topic of your wiki, there is a menu with links to the most important pages depending on the wiki category (characters, chapters, and so on for movie/series/anime wikis; or game modes, items, weapons, etc for gaming wikis), there might be some links to social media, the admins' profiles and help pages. Again, it is the traditional way of doing things, it does not mean that you are not allowed to customize it. However, using mainpage tags from the link above is a must.
- The main namespace: articles. This is what we are here for! It is our main content pages with:
- extended information about the topic (like a separate article about the movie/series or a game as a whole);
- detailed information about each character/chapter/episode/item/weapon and so on;
- groups of characters/organisations/items/maps with their description (check Order of the White Lotus on Avatar Wiki for an anime example or Classes on Disney Speedstorm Wiki for a game example);
- information and pictures of various locations;
Not a must but could be a good idea:
- voice actors;
- soundtrack;
- game guides (for gaming wikis).
NOTE: You should aim for articles to be at least two paragraphs long (taking approximately half of your screen space) to be included as a separate article on the wiki. Pages containing only a single line should be avoided, and you should not add unnecessary information (also known as "fluff") just to reach the two paragraphs. If you are not sure your articles can be big enough, combine the descriptions with other related articles into one common article with headings.
- Categories. These pages are not meant to contain a lot of text, they are meant to be a list of all articles related to a specific topic. It could be a 'Characters' category containing all pages about the movie/cartoon/anime/series/game characters.
- Templates. These pages are used for storing some data that is repeated on many pages and parsed from the template page. Simply speaking: we do not repeat 'Hello I am a great new editor' on each article, we create a template with this text and then use {{Hello}} on all 10000 articles and the text gets repeated on each of them. If you then want to add 'Nice to meet you' to it, would you need to edit all 10000 pages again? No! You only edit the template page, and it gets added to all 10000 of them!
Visual Editor
When you press 'edit' on a page, it opens the Visual Editor for you (there is also the Source Editor but that is a bit further). This is what you can do with the tool bar on top of the page:
The way you see the page in the Visual Editor is very close to the way you will see it when it is ready.
The two Editors
What's the difference?
There are 2 options to edit on Fandom: VE and SE. There are also two variations of SE but it does not matter which one you choose, the way it works will be the same. Simply speaking, the Source Editor is writing the raw page code (with or without MediaWiki markup) while the Visual Editor is similar to Microsoft Word: you see what style the elements have (big/small letters, link colors, images, etc) and you can move them around with your mouse, without writing any extra commands.
The VE lets you play with different elements on the page without bothering too much; whatever you do, Fandom generates the page code for you on the background automatically, you do not even see it. The SE, on the other hand, requires knowing precisely what you are doing because the text you are writing gives Fandom different commands such as 'hey, I want to have a heading here so look at these things == and turn them into a heading, please'.
It is worth mentioning that most experienced editors will advise you to forget about the VE and use the SE all the time. The reason for this is very simple: you have much more control over the situation with the SE and you have far more ways to customize your page layout. Fandom's Source Editor is how many editors fell in love with web development!
How to write a code in SE
This part of the guide is not meant to turn you into an IT god of some sort, it is meant to show you the equivalents, what you do in VE vs. how to do the same in SE.
Headings
The first thing we usually add to our page is headings. There are 6 levels supported: from Heading 1 to Heading 6. Heading 1 is the page title, we should not use it on our articles. Headings from 2 to 4 are the most used ones, sometimes even 2 and 3 are enough for a big article. If there are too many nested headings, it might be a good idea to consider splitting the information into a few pages.
NOTE: the "Headings font" setting in Theme Designer will only apply to H2 and smaller headings. The H1 heading won't get the desired style.
Let us see how to add headings in both editors.
Here you choose what kind of heading you want to see in this particular spot. You highlight the text with your mouse and press the correct button on the panel.
Source Editor:
- You can use the MediaWiki markup and wrap your text that is supposed to be a heading into ==:
==I am a heading level 2 (like the one used above with 'How to write a code in SE')==
===And I am a heading level 3 (like the word Source Editor above)=== - Or you can also use the HTML markup if you know how it works and feel more comfortable with it (or if you would like to learn, check this guide):
<h2>I am a heading level 2 (like the one used above with 'How to write a code in SE')</h2>
<h3>And I am a heading level 3 (like the word Source Editor above)</h3>
B I U
The next thing we will be covering is bold, italic and underlined text. Both editors have the three magic buttons on the toolbar: B I U. However, while using SE, it might sometimes be easier to write it with code without using your mouse to press the buttons on top.
- MediaWiki: '''bold''', ''italic'' and <u>underlined</u>
- HTML: <b>bold</b> (or <strong>bold</strong>), <i>italic</i> (or <em>italic</em>) and <span style="text-decoration: underline;">underlined</span>
- Magic: Highlight the word and press ctrl+B, crtl+I or ctrl+U for the same effect!
Links
Visual Editor:
- We write our text the way we want to see it;
- With our mouse we highlight the word we need to turn into a link;
- We press
on the toolbar and type in the name of the page where we want the link to redirect us; - Press anywhere else on the text to remove the highlighting and see our link added!
Source Editor:
- If the page name where we link and the word in the text are the same, we simply wrap the word into [[ ]] (the brackets serve as indicators to tell Fandom 'here goes my link'): [[Disney Speedstorm]].
- If the word in the text is different from the page name, we write the page name, add a vertical line | and then mention how we want to see it in the text: My wiki is about [[Disney Speedstorm|the best racing game]].
The way readers would see it is the following: My wiki is about the best racing game. And when they click on the colored text, they get redirected to the page called Disney Speedstorm. - We can also redirect people to specific headings on pages, a heading is added to the link with a #:
[[Disney Speedstorm#About the game|the best racing game]].
NOTE: if we redirect to headings, we always need to add |text for it to be displayed correctly on the page.
Pictures
Pictures are extremely important to make our article look presentable and attractive. Adding pictures is not a difficult task, however, there is one rule: all pictures must be uploaded to the wiki you are working on. Taking them from other wikis and/or external websites is not possible (unless there is a shared images repository enabled but that is not a newcomer-related topic).
- To insert a picture in VE, we press
and choose what we would like to do now: search for an existing picture (if we know or can guess its name on the wiki) or upload a new one. If we search for an existing one, we just proceed, if we wish to upload a new one, we choose it on PC, we give it some time to upload meanwhile setting the name and the description for it, and the next button we see is this: . - After we press this button, we see 2 other buttons: General and Advanced. If we just need the picture the way it is, General is enough for us. We can add Caption (the text under the picture that explains what this picture is) or Alternative text that is used in case the picture cannot be seen (especially useful for blind people who view the page via screen readers).
- If we choose to change some Advanced settings, we can adjust the picture positioning (for people familiar with CSS: it adds floating), we can choose Image type (check more about each of them here if you are curious) and we can also change the size of the picture if we need to. Then we press and our image is added!
We can also press 
to upload multiple images at once by dragging them to the window or selecting them on PC.
Source Editor: pictures are used as hyperlinks to image pages on the current wiki. Only the MediaWiki markup can be written here, <img> tags do not work.
- To insert a picture, we simply need to start with [[ to point at a link, then File: to indicate that we need a picture and not an article, then the file name with its resolution Picture.png and then close the link with ]]. So our file link looks this way: [[File:Picture.png]].
- If we need any extra information about the file (size, position, caption, etc), we place each parameter before the closing ]] and separate them with a vertical line |. Adding the central positioning will work this way: [[File:Picture.png|center]].
- If we also want our picture to be 100px wide and 100px tall, we use width first (without the word pixels), then x to indicate that we are about to have both width and height assigned, and then the height with px: 100x100px. And adding it to our picture looks like this: [[File:Picture.png|100x100px|center]] (NOTE: the order of the elements that are not colored does not affect anything).
- To add Alternative text, we need to let Fandom know that this particular text needs to be classed as alternative, hence the command: alt=alternative text here. [[File:Picture.png|100x100px|center|alt=This is a picture of the main character]]
- To add Caption, we need to also add the image type to our picture: thumb. And after that we type the text we want to see under the picture: [[File:Picture.png|100x100px|center|thumb|The main character in his grandma's house]]
- The fun part, SE only! How to add a link to our image? So that we press on the image and we go to another page!
[[File:Picture.png|link=PageNameWhereWeGo]].
Templates
Templates are a great way to reduce the number of repetitions you have to do on pages. You create 1 page with a code and then on all other pages you just ask Fandom to send you over the code without re-typing it. It is called 'parsing data from templates to articles'. And if you decide to update something, you still have to edit only one page, and all the other pages containing this template will update automatically.
NOTE: To insert a template, make sure it exists on the wiki!
Visual Editor:
- We click INSERT on the toolbar, find the word Template, click on it and type in the name of a template that exists on the current wiki;
- We see all the placeholders available to fill in (to know more about how to build and use templates, check this guide), we type in the information we want displayed (if you do not fill in some of the placeholders, the information they need will not appear at all);
- We press .
Source Editor:
This guide on templates gives a more detailed description on how templates are built and how they work. Here we are looking at a brief overview.
- If the template we need does not have any placeholders to fill in, we type {{, the template name and }} on one line: {{stub}}. (Stub is a template that exists on all wikis and can be styled the way we want. It is used to say that the current article is unfinished and needs more love from editors.)
- If the template has different parameters and we need to tell Fandom what to do with those parameters, we start the same way by writing {{TemplateName on the first line, and then we start each new line with |parameter_name= without any other symbols, then after = we write the text that we want displayed. For example, if I use |editor_name=Lucy, it will put my name into the template I am using. And we finish our template with }} on the last line:
}}
Infoboxes
There is a huge guide on how to build and use infoboxes right here for you to check, so we are going to have a brief overview here to cover the basics.
Visual Editor:
- We click INSERT on the toolbar, find the word Infobox, click on it and see all templates with type "infobox" that exist on the current wiki. We cannot type in a name that is not on the list, but it also gives us an option to create a new infobox right on the page using the Infobox Builder.
- We click on any existing infobox and see if we need to fill in any placeholders. If we do, we fill them in. If we do not, we just press .
Source Editor:
Tables
Tables are a great way to display statistics on our articles. And Fandom has a lot of different tools and options to make table editing as easy as breathing.
Visual Editor:
It is one of the rare things that even experienced editors use from time to time as it makes building tables extremely simple. What we do is:
- Press INSERT on the toolbar;
- Press 'Table';
- Job done! You are amazing!
You can play with the table in any way you want by pressing on arrows next to each cell: delete/add rows/columns, highlight a few cells to merge them into one, or you can find some default settings by pressing 'Properties' after your table has been created or when you select a cell:
Caption is a big heading for the whole table.
Styled means we use the default Fandom table styling instead of writing a code.
Sortable means there is an arrow to sort everything in our table by alphabet.
Collapsible means the content can be hidden with a button (and collapsed initially = it is hidden when we open the page).
Source Editor:
Using SE gives all the ways for customization possible so most experienced editors prefer to stick to this mode. Even though Fandom is perfectly fine with using the HTML markup for tables (with <table>, <th>, <td> tags), it is traditionally done with the MediaWiki markup, therefore we are going to focus on that part.
- To start our table, we need to use {|. They are 2 key symbols to tell Fandom 'hello, here goes my table'. Ideally we need some styling afterwards, we could do that in CSS or we could just use the default styles that Fandom has kindly prepared for us: wikitable and article-table. These two are classes, it means they are like storage boxes that contain a lot of code, even though we do not see it, it is generated on the background when we call for it. So the first line (the same as what the VE generates for us) will be the following:
{| class="wikitable" - Then we need to decide if we are going to have any headings for columns. Let us say we would like 3 columns and 2 rows + 1 extra row for headings. To add a heading, we need to use the magic symbol ! on the next line.
NOTE: table layouts can be hard to visualize because the code always goes from top to bottom, vertically, while your columns are horizontal. You need to keep in mind that even though we write things vertically in the source code, it does not mean that they will be displayed vertically.
{| class="wikitable"! Heading 1! Heading 2! Heading 3As you can see, they are very vertical, however, the output we will get is the following:
Heading 1 Heading 2 Heading 3 - The next thing we need to add is a row breaker, something that will let us go into vertical mode on display, and this is |-. It is located on a separate line and pushes all the following content down rather then aside. After that we can add a row of our content cells. Content cells are added with a single vertical line |.
{| class="wikitable"! Heading 1! Heading 2! Heading 3|-| Content cell 1| Content cell 2| Content cell 3This is the display we will get:
Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 - And now we can add one more row and close our table (!) with |}. Closing is very important, otherwise our table will not work correctly.
{| class="wikitable"! Heading 1! Heading 2! Heading 3|-| Content cell 1| Content cell 2| Content cell 3|-| Content cell 4| Content cell 5| Content cell 6|}Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6
Styling tables
This part is slightly more complicated, and it might be a good idea to have a look at this big guide about HTML and CSS; but we will still include some juicy stuff here and style our table from above.
If we would like to style the whole table in general, we would need to add style="" after class="wikitable". Each style needs to be separated with a semicolon ; and needs to be placed inside the quotation marks "".
- Let us start with table width. We can adjust it with pixels, percentage or magic words. Have a look at our table that starts with {| class="wikitable" style="width: 500px;"
Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 And this is {| class="wikitable" style="width: 30%;" which means the table will adjust to any screen size and take up 30% of the page space (hide the right rail and you will see that it gets wider unlike the first one that will always stay 500px).
Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 There is a magic word that can save us when we are not sure how wide the table needs to be: fit-content. It basically means 'make it as wide as it needs to be, not more not less'.
Here is {| class="wikitable" style="width: fit-content;"Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 So if I now add a very long word to the same table, it will stretch exactly as much as needed (still with fit-content):
Heading 1isAVeryLongHeading Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6isAReallyLongContentCell -
The next popular parameter is centering the text. It is done simply with text-align: center.
{| class="wikitable" style="width: 500px; text-align: center;"Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 -
Let's add colors! If we want all cells to be red, we need to use background-color: red on the whole table.
{| class="wikitable" style="width: 500px; text-align: center; background-color: red;"Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 However, if we need only some cells to change their background, we have to style each of them separately. It will require us to add style="" | (pay attention to the second vertical line) before the content of our cell). Let us edit Content cell 1, 3 and 5:
| style="background-color: blue;" | Content cell 1 | style="background-color: green;" | Content cell 3 | style="background-color: orange;" | Content cell 5
Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 -
Another useful thing is to know how to make our table sortable and collapsible. Both functions are added with extra classes, so we turn our {| class="wikitable" into {| class="wikitable sortable" or {| class="wikitable mw-collapsible".
If we add only mw-collapsible, it adds the button to collapse but the table is still expanded when the page is first open. For the table to be collapsed from the start, we also add mw-collapsed:
{| class="wikitable mw-collapsible mw-collapsed".
NOTE: the Expand button takes up space in the last heading cell, so it might be a good idea to create an extra ! for it:
! Heading 1 ! Heading 2 ! Heading 3 !Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6 Otherwise it will look like this:
Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6
And with sortable our table will look like this:
{| class="wikitable sortable mw-collapsible mw-collapsed"Heading 1 Heading 2 Heading 3 Content cell 1 Content cell 2 Content cell 3 Content cell 4 Content cell 5 Content cell 6
Categories
Categories are important for keeping articles in check. With categories people can narrow down their search on the wiki, and admins can keep track of all the pages related to the same topic.
Adding categories in VE happens after the page is ready and saved, we need to scroll all the way down, find the word 'Categories', press on it and press . After we type in the name (for example, 'Characters' or 'Items'), we press Enter to make sure our category is added to the list before we can add some more. Our new category will have a frame around it. After we have added everything we wanted, we press .
Adding categories in SE is even easier: we start with link indicators [[, then the word Category: and then the name we need before the closing ]]. For example, this page has [[Category:Blog posts]].
That is it! Enjoy your stay!
