This is a basic start-to-finish task list for developing a website in WordPress with Nebula.
Installation
- Download Nebula
- Download and Install WordPress
- Upload Nebula (/wp-content/themes)
- Move the Child theme from the /resources directory to the theme directory.
- Change Child theme name in stylesheets/scss/style.scss (or in style.css if not using Sass)
- Activate Nebula (Appearance > Themes)
- Run initialization (see below)
- Verify WordPress settings (permalinks, time zone, frontpage, etc)
- Activate child theme.
- Install/activate recommended plugins. (Appearance > Install Plugins)
- Fill out Nebula Options (Appearance > Nebula Options)
Recommended services
Development
- Create svg and png version of logo(s).
- Create a
/assets/img/meta/directory (or copy it from the Nebula parent theme) and update all metagraphics. - Update screenshot.png
- [Website development here]
Testing
Automated Initialization
The interface automatically appears as soon as the Nebula theme is activated in Appearance > Themes.
There is a safety precaution when the initialization link is clicked to prevent accidentally running it.
It attempts to AJAX the initialization, but if AJAX fails it gives a notice and then automatically reloads the page to re-trigger the initialization.
After initialization is complete, it provides a link to the Nebula Settings page to begin customizing the site development.
Initialization can be ran again by re-activating the Nebula theme. Whenever initialization is re-ran Nebula will email the site admin with the previous settings to prevent lost data.
Using Child Themes in WordPress
Child themes allow customization without crippling the original theme. This means that the parent Nebula can be easily updated without fear of breaking custom code. All customizations should be done in the child theme by copying the parent files as needed to the appropriate subdirectory within the child theme. When doing this, the file(s) in the child theme will override the file in the parent (except for functions.php and style.css). The main functions.php file in the child theme is run before the functions.php file in the parent. The style.css in the child theme is run after the style.css in the parent.
Important Notes:
- If renaming either theme, be sure to update the directories to match. The themes can be named however, but it is strongly recommended that the child theme directory match the parent with “-child” added to the end.
- Make sure the “Template:” setting at the top of the child theme’s style.css (or stylesheets/scss/style.scss if using Nebula Child) matches the template directory of the parent theme!
Automated Theme Updates
This will create a notification if a theme update is available (just like core WordPress themes), but please read and understand the following before using this feature to avoid irreversibly overwriting your theme!
- This functionality is designed to be used only with child themes. Child themes allow you to override the parent template files, so it works well with updating the parent theme to get the newest versions of functions, etc. If a child theme is not in use, the functionality is disabled entirely.
- The function can be disabled using the Nebula Options under “Nebula Theme Update Notification“.
- In order for this updater to work, the parent theme directory slug must be “Nebula-master” (case-sensitive). To break this functionality, simply renaming the directory would work. You could also delete the functionality out of
/libs/nebula_admin.php. An override for thenebula_theme_json()function can be accessed with the filter:pre_nebula_theme_json - If planning on using this updater, do not do any development in the parent theme! Either override the file, or use the built-in function overrides provided. If a function override is not available for the one you want to use, create an issue in Github and it will be added ASAP.
- Nebula is released only as a “nightly” build, so updates will happen constantly.
- Nebula provides no guarantee of backwards compatibility! Files and functions may change, move, or disappear in newer versions. It is strongly suggested that you regularly back-up the existing theme files (and especially before updating). If there is a major change that may break older versions, it will likely be noted in the changelog. This changelog is linked in the update notification for quick access.
Help/FAQ
General Questions
Where are JavaScript and stylesheet files added?
JavaScript files should be registered and enqueued in the functions.php file. This ensures that they are not duplicated, can require dependencies, and many other benefits. You’ll see a bunch of other scripts and stylesheets registered in functions.php, and they are enqueued in either the front-end, login page, or admin side.
Where can I add my Google Analytics tracking code?
You can paste your tracking ID in Nebula Options under the APIs tab.
My oEmbed content overflows its HTML container!
WordPress stores the width of the website (more specifically, the content area) in a PHP variable called $content_width as an integer. If this variable does not match the actual width of the content container, you can get some weird results. It is recommended to update this variable in functions.php. If there are multiple templates with different widths, it can be defined in conditionals based on template. Note: this means that WordPress does not see the content as responsive! Nebula attempts to correct when possible, but you could opt for Nebula shortcode for oEmbed content (like Youtube or Vimeo) to allow for fluid responsive content that always fits to the width of the container.
How do I add thumbnail sizes for images in the Media Library?
In functions.php, use the function add_image_size() with the name and dimensions you want.
I know WordPress has an update available, but the WordPress updater says I have the latest version…
In Appearance > Nebula Options under the Functions tab, make sure “WordPress Core Update Notification” is set to enabled.
I’ve initialized Nebula, but I don’t see the Developer Information metabox nor the TODO Manager…
In Appearance > Nebula Options under the Administration tab, make sure you have added your Developer IP address(es) and/or Developer Email Domains.
How do I know what version of Nebula I’m using?
In the WordPress admin, the lower-right side of the footer has the Nebula version. Hover over the version number to see roughly the release date of that version. The version number is also available in style.css at the top.
How do I request a new feature or report a bug in Nebula?
Please use the GitHub Issue page for both feature requests and bug reports.
Still need help?
One of the biggest benefits of WordPress is the size of the community! Try these WordPress resources for additional help with WordPress questions.