• Home
  • Archive
  • Tools
  • Contact Us

The Customize Windows

Technology Journal

  • Cloud Computing
  • Computer
  • Digital Photography
  • Windows 7
  • Archive
  • Cloud Computing
  • Virtualization
  • Computer and Internet
  • Digital Photography
  • Android
  • Sysadmin
  • Electronics
  • Big Data
  • Virtualization
  • Downloads
  • Web Development
  • Apple
  • Android
Advertisement
You are here: Home » Customize WordPress Inline Code

By Abhishek Ghosh November 13, 2015 10:44 pm Updated on November 13, 2015

Customize WordPress Inline Code

Advertisement

Most of Technology Blogs use some Syntax Highlighter. In This Article the Methods to Customize WordPress Inline Code Shown With Needed the Snippets. We use Crayon WordPress Syntax Highlighter. That plugin actually supports inline code capturing with the fancy name of the feature – Inline Tags. There are options to Wrap Inline Tags, Capture code, Capture backquotes / backticks etceteras. Obviously we want something more manual to give power to the users. There Are Many Ways to Customize WordPress Inline Code to Look Them Pretty Nice Like Twitter Bootstrap.

Customize WordPress Inline Code
Table of Contents

  1. Introduction
  2. Backticks to Code and WordPress Add Inline Style Function
  3. CSS to Customize WordPress Inline Code
  4. Only Inline Code Like Effect With CSS
  5. Customizing WordPress Inline Code Does Not Mean Only Using Inline CSS
  6. Further Possibilities
  7. Go to the End

 

Customize WordPress Inline Code : Recall Old Guide to Convert Backticks to Code

 

In our older guide we to convert backticks to code with simple PHP snippet. Secondly, we have easy to use user customizable WordPress Plugin which was originally for managing all the stuffs we ever need to add to Theme or Child Theme’s function.php file.

Advertisement

---

Actually WordPress has a special function reference, it s called wp_add_inline_style :

Vim
1
https://codex.wordpress.org/Function_Reference/wp_add_inline_style

So, that way is not very difficult :

Vim
1
2
3
4
5
6
7
8
9
10
11
12
13
function my_styles_method() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );

As you can see, when we wrote wp_add_inline_style, the formatting is basic. Everything on this Earth can be modified with inline CSS and a custom class, even logically used with plugins – like we did for adding drop cap to this post.

Not to forget, old HTML had support for Teletype text with tt, but HTML5 does not support HTML tt but we need to use code block. In short :

Backticks will become automatically code – that is your matter how which method you will use.
Inline Code Block will have funky colors on need – we are talking this.

 

Customize WordPress Inline Code : Directly Use Custom Inline CSS or Modify Theme’s CSS

 

This is Twitter Bootstrap style incline code’s CSS :

Vim
1
2
3
4
5
6
7
8
code {
background-color: #F9F2F4;
border-radius: 4px;
color: #C7254E;
font-size: 90%;
padding: 2px 4px;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
}

If you add/modify via your Theme’s / Child Theme’s CSS – that will do global change. That is great if you finalize the design for all the code blocks. If we want to override the loaded CSS, we need to add a class (like inline) and add !important :

Vim
1
2
3
4
5
6
7
8
code.inline {
background-color: #F9F2F4 !important;
border-radius: 4px !important;
color: #C7254E !important;
font-size: 90% !important;
padding: 2px 4px !important;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
}

anyone can easily embed it on post wrapping with style :

Vim
1
2
3
4
5
6
7
8
9
10
<style>
code.inline {
background-color: #F9F2F4 !important;
border-radius: 4px !important;
color: #C7254E !important;
font-size: 90% !important;
padding: 2px 4px !important;
font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;
}
</style>

Return to Top

 

Customize WordPress Inline Code : Inline Code Like Effect With CSS

 

Actually, that style distracts; it is good for some posts; like this article. Now, we can call the code.inline wrapping with HTML code blocks and adding the class. It is not a coding competition, so we can add simple span style ! This is what we used for that text span style :

Vim
1
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding: 2px 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">span style</span>

Pseudo method – as using the inline CSS ONLY not really doing the real work of wrapping with code.

Ultimately, the front-end will add inline CSS if we use Syntax Highlighter! This way is preserving this webpage as document with the inline style – it does not matter if we change the theme. In fact we have such 5 years old posts with incline CSS demo! In the year 2010-11, that was “new style”, in the year 2020 (may be you are reading this guide after 2020), our this span style will become old style. Like fashion designing. This way is more great, because we can customize a particular character like @ with a different color. Like @AbhishekCTRL. We needed to adjust the padding: 2px 4px :

Vim
1
2
3
4
5
6
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #990033 !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-left: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
@
</span>
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-right: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
AbhishekCTRL
</span>

Those who are new around CSS, padding: 2px 4px means :

Vim
1
2
3
4
padding-top: 2px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;

 

Does Customize WordPress Inline Code Means Using Inline CSS?

 

Never! We can wrap HTML, PHP and whatever stuffs if we use

(or backticks get converted to

).

is not mere a word div, but needs to indicate the web server software not to process it at all. That

is not balanced with

– it would break the whole web page’s design! We can not include that word code itself with opening and closing with normal keyboard character. To avoid such conflict, we use Github Gist or some externally hosted service. They are few and smallest limitation of any PHP like software driven content management system. TinyMCE of WordPress lacks a mode – we can not indicate that when text/HTML should not be processed in Text mode. We have to use web safe characters for ASCII chars :

Vim
1
2
&lt; for <
&gt; for >

