This is a starter project to create a new Wordpress theme using Timber, SCSS, and jQuery.
- Setup
- Development
- Tips
- Directory Structure
- Maintainers
- Code of Conduct
- Contributing
- License
- About Scout
- Install Docker
git clone git@github.com:Scout-NU/wordpress-timber-starter.git my-project
cd my-project
npm install
- If using the rsync deploy script, update deploy destination and site url in deploy.sh
- Search the entire project for
CHANGE_THIS
, you'll find places to change your MySQL password, database name, theme name, project name, and author name. Replace all of these with the relevant information. - You should be all set!
- Install Docker and open it. Once you open it for the first time it should automatically show up in the menu bar. Docker is super lightweight so you can just leave the app open in the background
- In your terminal inside of the
my-project
directory, rundocker-compose up -d
- The first time you do this it'll take a bit because it has to download the MySQL and Wordpress files for the first time
- On subsequent runs, just run
docker-compose stop
to stop the servers anddocker-compose start
to start them again. - This starts Docker in detached mode (
-d
). To kill the process rundocker-compose down
. This will remove persisted data. Only do this when you're cleaning up a project. - That's it!! Docker should be running on
localhost:8000
In order to see the theme you have to run gulp build
first then gulp watch
, because wordpress is looking for the compiled version of the theme.
gulp build
: Runs the gulp task to create the build folder that holds the theme
gulp watch
: Runs the gulp task that watches your files and automatically reloads your browser
gulp watch
should automatically open localhost:3000
in your browser. Follow the steps to set up Wordpress there
Docker is running on port 8000, however if you'd like the niceties of browsersync's hot-reloading and all of that nonsense, use the localhost:3000
URL. Technically it's actually browsersync running on localhost:3000
and that proxies the Docker container exposed on port 8000. Just use 3000, make your life easy!
We've got the theme building, but because it's not pure Wordpress/PHP we need to install a plugin before we activate the theme:
- Navigate to
localhost:3000/wp-admin
and login with your wordpress account Plugins > Add New
, and search forTimber
. Make sure to hitActivate
after hittingInstall Now
- Then activate the theme:
Appearance > My Theme
npm start
- πΈ money πΈ
- Make sure that whenever you pull from the repository you run
gulp build
- If links aren't working login to the
wp-admin
and under settings/permalinks check and uncheck post name option and save (it resets the redirect for wordpress)
wordpress-timber-starter
β README.md
β gulpconfig.js -- Defines all gulp paths & configurations used in
β gulpfile.js directory
β package.json -- Defines all the dependencies needed that are installed
β using `npm install`
β docker-compose.yml -- The Dockerfile to get the WP server up and running
β
ββββgulpfile.js
β β index.js -- Main JS file
β β
β ββββtasks -- holds all the different gulp tasks
β β ββββbrowsersync.js
β β ββββimages.js
β β ββββmain.js
β β ββββscripts.js
β β ββββstyles.js
β β ββββtheme.js
β β ββββutils.js
β β___ββββwatch.js
β
ββββsrc
β β *.php -- main HTML page
β ββββinc -- other includes
β ββββimages -- all the images that aren't on wordpress
β ββββjs -- holds all JavaScript files
β ββββscss -- directory with sass files and fonts
| | |βββcomponent -- global components (footer, nav)
| | |βββpage -- pagespecific style sheets
| |βββfonts -- fonts and iconfont files
β β
β ββββtemplates -- holds the twig files
Email: amarkon895@gmail.com
Twitter: @amarkon88
Scout strives to provide a welcoming, inclusive environment for all users, period. To hold ourselves accountable to that mission, Scout has a strictly-enforced code of conduct. Violating those rules will result in removal from the Scout organization, and potentially being banned from contributing to our projects.
We welcome all contributions to our projects! Filing bugs, feature requests, code changes, docs changes, or anything else you'd like to contribute are all more than welcome! More information about contributing to Scout projects can be found in our contributors' guide!
All Scout libraries are ISC-licensed. tl;dr: you can use this code however you'd like, just please attribute us appropriately!
Scout is Northeastern University's student-led design studio. The Studio has about 45 members selected via interview and application processes to select the university's best talent. Each semester the studio produces design and development assets for four ventures. Check out our portfolio for some past projects!