Use a bootstrap theme with blogdown - r

I currently have a website which was created using the rmarkdown default site generator. I used a bootstrap theme and I like the look of it and I am familiar with it. I am wanting to change the site over to a blogdown website, but do not want to change the look. I know it is possible to use a bootstrap theme with blogdown/hugo, but I have not found very much information on how this can be done. I am very new to website development, so my understanding is very basic. I do know that there is not just a simple answer to this. I am more looking for suggestions for how I should go about this, or resources that I might be able to use in order to accomplish this goal. If you are interested in seeing the site it is https://jamescuster.github.io/

To anybody that is interested in this, I found this blog post which helps turn any existing static website to hugo. I haven't completely gotten it all figured out, but it seems to working well so far and with a little tweaking I think I will be able to turn the bootstrap theme into a hugo theme.
I would still be interested to hear additional solutions.

Related

How to create an interactive timeline (example site: https://evianexperience.com/en) using SVG - in WordPress

I am creating a website in WordPress and I am using DIVI theme.
I need help to create an interactive timeline for a project. The example site is: https://evianexperience.com/en. This is the exact thing I want to implement.
Please see me web layout (https://snag.gy/IKF13r.jpg) to get an idea, what actually I need it for.
I have tried to use Interactive Storytelling (https://tympanus.net/codrops/2015/12/16/animated-map-path-for-interactive-storytelling/) but it didn't worked either.
You could try scroll magic, seems to have plenty of features to achieve what you need.
http://scrollmagic.io/
Also I think skrollr will still work but it's pretty old
https://github.com/Prinzhorn/skrollr
If you need exactly what they have, looks like they are using some product called greensock, probably even this module: https://greensock.com/drawSVG and also ScrollMagic to control the animation by scrolling. A tutorial I found online with different animation https://ihatetomatoes.net/svg-scrolling-animation-triggered-scrollmagic/
I don't think you could do it with Divi alone, you can definitely try just some scroll plugins which are free. Otherwise you could see if greenstock's free/business license works for your project.

Using front end frameworks with a Wordpress site?

I've been tasked with modifying the frond end of a Wordpress site, which is something I have not done before. I was first thinking of using Handlebars an Bootstrap, but I'm not even sure that will even work with the Wordpress framework.
If those don't work, what would be a good way to create a nice UI for the Wordpress site? Is creating my own theme a viable option? What tools am I even available to use?
Thank you.
Some of my favorite starter themes are:
http://themble.com/bones/ and http://underscores.me/
You can also look at frameworks like:
http://themeshaper.com/thematic/ or http://my.studiopress.com/themes/genesis/
I've used AngularJS with WordPress in the past, so I don't see why you wouldn't be able to use Handlebars (I haven't done it myself, but if you search, I'm sure you'll find some help there).
If you still want to use Bootstrap, there some tutorials on how to integrate it: http://digitalfellows.commons.gc.cuny.edu/2013/11/18/learn-bootstrap-part-2-adding-bootstrap-to-wordpress/

How to Incorporate External Design Elements in a WordPress Site

I have lots of fantastic PSD, CSS and HTML design resources from places like CodeCanyon, CoDrops, multiple designer bundles, etc. I'd like to incorporate some of them into a WordPress site, but for the life of me, I can't figure out how to do it and I've looked everywhere I can think of, from CSS-Tricks.com and the Codex to For-Dummies books :)
I'm familiar with HTML, basic CSS and WordPress, but I'm (obviously) not a designer. I do know how to call an external stylesheet using #import or within tags, but how do I pull in the rest of the files?
For instance, I have an item called CSS3Accordion and it contains several index.html files as well as folders containing css, images and javascript. How should I reference them in my theme and where should I put them?
I'm assuming this is a very elementary question (so much so that these awesome design resources don't typically come with a how-to file), so in advance, let me say I sincerely appreciate any help I might get.
Applying a WP template to a WP site and coding one are two very different things. Those resources you are using, are they WP themes? If so, you should be able to install them quite easily using the control panel. If not, it's a completely new horizon. Templates don't function like "normal" html + css, they need much more things (specially, they need to be read by WP and its modules, widgets, etcetera).
I would suggest you start by downloading and installing themes (plenty of tutorials around), and then modifying some of those themes. They usually come with a custom css sheet to add/change styles (use firebug to find them, use !important to overwrite).
I hope this answers your question. If it's only a matter of loading new css, you can still add all of it to the custom sheet. There are also a lot of free plugins (like the accordion) that you can install in WP. Good luck!
I would recommend starting with a basic wordPress theme and incorporate your ideas as you go with some trial and error. WordPress themes are actually pretty straight forward once you spend some time dissecting a basic one. Most of the time I start with a complete design in Photoshop and use that image as a background to layout the sliced graphics over with CSS.
You can place your files anywhere you want, but I normally put them inside the themes folder and reference them with relative file paths, remember though to take the path into account when linking to the files.
I'd also suggest setting up a locally hosted WordPress install to play around with using something like WAMP, MAMP or LAMP. That way you have instant review without having to expose it to the public or uploading files every time you make a change.
Here are a couple of good starting template themes to explore with.
http://digwp.com/2010/02/blank-wordpress-theme/
http://code.google.com/p/wordpress-naked/
Regards and good luck.

Blank Theme for Wordpress

I need to build a new WordPress site form scratch. So I guess I need a blank theme to do that. I need to know where I can find such a theme like that, and I need a tutorial that can help me to create my first WordPress theme from scratch.
I'm new in that world. So please I need your help.
If you're starting with no WP knowledge, I believe you're better off modifying a blank theme than you are creating one from scratch.
Here is a great tutorial I used when I started doing custom themes. The HTML is getting outdated semantically, but it will teach you all working parts of a WP theme.
As a starter theme I use HTML5 Boilerplate which is full of quality HTML5 and additional features like file caching, cross-browser readiness, mobile device readiness, and file caching, to name a few. Also it's got a minimal default styling.
You may also find the wordpress site helpful. Cheers.
starting with twentyten or twentyeleven isn't a bad option either.
Whatever theme you choice make it a child theme.
It may seem like something complex at first but it will make things easier along the way.
Theme Hybrid has a great blank theme: http://themehybrid.com/themes/skeleton
I have a starter theme on github that was originally based off html5 boilerplate that you can check out.. https://github.com/FernE97/html5-blank-slate

Is WordPress suficient for this project or should I use a framework or a different CMS?

I am a web Designer that recently decided to expand into developer waters as well :). What I have in mind is to build an elaborate portfolio site that will also contain a blog. The sites sections will be standard for such a project - something like Home, About, Portfolio, Contact and Blog.
The Home page will contain some static parts but also feeds from the latest additions to the portfolio and the blog.
The Portfolio page will have sections on the different types of portfolio pieces (like logo, print, web etc).
The About will be completely static.
The Contact page will be static and will have a contact form.
The Blog page will basically have your standard WordPress blog structure.
At first I was thinking of doing the whole thing in WordPress (since I already have some experience with it) but what got me thinking about different options was the portfolio part. I want the portfolio page to be quite differently stylized than the blog page and yet I want to have the possibility of doing quick and easy additions to it trough an admin panel.
So please give me suggestions and direction about what would be best for me to do? Is this thing possible with WordPress? Should I instead code the whole project with CodeIgniter (or a similar framework)?
I am quite good with HTML & CSS. Comfortable with jQuery. Trying to get better with PHP :).
I am willing to learn and improve and wouldn't mind trying a CMS or a Framework that Ive not had experience with before.
Thank you.
Wordpress is more than sufficient. You might want to find some plugins that allow you to add special content like videos, scripts and other things to portfolio pages. Also knowing html, css well is important if you want to build or modify a theme a lot to your liking. It is also very helpful to know some php if not be very experienced with it. MySql is helpful as well but not as need to know.
This Wordpress PHP function sheet is very helpful at times.
The Wordpress Codex page is also very good. Not an end all be all, you'll still need to know how to do things on your own, but it defiantly will get the ball rolling if want want any custom functions, or want to modify functions.
If you know wordpress a little bit, I hope you will able to make your desired project. Using wp you can do several types of project.
Read some wp books or tutorial and learn wp functions.
Essential wp functions sheet https://codex.wordpress.org/Function_Reference
I hope it will help you.

Resources