TinyMCE plus a syntax highlighter perform that complicated work. That is why if you switch between Text and Visual mode, the formatting usually get lost. Not impossible – <code> but impractical. It is rediscovering the need of WYSIWYG html editor.

Another point is that – wrapping with code or pre will force to look the wrapped text different from the rest of the text even if CSS is not loaded.

Return to Top

 

What’s New We Read From Your Customize WordPress Inline Code Post? Known Things!

 

It is possible to use inline css in this way, we have to add a custom button on TinyMCE which will easily wrap with the CSS :

Vim
1
2
3
<span style="background-color: #F9F2F4 !important; border-radius: 4px !important; color: #C7254E !important; font-size: 90% !important; padding-top: 2px !important; padding-bottom: 2px !important; padding-right: 4px !important; font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace !important;">
AbhishekCTRL
</span>

That type of kind of code is actually for drawing the attention, like for example – run apt update && apt upgrade. There is no actual difference if we use real code to separate apt update && apt upgrade from the normal text of a sentence. This usage is not to escape the issue with non web safe characters. We could use italics or bold. But, sadly looks too much ordinary, mean something different and Google may think it as spam. Our typography is a bit different than that of Twitter Bootstrap, we need to increase the font-size: 110% !important; and change the font-family.

This is closer to perfect from typographical point of view, for our current design (at time of publication of this article). We used this :

Vim
1
2
3
<span style="background-color: #F7F7F9 !important; border: 1px solid #E1E1E8 !important; color: #C7254E !important; padding: 2px 4px !important; white-space: nowrap !important; border-radius: 3px !important; font-size: 1em !important;font-family: monospace, serif !important;">
This is closer
</span>

We can create a Button on WordPress Text Editor – simple highlighting the text and clicking the button will add the style or we can create a custom shortcode to manually wrap the text. We should end the article here!

Return to Top

This Article Has Been Shared 657 Times!

Facebook Twitter Pinterest

Abhishek Ghosh

About Abhishek Ghosh

Abhishek Ghosh is a Businessman, Surgeon, Author and Blogger. You can keep touch with him on Twitter - @AbhishekCTRL.

Here’s what we’ve got for you which might like :

Articles Related to Customize WordPress Inline Code

  • Scalable MySQL Database for WordPress with Rackspace Cloud

    Scalable MySQL Database for WordPress is very easy to create as Rackspace allows Cloud Database,so does Amazon. Here is a guide for high performance WordPress.

  • Genesis 2.0, YARP and Schema.org : Guide

    Genesis 2.0 is HTML5 based and YARP is one of the best related post plugin. Here is how to use Schema.org markup to tell search engines about the related links.

  • Remove 3rd Party URLs Added By WordPress Plugins

    Remove 3rd Party URLs Added By WordPress Plugins by a Bit Manual Searching on the Source Codes of the Plugins for Better on Page SEO. Here is Some Examples.

  • Add Itemprop image Schema in WordPress Posts

    Add Itemprop image Schema in WordPress Posts regardless of your type of Theme or Theme Framework – its do-it-yourself guide without keeping hit or miss chance.

  • WordPress W3TC Plugin Disable : For WP Update

    Disable W3TC Plugin for Nginx PHP5-FPM with Database Caching ON. WordPress W3TC Plugin Disable For WordPress Update When Stuck or Hanged.

Additionally, performing a search on this website can help you. Also, we have YouTube Videos.

Take The Conversation Further ...

We'd love to know your thoughts on this article.
Meet the Author over on Twitter to join the conversation right now!

If you want to Advertise on our Article or want a Sponsored Article, you are invited to Contact us.

Contact Us

Subscribe To Our Free Newsletter

Get new posts by email:

Please Confirm the Subscription When Approval Email Will Arrive in Your Email Inbox as Second Step.

Search this website…

 

Popular Articles

Our Homepage is best place to find popular articles!

Here Are Some Good to Read Articles :

  • Cloud Computing Service Models
  • What is Cloud Computing?
  • Cloud Computing and Social Networks in Mobile Space
  • ARM Processor Architecture
  • What Camera Mode to Choose
  • Indispensable MySQL queries for custom fields in WordPress
  • Windows 7 Speech Recognition Scripting Related Tutorials

Social Networks

  • Pinterest (24.3K Followers)
  • Twitter (5.8k Followers)
  • Facebook (5.7k Followers)
  • LinkedIn (3.7k Followers)
  • YouTube (1.3k Followers)
  • GitHub (Repository)
  • GitHub (Gists)
Looking to publish sponsored article on our website?

Contact us

Recent Posts

  • The Importance of Voice and Style in Essay Writing April 1, 2023
  • What Online Casinos Have No Deposit Bonus in Australia March 30, 2023
  • Four Foolproof Tips To Never Run Out Of Blog Ideas For Your Website March 28, 2023
  • The Interactive Entertainment Serving as a Tech Proving Ground March 28, 2023
  • Is it Good to Run Apache Web server and MySQL Database on Separate Cloud Servers? March 27, 2023

About This Article

Cite this article as: Abhishek Ghosh, "Customize WordPress Inline Code," in The Customize Windows, November 13, 2015, April 2, 2023, https://thecustomizewindows.com/2015/11/customize-wordpress-inline-code/.

Source:The Customize Windows, JiMA.in

PC users can consult Corrine Chorney for Security.

Want to know more about us? Read Notability and Mentions & Our Setup.

Copyright © 2023 - The Customize Windows | dESIGNed by The Customize Windows

Copyright  · Privacy Policy  · Advertising Policy  · Terms of Service  · Refund Policy

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT