I am about to get started on customizing an existing Wordpress theme to meet my needs. This will be my first attempt at this, so I've been researching like crazy before getting started. Here's my question.
I know to set up a child theme within my parent theme before changing any content (and to only change things in the child theme). This seems to be pretty straightforward for CSS and JS functionality, but it seems shaky on adding HTML elements. My purpose in doing a child theme is in order to have the theme be updated without losing all of my code. Because of this, something like creating a new header.php file seems to not solve any issues, although it may temporarily give me the results I need.
If my main concern is being able to install theme updates without having to rewrite the code, then what is the best way to execute this, if at all possible?
If you want to change more than just the stylesheet, your child theme can override any file in the parent theme. To do it, simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads.
For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php. A common way of doing this is making a direct copy of the parent theme file into the child theme directory. To answer your question: this will not be overwritten during an update of the parent theme.
You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.
See the Codex on Child Themes for more info.
Related
Basically I need to change the look and feel of a NopCommerce application, and I have created a separate theme folder and can do my CSS changes there. But there's only so much you can do with CSS. At some point I'll need to update html to make it look like the way I want.
So what I am concerned about is that if I change the layout and individual pages html to make the site look like how I want, what will happen if later I have to upgrade NopCommerce version, will my markup changes break or is it not a problem.
I have seen NopCommerce themes and it looks like they have updated the markup but I am not sure if its right to do it.
You're already halfway there, it's the same process as for changing the CSS. Simply copy all the cshtml files you intend to modify to your theme's folder and change the code however you need to. The modified files should be under Themes/YourTheme/Views, as per nopCommerce standard. When you install your theme, it will render the pages from here instead of the default folder. This way, the default views are left untouched, and your changes have no impact on the default theme.
For example, in the default theme of version 4.4, the homepage is rendered from Themes/DefaultClean/Views/Home/Index.cshtml. To customize the layout of this page for your theme, copy the Home folder to Themes/YourTheme/Views and you're good to go.
It's all explained in detail with examples in the official documentation- Customizing nopCommerce Themes
I'm a web development student, and I am helping a friend in adding some custom links and slider to her wordpress website. The thing is the developer who made her website 6 years ago didn't create a child theme and she agrees to not making any update
I need to add some links in the footer widgets, which i did, but i see that there is an image background to the container containing these widgets, is it safe if i just remove the background from the theme css file ? I mean as she isn't updating her theme nor website, can I achieve it by removing it by editing the theme CSS,
ps sorry for my newbie question but can't find any ressource on this special question.
it looks like this, there is a background on the div (i've put the same color on the smaller div)
Thank you for your help and your time.
It's not a best practice to edit the Parent theme CSS. Even if you do so when a new update comes it will all be overwritten(If you don't update your theme periodically you will be missing out on many security fixes). So it's best if you can create a child theme and update the changes there. Just change the current theme to your child theme it's just a one click action and will save you all your changes in the future. Hope this helps.
if I understand your question correctly, I'd say it's not safe to remove the background CSS from the theme's style.css (or whatever file it is using). The problem might be theme updates that'll overwrite your changes.
So the best would be to create a child theme with a fews clicks, it's really easy:
https://codex.wordpress.org/Child_Themes
So you won't have to bother with updates.
Depending on the WordPress version you might have the Custom CSS Section within -> Appearance -> Customize - https://en.support.wordpress.com/custom-design/editing-css/ - Here you can just write your own CSS to overwrite the background of the container.
A client of mine would like me to go into their WordPress website and add a fixed button to the bottom-right. This button should be on every page.
I know HTML, JavaScript, CSS and PHP quite well, but have never used WordPress before and it seems a little frustrating.
I only need to add this button and link it to a URL, but I don't want to download additional plugins. Can I add my own HTML to a theme? I've heard of the ability to make Child Themes to prevent my additional HTML from getting wiped when the parent gets updated. How does this work and how can I use it to achieve the above?
Child themes are the typical way to modify an existing theme, so that you can still update the original theme as its developer releases new versions. It is correct that updating the theme would wipe out your changes, if you don't use a child theme.
I've only made a couple child themes myself, but I found this documentation helpful:
https://codex.wordpress.org/Child_Themes
For modifying template files like the footer, the first section "Creating a Child Theme from an Unmodified Parent Theme" is the minimum to get started. The style.css file contains metadata that tells WordPress about the child theme and its parent, even if you don't add any styles. The functions.php file makes sure both themes' stylesheets are loaded, and can be used for other functions later. The page above has some code you can mostly copy and paste, with some changes for your site's specifics.
Once the child theme exists, you can copy footer.php from the original theme into the child's directory, and modify it as needed. Keep in mind that since you are overriding the original theme's footer.php, if there are later changes in the parent theme's footer.php, you may need to manually update your copy, to combine their changes with your site-specific code.
If you have a separate site or development environment where you can test your child theme first, I'd recommend using that, then copying it to the live site when it's ready.
You would have to do this within your Wordpress Theme / Template files.
You'd have to learn the architecture of Wordpress CMS (mostly) but also your applied theme you'd be customizing and adding this feature. You'll have to know what .php files drive what pages and where you can add this feature.
If you don't want to mess with both any core Wordpress CMS files nor your original applied 'Theme' files; you can consider creating a 'child theme' or 'plugin' to extend the features and functionality; this way.
Please start by understanding Wordpress CMS further. Here's a good article: 'http://www.wpbeginner.com/beginners-guide/beginners-guide-to-wordpress-file-and-directory-structure/' also check http://wordpress.org
Hope this helps, g'luck!
Building a child theme is ultimately the best thing to do, as any future theme edits for the client can be done there. Here's an article on WP child theme creation.
A quicker way should be mentioned, although it can be limiting: Go to Dashboard/Appearance/Widgets, make a new Text widget and place into your footer region. This is assuming, of course, that the theme you're using has a footer region defined (most do). In the widget, use some HTML like this:
<div style="float: right; width: 60px; background-color: red">BUTTON</div>
I would like to know if there is a code I can add to the style.css that would disable the wp theme animation on the page. Each element either drops in or slides in as one scrolls dn the page.
I bought the wp alchemy theme: https://demo.mageewp.com/alchem-pro/homepage/ but the theme animation is much slower than the demo so one is past the section before the animation kicks in.
So, on a cursory look it does appear than all animation is done via css with no javascript.
All of the styles are in the style sheet animate.css for that theme.
There are several way to accomplish that.
Before doing any of this back up your site and work in a child theme. These resources will explain why you should use a child theme and how to set it up.
I understand it can be daunting, especially when it feels insurmountable. It's not. Take a deep breath and read through the links.
You'll learn how to backup your WP install. Very important! Any number of things could cause damage to your WP install or could cause a loss of the site. If you don't have it backed up you'll have to recreate it all by hand. If you have a backup you could be back up and running in an hour.
Also, you'll learn how to create and use a child theme. That allows you to make changes to your theme without making the changes to the parent theme. If you make changes to your main theme directly and it gets updated you won't be able to update it with the new bug fixes or features without losing all of your changes. I'm sure you see the importance of that.
STEPS:
Back up your WP install.
Without a plugin
Wordpress - Codex: Backing Up Your WordPress Site
Skillcrush: Backing up Wordpress
With a plugin
WP Beginner: How to create a complete Wordpress backup for free
Use a child them.
Wordpress - Codex: Child_Themes
WP Beginner: How to create a Wordpress child theme video
Smashing Magazine: Create Customize Wordpress Child Theme
Elegant Themes: Wordpress Child Theme Tutorial
Now the different things to try to accomplish what you are asking. The first is the easiest.
OPTIONS:
Copy animate.css to your child theme. Empty the file and save it. Keep in mind you need to recreate the same directory structure that leads to the animate.css file. You don't have to copy the other files animate.css is the only file you need.
The following are more difficult and require learning some php.
Duplicate the file that enqueues and registers the animate.css script to your child theme and remove the enqueue and register calls to animate.css.
You could dequeue and deregister the script from Wordpress directly within your functions.php file within your child theme.
Hope this helps,
Tim
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.