This is a manual of how I constructed this site, because much like many of my creative endeavors, it came as a product of wanting to scratch my own itch. While I wouldn’t exactly consider this site to be groundbreakingly creative, I do think it effectively does everything I’ve ever wanted a website for my fic to do, which is mainly being easy enough to update from the backend while being lightweight enough that I can flexibly customize it from the frontend.
WordPress was the solution to all of this — and then some. Since discovering WordPress in 2010, I’d only ever known it to be for blogs. It was thanks to some old tutorials by Georgie that I started to learn how to create WordPress themes in the first place. Since then, I’d never looked back — I’ve designed 47 WordPress themes before this, so you could say I have some experience.
Many of the themes were designed for blogs, but around 2017 I started experimenting with a fanfic-centered project that never came into fruition but would use WordPress to host the fic. The development worked out surprisingly well, a lot better than I thought. It made me realize that if I really wanted to, and invested the time and creativity and energy, I could probably archive all my fic on a WordPress site. Probably.
The most crucial element of this site is the plugins; but my search-savviness was a pretty valuable resource too. And interestingly enough, some skills I had picked up along the way had really come in handy here. For example, early on in my WordPress journey I liked my blog posts having excerpts by cutting off the beginning of a post, but I was aware there was an option to write custom summaries as well. I designed a writing blog via WordPress with a friend; and in doing that, I learned how to create page templates and error pages in a WordPress theme. Then another friend and I attempted a video game content project which I made a site for, which had a theme with a simple white background header navigation and a footer separated into blocks — the very format that I implemented to my fic site.
And yet, it’s still not done. But that’s just a matter of commissioning banners and designing a new (but similarly formatted) theme for it.
The idea that gave me the exact vision for how I wanted to make a fic site was the simplest realization: I could just make it operate like AO3. AO3 isn’t a blog, but it operates with paginated updates much like WordPress, which isn’t even an original concept in the first place. And in being as well-versed in WordPress as I am now, I knew that I could make it work.
Overview documentation for my other websites and my workflow can be viewed at my main site’s documentation.
The first thing I did was open up XAMPP — a stack package to set up one’s personal computer server as a web server. I always use XAMPP when designing WordPress themes, and a lot of times I copy my own code, i.e. clone a repository and then make modifications in that folder one by one. This is especially useful for WordPress themes, because in addition to stylesheets, they have files for all the different types of pages, posts, or modular elements that could exist on a website, with support for even more optional elements. There’s also a file for functions, which, as described by WordPress.org itself, “essentially acts like a WordPress plugin, letting you add custom PHP functions, classes, interfaces, and more. It opens up the entirety of the PHP programming language to your theme.” I’ll be referring to functions later as well as plugins.
But first was the matter of having a website to style in the first place, so instead of designing anything, I imported several fics onto the XAMPP server. It didn’t have to be all of my fic — I eventually would need to do that on the site when it was online. I just needed enough different fics to test with, and a default WordPress theme for the time being.
I started by writing the pages, because it was the easiest thing to get out of the way and would also be useful for when I would end up designing the pages. Writing the “about” page was the first major accomplishment of the site. When it came to the related works, I had to track down links of everything, because I didn’t want to forget anything; I am a collector, after all. The policies/disclaimer had gone through a few makeovers since the beginning through the creation of this website; they were originally on the “About” page.
After creating and writing a rough draft of the pages, I got the stylesheet from the last WordPress theme I made — Array Ink, the previously mentioned video game content project site. This is a habit I’ve always done, since I find it more efficient to modify an existing stylesheet rather than starting a brand new one. (This is also how I learned how to code.) It had the navigation style that I liked, so that was also a convenience. It had the footer style I liked as well, though I wouldn’t realize this until later when I was actually working on the footer.
I code modularly, as in: I’ll design one element of a page in both CSS (the stylesheet) and the HTML (if the content needs any adjustment), refresh the local “live” site and make modifications until I like it, and then move onto the next element. Essentially, the design fills up with color and style from top to bottom, outside then in. In order of how elements are displayed on the main index page (the first page I worked on), I coded and designed, in order:
At this point, I wanted there to be a banner, not just a solid background. But because I wanted any images on my fic site to be completely custom made for the site in some way, that meant they had to either be from scratch by me or something I commissioned. I’m not any sort of original graphic artist though, and my only relevant skill is making a patterned background. So that’s what I did. I picked stars because I’m a moon girlie and I like star emojis, though it’s not that significant — I just didn’t want a site without a more elaborate banner (like I plan) to look like it was under construction even though I know I still wanted commissioned banners eventually. And patterned stars are convenient for me and certainly do the job.
I wanted each fic to be presented in an individual box much like AO3, so I emulated that style. However, when it came to tags I’m actually more fond of the Tumblr format, with each tag being preceded with a hashtag and listed at the bottom of each post. So now they intentionally appear to be a mix of both an AO3 and Tumblr format of displaying a post/fic, which I think works for both my audience, and for me.
With the design for the index page done (though I would continue to make minor modifications between everything), I moved onto the next design: the static pages, though this wasn’t a huge effort as it mostly pertained to sizing and customizing the headers and text. I also knew I’d want to implement custom taxonomies at this point, though I didn’t have a plugin in mind, just figured one had to exist. With this in mind, I created a template page for a big tag cloud, because I would always have fun seeing AO3 tag clouds for collections.
Later, when I would instead add functions instead of a plugin for custom taxonomies (see below at “configured last”), I also wrote template pages for: relationship categories, fandoms, ships, and ratings. I’m including this here because the reason I had created the tag page in the first place was so I wouldn’t later forget to make similar pages for any other taxonomies I’d use.
After that came the design that I knew would take more time than just the pages: the fics. But this really just meant styling the page without any major main page components beyond the top navigation and the footer — something I had done for the first time for a translation project that also never came into fruition a couple of years earlier. In addition to that, the code for AO3 metadata had at some point changed from a table to a list, which was lucky for me because I prefer styling lists vastly over styling tables. So I copied and pasted that, saw how AO3 stylized it, and emulated it in my stylesheet while putting my own spin on it. Everything else is bog-standard designing and going from the top to the bottom of the page, though WordPress comments are always exceptionally annoying to configure, especially if I want them to look like AO3 comments. I put the effort into accomplishing this anyway, even though I have no expectations for comments.
Though I mentioned the footer earlier, after designing the fic page was actually around the time when I put the footer together, because by this point I had designed not only every other element but also every other type of page. The idea of putting the stats in the footer was mostly for fun, but I do think it serves as useful footer-type information. It was still in the block-format from Array Ink, but I found that I quite liked it — I couldn’t think of a better alternative.
At this point, I was done with the main looking components of making a WordPress theme. But there was a lot more to do:
The sidebar was not only inspired by AO3, but also by my friend Sani, who told me that the one thing she wished AO3 would have in terms of searching was allowing the filter navigation to turn into a fixed sidebar. So I put that here, just for her — and, well, because I think it enhances the experience too.
Making the theme was responsive was a pain; but one thing I will always do is make a website responsive and complain about it. I do like the dropdown menu a lot, though, as well as the mobile filter, both of which were new for me to figure out. I also created different sizes of the text of the banner at this point, in order to accommodate for different screen sizes. The text was originally in the image together with the background, but at this point I separated the background from the text to make the downsizing look more consistent.
I love showing off the art that people have drawn for my fic, so I knew I wanted to make a nice gallery to show off the artists’ work. Several years ago I’d used a gallery plugin for a private archive, one I really liked — and here, I found it again: Envira Gallery Lite. My favorite features include allowing you to build multiple different galleries with the single plugin, as well as having different lightbox options, resizing/column options, and allowing ordering of the images, which I wanted for chronology. Of course, there was also saving and uploading all the images, and adding the metadata… but there’s always metadata.
Subscriptions I knew had to come in the form of a newsletter plugin, in order to send a link via email for any new posts (i.e. fics). This was the time I made the unique page for subscribing and added it into the navigation. Though I don’t really have expectations in one way or another, I think it’s always a suitable option for a website that operates in update format. And its implementation took maybe an hour for everything, including finding a suitable plugin I liked.
Creating the night mode was the part I dreaded the most, because it was uncharted territory for me — but since then I’ve actually gotten a lot better at creating different CSS skins. It was largely the matter of implementing it, really, since I couldn’t find a toggleable skin-change plugin or script that I liked and even went to ask a friend who knew how to write Javascript for help. I don’t quite remember what solution I decided on, but hey, at least it works now. And since then I think I have a much better understanding of skin-switching (both in terms of code and implementation) so whenever I make the 2.0 theme, I’ll be sure to update it. And maybe add some more skins.
Despite all this coding and design, I still had the biggest task left: adding all my fic. I’m a prolific writer, and worst of all, I know it. But I added them anyway, and occasionally selectively, amounting to all the fic now on my site. In the process, I also:
I did not add a page for my series, though it is a separate taxonomy; instead, it appears to get grouped with the tags, like minor fandom ships. Series doesn’t have a page because I don’t have a lot of them, and the fics that are in series can usually be read standalone, anyway.
This all feels pretty sensible from the front-end view, I’m sure. But if you want a peek at my back-end view, this is what my “create a new post” on my fic site looks like:
There were other important things to toggle from the backend that I configured last. Approximately in sequence, here is, generally, what they were:
At this point I was getting notices that my site health was poor due to having 200+ fics and several plugins. To solve this, I installed a plugin to help clear caches. I then went through to really clean and organize my code, because I knew I’d use it again. I ended up splitting multiple modules across different PHP pages, just to make things easier because of how bulky the code is — the stylesheet alone is 1800 lines, and is by far the biggest stylesheet I’ve written.
I took a responsive screenshot for the “Themes” page at the end, because I always do.
Things I added, after the site was live:
And! This site isn’t done :) Be on the lookout for when I write documentation for theme 2.0. Though this would entail creating theme 2.0 first…
This website was built in two weeks, May 11 – 25, 2023. Though I had the idea to do it for a while, I knew it would take a lot of time and energy and focus that I didn’t have for a long time.
And I didn’t really have the time — I had just started a new job — but I was also in the middle of a remarkably bad depressive episode, so what better way to distract myself from the prison of existence than making a cute website to display all my fanfiction? And so despite supposedly “working,” I made this site instead. Don’t worry, this isn’t anything new: once I went to a writing camp but spent the whole time glued to my laptop so I could talk to my friends about SHINee’s “Lucifer.” I’m mentally ill, what can I say.
The whole time I was designing it I was sending previews to Sani (previously mentioned) and my beta reader, L, because both of them are special enough to me that I trust them to put up with my vanity ♥
This documentation was written and published on November 16, 2024.
aroceu's fic