Fandom

This War of Mine Wiki

Comments0

Wiki Code 101

(Redirected from Wiki Code 101)
TWOM Logo
You don't need to know html in order to create Wiki pages, and Wikia's visual editor helps to make things SUPER easy.

I learned how to code Wikis with a Wiki that didn't have a visual editor, and thus I had to learn how to format wiki pages using MediaWiki code. It sounds a lot harder than it is. While Using Wikia's visual editor can be grand, sometimes it doesn't quite give you what you want. That's when you'll want to look at the code for the page you're editng in Source Mode just to check that nothing weird has happened while you trying to edit a page.

While using the Visual Editor will handle most "quick and dirty" additions to the Wiki, if you ever want to edit the info you have for a template, the only way you can do this is in "Source Mode". So here are a few things to help you learn the basics, that will hopefully make contributing to this Wiki a little bit easier for you.

Remember: You don't get paid to do this, so only do what's fun for you. If it's not fun, don't do it, and don't be afraid to ask one of the top contributors (whom are all listed on the Leaderboard for help.

User Page

Before you can do anything, you should set up your own User Page so that people know who you are. You can use this space to tell people a little bit about yourself, brag about your game achievements, and herald the virtues of your favourite character.

Links

To link to another page, simply put the title of the page in two square brackets ( [[ and ]] ) on either side. You can use spaces so there's no need to use underscores ( _ ).

For example, to list to the Crafting page, simply put two open square brackets ( [[ ) at the start and two closed square brackets ( ]] ) at the end.

eg. [[Crafting]]

Links to Sub-Headings

