Growing Up NYC and Generation NYC

Growing Up NYC is a mobile-friendly website that makes it simple for families to learn about and access New York City programs, as well as services and activities available through government agencies and community partners.

Generation NYC is a mobile-first resource to help NYC teens and young adults navigate City resources including a variety of topics, free and inexpensive trips, and inspirational youth profiles.

To learn more about Growing Up NYC and Generation NYC, please visit nyc.gov/opportunity

---

Technical Details

Growing Up NYC and Generation NYS are public facing sites on a single instance of WordPress hosted on WPEngine. Growing Up NYC serves as the parent application with a redirection for Generation NYC and its main content.

Getting Started with Local Instance

To set up a local instance of this application, we recommend starting off with the NYCO WordPress Boilerplate which will provision the dependencies required to get the site up and running.

Requirements

• Docker
• Composer
• Node
• NPM

Steps

1. Clone the NYCO WordPress Boilerplate, specifying growingupnyc as the directory to store the cloned files into. And then change into that directory, removing the git reference and the existing wp/. Single command:

git clone git@github.com:CityOfNewYork/nyco-wp-boilerplate.git growingupnyc && cd growingupnyc && rm -rf .git/ && rm -rf wp/

2. You should now be in the growingupnyc directory. Clone this repository into the wp/

git clone git@github.com:CityOfNewYork/growingupnyc.git wp

3. Change into the wp/

cd wp/

4. [wp/] Create a wp-config.php by copying the wp-config-sample.php

cp wp-config-sample.php wp-config.php

5. [wp/] Open the wp-config.php and update the database information with information with the configurations in the docker-compose.yml.

/** The name of the database for WordPress */
define( 'DB_NAME', 'wp' );

/** MySQL database username */
define( 'DB_USER', 'wp' );

/** MySQL database password */
define( 'DB_PASSWORD', 'wp' );

/** MySQL hostname */
define( 'DB_HOST', 'mysql:3306' );

6. [wp/] Generate new salts and replace the Salts in the wp-config.php.
7. Uncomment the lines in the wp-config.php with 'WP_SITEURL' and 'WP_HOME'. Save and go back to the command line.
8. [wp/] Install the plugins and dependencies. Run the composer installer, and return to the project's root directory. Single command:

composer install && cd ..

8. If you have a WordPress database sql file, copy it into the data/
9. Build the application

docker-compose build

10. Launch the application

docker-compose up

11. Navigate to http://localhost:8080

Structure

/wp-admin: Wordpress core files. Do not make changes here. They will be overwritten when Wordpress updates.

/wp-content: The directory for Wordpress themes, plugins, and uploads.

• /plugins: Wordpress plugins. Any third-party and custom-plugins (other than the must-use plugins) will go in this directory.

• /themes: Wordpress themes

  • /guny: Custom theme for Growing Up NYC.

    • /assets: Contains static assets for the site. Most of these are compiled from the src directory

    • /includes: Theme functions, including custom shortcodes and modifications to the WYSWIYG editor

    • /src: Contains SCSS, JavaScript, and image source files

      • /img: Image sources. There is a Gulp task set up to minify images and copy them to the assets folder automaticallty

      • /js: JavaScript source files

        • /modules: JavaScript modules. These can be required by other modules that depend on them or by main.js

        • /vendor: Third-party plugins. Only those files prepended with _ will be included in the concatenate task. Other plugins can be required by a module or main.js where appropriate.

        • /main.js: The main JavaScript file for the project.

      • /scss: SCSS Stylesheets

    • /tribe-events: PHP templates for pages generated by The Events Calendar plugin

    • /views: Twig templates for front-end markup

/wp-includes: More Wordpress core files. Do not make changes here. They will be overwritten when Wordpress updates.

Theme Updates

NPM is used to manage the assets in the Growing Up NYC Theme (scripts, styles, icons, etc.). The steps below walkthrough how to modify the theme's front-end.

1. Navigate to the /wp-content/themes/guny theme in your terminal using cd
2. Install the theme dependencies

npm install

3. Changes to files in src/js, src/scss, src/svg can be watched in 2 different modes: development and production

Development

npm run development

Production

npm run production

4. To compile all scripts, stylesheets, and icons

npm run build

---

The Mayor's Office for Economic Opportunity (NYC Opportunity) is committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. Follow our team on Github (if you are part of the @CityOfNewYork organization) or browse our work on @CityOfNewYork or @NYCOpportunity.

Interested in contributing? See our open positions on buildwithnyc.github.io.