Append custom class to wordpress headway theme - php

I would like to hack headway theme by adding an option to pages to append custom "classes" for that particular page. It's similar to your regular page where you have an option to select page template. but instead of selecting page template user would just have to select the class he/she wanted to append on the page. that class will have a CSS overide.
Example:
HTML
<body class=" red ...other headway css classes..." ">
CSS
body.red #container { background: red }
body.green #container { background: green }
I want to add a custom dropdown that list some classes option for theme to choose. example item on the dropdown. "red theme", "blue theme". This can also be done using Custom field but prefred to use dropdown so user won't get it wrong.
Append the class that was selected on the page to the tag of that page. I tried using "body_class" on my functions.php But It totally erased all the classes causing my page to break appart. What I wanted to do is just append the custom class instead of erasing the entire classes of the body.
Please advice. thanks!

Headway already has a custom meta box for custom classes on a page, so maybe you could either:
hack that to display a drop down
create some sort of meta box that will save a selection from a drop down to the same field that Headway writes to, if that's possible, and just remove/hide the Headway meta box from the admin
add an informational box on the page screen that displays the available classes and just use the Headway meta box instead (upgrade safe, best approach to keep things clean)

Related

Add new field in WordPress Menu to output in theme

Is there a simple class or function to extend the WordPress default menu items with new custom fields?
For example, when you go to Appearance - Menus, add a new menu and drag/drop an item to your menu, that actual item has few hidden fields that can be enabled from Screen Options:
Title Attribute
Description
My question is: how to add another custom field there? Like a background field to write the text there and output it in my custom theme like we output the title and description:
<?php echo $navItem->description; ?>
Changed the html code live on the admin page, so you can catch my idea on what I want to do.
Thanks!
ACF is the plugin just what you looking for. Create as many fields as your want, assign it to manu form and you are done.
For more information follow this URL,
https://www.advancedcustomfields.com/resources/adding-fields-menu-items/
Hope this helps.
follow this URL may help you
Adding custom Fields to WordPress Navigation Menu Items
http://jafty.com/blog/how-to-add-custom-fields-to-wordpress-navigation-menu-items/

How to output html on a custom location with a wordpress plugin?

How can I use a self-made Wordpress plugin to output for example a custom menu or custom HTML to a specific location? The only places I managed to output content is in wp_head and wp_footer, but is it possible to get content to show up anywhere else? Is it even possible to force the plugin to output the HTML for example inside a specific div or a DOM element?
Example scenarios
I want to add a custom button that triggers a menu or modal, but the button needs to be located inside the header and I also need a place for the modal HTML before the footer (example).
I want to add custom made "social share buttons" to every page and need a place to output the HTML after the page title.
Just to give you a feeling of what I'm trying to do...
Maybe I'm just way off track. I am new to this, but I am eager to learn.
"Teach me the ways of the force"
Appreciate any help, Thanks :)

How to add custom html-code to Joomla 2.5 menu items?

Situation: I have old site Agroteplica based on Joomla 2.5. I need to add custom html-code to menu items (for example, icons, or bold). I need unic icon for each menu item, so it's no use to edit php-template of page.
If I try to use html-code in menu item header - Joomla clear it, only text remains. I tried to find some manuals, and added line filter="raw" to file modules.xml:
<field name="title" type="text"
description="COM_MODULES_FIELD_TITLE_DESC"
label="JGLOBAL_TITLE"
maxlength="100"
required="true"
filter="raw"
size="35"
/>
But it didn't give any effect either.
Question: what I need to do to make it work? :)
Here is what Joomla provides for cases like this:
In Menu Manager -> Menu Item Edit
Editing each menu item, you will see the "Link Type Options" section at the right column.
See screenshot:
As you see in the screenshot, this group of settings contains the follow options:
Link Title Attribute : You can add your custom Title attr to the menu item's a tag.
Link CSS Style : You can add a custom css class for this menu item's a tag.
Link Image : You can add a custom image for this menu item.
Add Menu Title : If you add an image, you can choose to hide the Title of the link (setting = No), or choose to show both Image and the title (setting = yes (default)).
For you case, you can either choose you custom images-icons that should be displayed next to your menu items title. If you want bolds or other styling options, you can add your custom css rules to the items you want, and then add your css styles at your template's css.
For example you have decided that for some of your menu-items you would want their text in bold. Then you could do as follow:
1 .Give them a css class to all of them, in the Link CSS Style field: e.g. 'bold-items' (without the '').
2. Open your template's css file with a plain text editor and add the following rule at the end of the document:
.bold-items {
font-weight:bold;
}
Notice: The above settings might have no effect at all, if you are using a 3rd party menu module, or your template contains overrides for the default menu module. In such case you will need to add further template overrides for the menu module in use, in order to implement the above settings.
*Not sure what you mean with menu item header and how you did try to add html-code to it.
*Update / Answer to your comment:
You never mentioned about video in your question. You asked about adding icons and making text bold. What do you mean with headers and what kind of code and where are you trying to insert it? Are you aware of what is involved in the process from the moment you create menu items in the menu manager till you see those in the front-end of your website?
Following my answer above and assuming you have basic knowledge of the workflow (menu module, template overrides, css) you will be able to add images/icons or custom styles for each menu item. If you want to have video inside your menu, then you...
... will need a more sophisticated menu module. These are called Mega Menus and allow the user to display various types of content inside their menus, like modules, in various ways. You should either install a such module or create one on your own.

Unique fields added to Wordpress Pages editor

I need to customise the page editor in Wordpress so I have 5 text fields which I can pull out in the front end page. This is because the Wordpress manager is a bit hopeless with no HTML skills and the content of these boxes will populate buttons and a drop-down select. These fields will be completely unique to the page being edited. How do I go about this? Do I need to build my own plugin or customise an existing one or other?
Advanced Custom Fields is a great plugin for this. You can target a particular page to display fields on and then output your fields in the front end templates using:
the_field('field_name');
See here: http://www.advancedcustomfields.com/

Wordpress custom page attribute

I'm working on a custom WP theme that displays all "pages" as sections in a one page layout.
What I would like to do is add a color chooser to the page designer, so that the user can choose a color to be the background color of that section.
I'm totally new to wordpress so I don't even know what files or functions to look at to add this behavior.
Is there perhaps a prebuilt plugin to do something like this?
Four options:
use a plugin like Advanced Custom Fields or Custom Content Type Manager
ACF has a Lite version to add the meta box programmatically
a helper script like Custom Metaboxes and Fields for WordPress
do it yourself, using this Q&A as example: Add a checkbox to post screen that adds a class to the title
Probably, you'd want to change the visibility of the meta box according to the chosen page template, refer to this Q&A: Custom meta box shown when template is chosen

Categories