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>
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 new to Wordpress but have an understanding of HTML/CSS. I recently fixed an issue on a site where a button wasn't being rendered properly.
I added the CSS changes to the custom CSS box for that particular page (the homepage). The changes worked on the editor preview but after saving and publishing the fix isn't live. I had thought that it might be a cache issue (WPEngine) but I did this two days ago. Shouldn't that be enough time for it to resolve?
I've cleared the cache on all my devices.
Is adding custom css in the WP Admin the way to fix this or does this need to be addressed in a different manor by uploading files or changes files via FTP?
If you clear your cache and cookies in your browser you should be able to see your changes almost immediately if you add your CSS through the wp-admin custom css area.
A good way to check if that code is there is by viewing the source of your page and searching for the CSS in your dom. If it is not there, but added into your custom css in the theme it might be a problem with your chosen theme.
If you change the theme's css directly through FTP you will want to keep in mind that if you ever update your particular theme, all your custom css will be overwritten and you will lose it. You can see more on how to add custom css here:
http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
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
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.
I've been following some tutorials at mediawiki.org but I didn't make it. I need to add a new CSS or JS code to be available in all my wiki (basically be cause I need to add some div tags).
Can you guys help me?
Appreciate that.
You can edit the CSS or JS files used by your wiki at the page names:
MediaWiki:Common.css
MediaWiki:Common.js
For instance, here is the Common.css used by Wikipedia.
There are also similar pages used for specific themes. For instance, if your wiki is using the Vector theme, you can place code specific to that theme at:
MediaWiki:Vector.css
MediaWiki:Vector.js
Editing any of these pages will require admin rights.
If you plan to reuse and extend an existing MediaWiki theme, you do not need to add a new CSS file. It is much easier.
Suppose your Wiki is running on mywiki.local/wiki/, and we use the Vector skin.
Now all you have to do, is to open mywiki.local/wiki/MediaWiki:Vector.css and add the styles for the DIVs you add to pages.
The real question here is: do you plan to modify the skin itself, or do you just plan to add your own DIVs into Wiki pages? Anyway, in both cases you can edit the skin CSS via MediaWiki to avoid hacking around in the file system - which breaks with each update.
Avoid editing MediaWiki files at any cost, upgrades become painful that way.
If you want to make styles for your DIVs in pages available to all MediaWiki skins, you have to edit mywiki.local/wiki/MediaWiki:Common.css. Changes made here are applied to all skins.
In my experience, I had to modify the /skins/Vector.php and /skins/vector/main.css files. Could you explain in more detail what are you trying to do?