Sometimes you may want to link to a heading within a page, which you can do by putting a hash mark (#) followed by the name of the heading.

eg. [[Crafting#Cooking]]


Links with different names

Sometimes you may want to link to a page with different text than the name of the page. For example, you might want to list a link for Characters to go Category:Characters page. To do this, simply add the name of the link and then use a vertical line ( | ) to separate what you want the text to say.

eg. [[:Category:Characters|Characters]]

Note the colon (:) prior to the word "Category". This allows you to link to a Category page without adding the page you're editing to list of pages tagged to that Category. Without the colon, the Wiki will think that you wish to tag your page to that category.


Broken Links

If the page that the link points to is empty, it will come up in red to alert you to the fact that the link won't work. Either you got the page name wrong, or the page is empty/hasn't been created yet.

Try to avoid making broken links.

If the link comes up in blue, the link will work.



Creating a New Page

There are two ways to create a new page. All will work exactly the same way, and which way you choose to use is completely up to personal choice.

Option 1: Use the Templates via Create a New Page
Go to Create a New Page and look for the type of page you wish to create. Type the name for your page in the field in correct Title Case, with articles (and, or, of, the, etc) in lower case. This will take you to a page that will be formatted for that type of page, all you need to do is to add the content in the appropriate fields.
Option 2: Go to Special:CreatePage'

This will take you to an entirely blank page. The Wiki will prompt you to name your new page, and then you can create content.

Option 3: Create a Dead Link
If you are coding a page and you need to create another page that is related to the page you're on, just create a link with the [[Name of Your New Page]]. Watch that case that you use when you do this, as the case you use will be the case of the page, and thus the case of the Title at the top of the page. Once you save the changes to your comment or page, the link will come up in Red to indicate that it's a broken link. Click on the link and you will be taken to the new page with the name you've specified and then all you need to do is to hit the button that says, "Create" and to add your content.
Option 4: Hard Code the URL
Another option is to just type into the URL the name of the new page I want to create. Every page in this wiki will have the preface - http://this-war-of-mine.wikia.com/wiki/ - so all you need to do is to delete the name of the page you're on and to Type in the "Name_of_the_Page" you wish to create, remembering to use underscores rather than spaces and to take care of which "Case" you use. Note that the Style Guides states that correct Title Case should have lower case prepositions and articles (of, the, an, and, etc). Once you hit "Enter", you will be taken to the new page and then all you need to do is to hit the button that says, "Create".


Formatting Font

Wiki uses different code to normal html. For the most part, formatting font in Wikia Wikis is as easy as clicking on the icons as you would using Word™ (or similar). However, sometimes the visual editor doesn't quite do what you want it to do and you'll need to look at the Source tab to look at the code.

Wiki code uses its own formatting language using sing quote marks ( ' ).


Italics
To make font in italics, put two single quote marks ( ' ) at the start and end of the text you want in italics.

eg. This is an example of making a single word in ''italics'' instead of normal text.


Bold
To make font in bold, put three single quote marks ( ' ) at the start and end of the text you want in bold.

eg. This is an example of making a single word in '''bold''' instead of normal text.


'Bold Italics'
To make font in bold, put four quote marks ( ' ) at the start and end of the text you want in bold italics.

''''Bold Italics''''


  • Bullet Points

Put a space and then an asterisks ( * ) at the start of the sentence.

* Bullet Points


'Indented
Put a colon ( : ) at the start of each sentence you want indented.
: Indented text


Indented and isolated
Put a space at the start of the sentence to have your text indented and boxed in a dotted line.


Coloured Text Coloured text needs a little html to work. Very simply, use triangular brackets ( < and > ) when creating this code. The easiest way to explain this one is to show you so that you can see where to put them.

eg. This is a sentence that wants a <font color=green>green</font> coloured word in it.

If you want to be really specific as to which colour you want to use, you can define the colour by its html name, which you can find by using this html Colour Chart.



Headings and Subheadings

There are four basic forms of headings in Wikis. Each of them use an equal sign ( = ) at the start and end of each heading:


eg...
==This would make a level two heading==
====This would make a level four heading====


This is what the first four levels of headings look like:


Level One Heading

It has one equal sign at the start and end. This text was put on the line underneath


Level Two Heading

This is a Level Two Heading and has two equal signs at the start and end of the heading.


Level Three Heading

This is a Level Three Heading. Note that this level of heading doesn't have the line to divide it across the page.


Level Four Heading

Just as with level three, level four headings becomes text that is slightly larger.


Just with regular text, you can use Code inside Headings to make them link to pages, or to have the text in Italics or in Bold. Personally, I like my headings to all be in bold. For me, headings that aren't in Bold don't stand out enough, which is what a heading is supposed to do. When the headings above are put in bold they look like this:



Level One Headings

It has one equal sign at the start and end, but with three single quote marks on either side of the text. Again, this text was put on the line underneath.

Level Two Heading

This is a Level Two Heading and has two equal signs at the start and end of the heading, but with three single quote marks on either side of the text.


Level Three Heading

This is a Level Three Heading with bold text. Again, note that this level of heading doesn't have the line to divide it across the page.


Level Four Heading

Just as with level three, level four headings becomes text that is slightly larger.... And this is what it looks like when you make it in bold as well.


Images

There are two ways to put an image into a Wiki. One is to just slot it in as a large graphic, the other is to add it as a thumbnail.

Large Graphics

To add an image, simply use the following code:

  • [[File:Badge_-_Introduction.png|left|120px|link=Badges]] The "left" (or you could put "center" or "right") must be in lower case.
Badge - Introduction
]The code above results in the image to the left, with a set size of 180 pixels wide, and a link to the Page for Badges. You must have the name of the graphic exact. The name is case sensitive and must have the correct file type/extension (png, jpg, etc).

As noted above, you can change the alignment from left to right or have it align to the center.

Thumb Nails

Another way to ad an image to a Wiki page is to put it in as a thumbnail. Browsers can still see the graphic at full size by clicking on it, but it now gives you a boarder around the image and the option to add a caption underneath.

  • [[File:70px-Katia.jpg|thumb|right|180px|[[Katia]], my favourite character]]
70px-Katia

Katia, my favourite character

The text above will give you a graphic like the one to the right. Note the extra square brackets within the caption that creates a link - but be careful to put a second lot of double square brackets to close off the code for the Image.

Again, you must have the exact name of the graphic (remembering that it is case sensitive) and must have the correct file type/extension.

It doesn't matter what order you put the code for alignment, image size, link or caption; the Wiki will work it out.



Learning New Tricks

Using Wiki code gets easier with practice. If you see an effect on a page that you'd like to use on one of your own, go to the source tab to see how it was done. This is the easiest way to teach yourself new tricks to use in Wikis.


For more details, see:


That's all for now. I may do another one of these with some instructions on other things like polls, tables, and maybe one on templates.


Happy coding!


Raz 🙃



Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.